import Image from "next/image";

type ImageNode = {
  node: {
    sourceUrl: string;
    altText?: string | null;
  };
} | null;

export type OverviewData = {
  overviewSubtitle: string;
  overviewTitle: string;
  overviewDescription: string;
  overviewFullImage: ImageNode;
};

type Props = {
  data: OverviewData;
};

export default function Overview({ data }: Props) {
  return (
    <section className="bg-white pt-20 md:pt-28 overflow-hidden">
      <div className="container mx-auto px-4">

        {/* TEXT CONTENT */}
        <div className="max-w-6xl mx-auto text-center mb-14 md:mb-28">
          <span className="block text-lg font-medium text-[#202020]/60 mb-3">
            {data.overviewSubtitle}
          </span>

          <h2 className="font-mono font-medium text-3xl md:text-4xl lg:text-[40px] text-[#202020] mb-6">
            {data.overviewTitle}
          </h2>

          <div
            className="text-[#202020]/70 text-lg font-medium space-y-4"
            dangerouslySetInnerHTML={{ __html: data.overviewDescription }}
          />
        </div>

      </div>

      {/* IMAGE (SAFE) */}
      {data.overviewFullImage?.node?.sourceUrl && (
        <div className="relative w-full">
          <Image
            src={data.overviewFullImage.node.sourceUrl}
            alt={data.overviewFullImage.node.altText || "Project overview"}
            width={1600}
            height={800}
            className="w-full object-cover"
            unoptimized
            priority
          />
        </div>
      )}
    </section>
  );
}