"use client";

import Image from "next/image";

import HeroDots from "@/components/pages/client/home/hero-dots";
import DeloitteLogo from "@/public/client/social-proof/deloitte.webp";
import MetaLogo from "@/public/client/social-proof/meta.webp";
import PhilipsLogo from "@/public/client/social-proof/philips.webp";
import ONSLogo from "@/public/client/social-proof/ons.webp";
import type { HeroContent } from "@/lib/homepage-ghost-content";
import type { RandomImage } from "@/utils/generate-random-image";

type InitialHeroProps = { content: HeroContent; randomImage: RandomImage };

function InitialHero({ content, randomImage }: InitialHeroProps) {
  return (
    <section className="my-12 max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 xxl:px-16 xxxl:px-20">
      <div className="flex items-center justify-center lg:hidden">
        <Image
          alt={randomImage?.alt || ""}
          className="object-cover"
          loading="eager"
          sizes="(min-width: 1536px) 450px, (min-width: 1920px) 550px, 300px"
          src={randomImage?.src || ""}
          width={300}
        />
      </div>
      <div className="lg:relative flex flex-row mt-12 lg:mt-36 xxl:mt-48 xxxl:mt-56">
        <div className="lg:max-w-3xl lg:ps-20 px-8 lg:px-0 xxl:max-w-4xl xxxl:max-w-5xl">
          <h1 className="text-center lg:text-start font-inter font-black text-3xl sm:text-7xl">
            {content.title}
            <span
              aria-hidden
              className="inline text-pfrBasicBlue"
              role="presentation"
            >
              .
            </span>
          </h1>
          <h2 className="text-center lg:text-start font-noto text-xl mt-2">
            {content.lead}
          </h2>
          <div className="flex flex-col text-center md:flex-row md:justify-center lg:justify-between lg:text-start mt-12 gap-4 max-w-lg m-auto lg:ms-0 xxl:max-w-xl xxxl:max-w-2xl">
            {content.stats.map((stat, index) => (
              <div key={index} className="flex flex-col">
                <span className="text-5xl font-black font-inter text-black dark:text-white">
                  {stat.stat}
                </span>
                <span className="text-sm font-noto text-gray-500 dark:text-white xxl:text-base xxxl:text-lg">
                  {stat.label}
                </span>
              </div>
            ))}
          </div>
        </div>
        <div className="hidden lg:block lg:relative flex-1 xxl:flex-[1.5] xxxl:flex-[2]">
          <div className="absolute inset-0 flex justify-center items-center">
            <HeroDots />
          </div>
          <div className="absolute inset-0 flex justify-center items-center">
            <Image
              alt={randomImage?.alt || ""}
              className="object-cover"
              loading="eager"
              sizes="(min-width: 1536px) 450px, (min-width: 1920px) 550px, 350px"
              src={randomImage?.src || ""}
              width={350}
            />
          </div>
        </div>
      </div>
      <div className="text-center lg:text-start lg:ps-20 xxl:ps-24 xxxl:ps-28">
        <p className="font-noto mt-12 xxl:text-lg xxxl:text-xl">
          People for Research is trusted by
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-4 gap-12 px-12 lg:px-0 lg:gap-0 py-8 place-items-center lg:place-items-start max-w-4xl m-auto lg:ms-0 xxl:max-w-5xl xxxl:max-w-6xl">
          <Image
            alt="Deloitte logo with text and a green dot."
            className="object-cover w-32 m-auto xxl:w-40 grayscale dark:invert"
            loading="eager"
            src={DeloitteLogo}
          />
          <Image
            alt="Meta logo with a blue infinity symbol."
            className="object-cover w-32 m-auto xxl:w-40 grayscale dark:invert"
            loading="eager"
            src={MetaLogo}
          />
          <Image
            alt="Philips logo with blue text."
            className="object-cover w-32 m-auto xxl:w-40 grayscale dark:invert"
            loading="eager"
            src={PhilipsLogo}
          />
          <Image
            alt="ONS logo with quarter circle graphic and text."
            className="object-cover w-32 m-auto xxl:w-40 grayscale dark:invert"
            loading="eager"
            src={ONSLogo}
          />
        </div>
      </div>
    </section>
  );
}

export default InitialHero;