import Image from "next/image";
import type { ProgramsSectionContent } from "@/app/lib/content";

type ProgramItem = {
  id: string;
  title: string;
  description: string;
};

export default function ProgramsSection({
  section,
  programs,
}: {
  section: ProgramsSectionContent;
  programs: ProgramItem[];
}) {
  return (
    <section id="programs" className="site-container py-2 md:py-3">
      <div className="rounded-3xl bg-white px-0 py-2 md:py-3">
        <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
          <div className="w-full">
            <h2 className="text-2xl md:text-4xl font-bold tracking-tight text-[#132b87]">
              {section.heading}
            </h2>
          </div>
        </div>

        <div className="mt-4 grid grid-cols-1 gap-6 lg:grid-cols-[1.05fr_1.35fr]">
          <div className="relative overflow-hidden rounded-2xl">
            <Image
              src={section.imageUrl}
              alt={section.heading}
              width={760}
              height={900}
              className="h-full min-h-85 w-full object-cover"
            />
            <div className="absolute inset-0 bg-linear-to-t from-[#0d1a52]/80 via-[#132b87]/20 to-transparent" />
            <div className="absolute bottom-0 left-0 right-0 p-5 md:p-6 text-white">
              <p className="mt-2 text-sm text-white/90 leading-relaxed">
                {section.body}
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {programs.map((program) => (
              <article
                key={program.id}
                className="rounded-2xl border border-[#d6e1ff] bg-white p-4 md:p-5 shadow-[0_8px_24px_rgba(31,63,184,0.08)]"
              >
                <h3 className="text-base md:text-lg font-semibold text-[#132b87]">
                  {program.title}
                </h3>
                <p className="mt-2 text-sm text-[#5a688d] leading-relaxed">
                  {program.description}
                </p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
