import Image from "next/image";
type ImageNode = {
  node: {
    sourceUrl: string;
    altText?: string | null;
  };
} | null;

export type ProjectDetailsData = {
  projectIdea: string;
  projectDescription: string;
  projectChallenges: string;
  challengesDescription: string;
  projectResults: string;
  resultsDescription: string;
  iphoneScreenImage: ImageNode;
};

type Props = {
  data: ProjectDetailsData;
};

export default function ProjectDetails({ data }: Props) {
  return (
    <section className="relative bg-[#101010] text-white py-20 md:pt-28 md:pb-40">
      {/* Background Image */}
      {/* <div className="absolute inset-0 -z-10">
        <Image
          src="/development-bg.webp"   // put image in /public
          alt="Development background"
          fill
          className="object-cover"
          priority
        />
      </div> */}
      <div className="container mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">

        {/* LEFT CONTENT */}
        <div className="space-y-12 max-w-2xl">
          {/* PROJECT IDEA */}
          <div>
            <h3 className="font-mono text-xl md:text-2xl mb-4">
              {data.projectIdea}
            </h3>
            <div
              className="text-white/70 text-lg leading-relaxed"
              dangerouslySetInnerHTML={{ __html: data.projectDescription }}
            />
          </div>

          {/* PROJECT CHALLENGES */}
          <div>
            <h3 className="font-mono text-xl md:text-2xl mb-4">
              {data.projectChallenges}
            </h3>
            <div
              className="text-white/70 text-lg leading-relaxed"
              dangerouslySetInnerHTML={{ __html: data.challengesDescription }}
            />
          </div>

          {/* PROJECT RESULTS */}
          <div>
            <h3 className="font-mono text-xl md:text-2xl mb-4">
              {data.projectResults}
            </h3>
            <div
              className="text-white/70 text-lg leading-relaxed"
              dangerouslySetInnerHTML={{ __html: data.resultsDescription }}
            />
          </div>
        </div>

        {/* RIGHT IMAGE */}
        {data.iphoneScreenImage?.node?.sourceUrl && (
          <div className="relative flex justify-center lg:justify-end">
            <Image
              src={data.iphoneScreenImage.node.sourceUrl}
              alt={data.iphoneScreenImage.node.altText || "iPhone screen"}
              width={360}
              height={720}
              className="w-full h-full min-w-[360px] object-contain"
              unoptimized
              priority
            />
          </div>
        )}
      </div>
    </section>
  );
}