import Image from "next/image";

/* ---------- Types (NO `any`) ---------- */
type HeroImage = {
  node?: {
    sourceUrl?: string;
    altText?: string | null;
  } | null;
} | null;

type AboutHeroData = {
  heroTitle?: string;
  heroSubtitle?: string;
  heroDescription?: string;
  heroImage?: HeroImage;
};

type AboutHeroProps = {
  data: AboutHeroData;
};

/* ---------- Component ---------- */
export default function AboutHero({ data }: AboutHeroProps) {
  return (
    <section className="pt-16 pb-25 bg-[#F3F3F3] text-[#202020]">
      <div className="container mx-auto px-4 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center">

        {/* LEFT CONTENT */}
        <div className="col-span-2">
          {/* Subtitle */}
          <span className="text-lg tracking-widest text-[#202020]/50 font-medium">
            {data.heroSubtitle}
          </span>

          {/* Title */}
          <h2 className="mt-4 mb-6 text-2xl md:text-[40px] leading-tight text-black font-mono font-medium uppercase">
            {data.heroTitle}
          </h2>

          {/* Description */}
          {data.heroDescription && (
            <div
              className="text-[#202020]/70 text-md lg:text-lg space-y-4 font-medium"
              dangerouslySetInnerHTML={{
                __html: data.heroDescription,
              }}
            />
          )}
        </div>

        {/* RIGHT IMAGE */}
        <div className="relative flex justify-center lg:justify-end">
          <div className="relative">

            {/* Image */}
            {data.heroImage?.node?.sourceUrl && (
              <Image
                src={data.heroImage.node.sourceUrl}
                alt={data.heroImage.node.altText || "Who We Are"}
                width={420}
                height={520}
                unoptimized
                className="rounded-2xl"
                priority
              />
            )}

            {/* Arrow Icon */}
            <div className="absolute top-[-35px] right-2 sm:top-[-40px] sm:right-5 w-[100] h-[100] sm:w-[128] sm:h-[128] flex items-center justify-center animate-arrow-up">
              <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 50 50" className="rotate-320 w-full h-full "><path fill="currentColor" d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17s-7.6 17-17 17m0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15s15-6.7 15-15s-6.7-15-15-15"/><path fill="currentColor" d="m24.7 34.7l-1.4-1.4l8.3-8.3l-8.3-8.3l1.4-1.4l9.7 9.7z"/><path fill="currentColor" d="M16 24h17v2H16z"/></svg>
            </div>

          </div>
        </div>

      </div>
    </section>
  );
}