import Image from "next/image";
import { home } from "@/lib/content";
import { Button } from "@/components/ui/Button";
import { GoldenSpiral } from "@/components/graphics/GoldenSpiral";
import { WaveDivider } from "@/components/graphics/WaveDivider";
import { DeskScene } from "@/components/graphics/Placeholders";

export function Hero() {
  const { hero } = home;
  return (
    <section aria-labelledby="hero-title" className="bg-ivory-100 relative isolate overflow-hidden">
      <div className="container-site relative grid items-center gap-10 pt-8 pb-24 md:pt-10 md:pb-32 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:gap-4 lg:pt-4 lg:pb-32">
        <div className="relative z-10 max-w-[36rem] lg:pt-6">
          <h1 id="hero-title" className="text-display">
            {hero.titleLines.map((line, i) => (
              <span key={i} className="block">
                {line}
              </span>
            ))}
          </h1>
          <p className="text-ink-700 mt-6 max-w-[30rem] text-[1.05rem]">{hero.subtitle}</p>
          <div className="mt-8">
            <Button href={hero.cta.href} size="lg">
              {hero.cta.label}
            </Button>
          </div>
        </div>

        <div className="relative -mx-[var(--container-pad)] lg:mx-0 lg:-mr-[var(--container-pad)]">
          <div className="relative aspect-[16/10] w-full overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_12%,black)] lg:aspect-[1.18]">
            {hero.image.src ? (
              <Image
                src={hero.image.src}
                alt={hero.image.alt}
                fill
                priority
                sizes="(min-width:1024px) 50vw, 100vw"
                className="object-cover"
              />
            ) : (
              <DeskScene className="absolute inset-0 h-full w-full" />
            )}
            <GoldenSpiral
              className="text-gold-500 pointer-events-none absolute -top-[6%] right-[2%] h-[112%] w-auto opacity-90 drop-shadow-[0_0_1px_rgba(255,255,255,0.6)]"
              strokeWidth={0.1}
              flipY
            />
          </div>
        </div>
      </div>

      <WaveDivider className="absolute inset-x-0 bottom-0 h-20 w-full md:h-28 lg:h-36" />
    </section>
  );
}