import Image from "next/image";

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

type HeroProps = {
  title: string;
  data: {
    clientLogo: ImageNode;
    platform: string;
    appScreenshotImage: ImageNode;
  };
};

export default function Hero({ title, data }: HeroProps) {
  return (
    <>
      {/* TOP HERO */}
      <section className="relative h-[300px] md:h-[600px] bg-black flex items-center justify-center text-white overflow-hidden">
        <video
          autoPlay
          muted
          loop
          playsInline
          className="absolute inset-0 w-full h-full object-cover"
        >
          <source src="/togwe-hero-bg.mp4" type="video/mp4" />
        </video>

        <h1 className="relative z-10 text-4xl md:text-5xl font-mono">
          Case Study
        </h1>
      </section>

      {/* INFO SECTION */}
      <section className="bg-[#F3F3F3] pt-20">
        <div className="container mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-10 items-end">
          
          {/* LEFT INFO CARD */}
          <div className="text-center max-w-md mx-auto lg:mx-0 pb-15">
            {/* LOGO */}
            {data.clientLogo?.node?.sourceUrl && (
              <div className="flex justify-center mb-6">
                <div className="w-[184px] h-[184px] bg-white overflow-hidden rounded-full border border-[#202020]/15 flex items-center justify-center">
                  <Image
                    src={data.clientLogo.node.sourceUrl}
                    alt={data.clientLogo.node.altText || title}
                    width={96}
                    height={96}
                    unoptimized
                    className="w-[160px] h-[106px] object-cover"
                  />
                </div>
              </div>
            )}

            {/* PROJECT */}
            <p className="text-lg text-[#202020]/50 mb-1">Project</p>
            <h2 className="text-2xl font-mono font-medium text-[#202020]">
              {title}
            </h2>
            <hr className="max-w-[220px] mx-auto border-[#202020]/10 my-3" />

            {/* INDUSTRY */}
            <p className="text-lg text-[#202020]/50 mb-1">Industry</p>
            <p className="text-2xl font-mono font-medium text-[#202020]">
              Fantasy Sports
            </p>
            <hr className="max-w-[220px] mx-auto border-[#202020]/10 my-3" />

            {/* PLATFORM */}
            <p className="text-lg text-[#202020]/50 mb-1">Platform</p>
            <p className="text-2xl font-mono font-medium text-[#202020]">
              {data.platform}
            </p>
          </div>

          {/* RIGHT IMAGE */}
          {data.appScreenshotImage?.node?.sourceUrl && (
            <div className="relative flex justify-center">
              <Image
                src={data.appScreenshotImage.node.sourceUrl}
                alt={data.appScreenshotImage.node.altText || title}
                width={700}
                height={700}
                className="relative z-10"
                unoptimized
              />
            </div>
          )}

        </div>
      </section>
    </>
  );
}