import Image from "next/image";
import { Container } from "@/components/ui/Container";
import { MonoTick } from "@/components/ui/MonoTick";
import { Button } from "@/components/ui/Button";
import { Reveal } from "@/components/ui/Reveal";

type HeroAction = { label: string; href: string; variant?: "brand" | "outline" };

export type HeroProps = {
  /** Headline, e.g. "This is Beyond". The violet dash + numeral are rendered by the block. */
  lead: string;
  numeral: string;
  subhead?: React.ReactNode;
  actions?: HeroAction[];
  image: { src: string; alt: string };
  chromeLeft?: string;
  chromeRight?: string;
};

/**
 * Hero — the wearer on the black bench, full-bleed, exactly the original's open:
 * "This is Beyond — 2" with the violet signal dash between word and numeral. A
 * single primary CTA plus the trailer cue; no decorative scaffolding, the image
 * carries the frame.
 */
export function Hero({
  lead,
  numeral,
  subhead,
  actions,
  image,
  chromeLeft = "BIGSCREEN",
  chromeRight,
}: HeroProps) {
  return (
    <section className="relative flex min-h-[100svh] flex-col overflow-hidden bg-paper text-ink">
      {/* the wearer, lit on the black bench */}
      <div aria-hidden className="absolute inset-0">
        <Image
          src={image.src}
          alt={image.alt}
          fill
          priority
          sizes="100vw"
          className="object-cover object-center"
        />
        {/* legibility veils: top for the headline, bottom for the controls */}
        <div className="absolute inset-x-0 top-0 h-2/3 bg-gradient-to-b from-paper/85 via-paper/25 to-transparent" />
        <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-paper/80 to-transparent" />
      </div>

      {/* headline, anchored high like the original */}
      <Container className="relative z-10 flex items-center justify-between pt-28 md:pt-32">
        <MonoTick>{chromeLeft}</MonoTick>
        {chromeRight ? <MonoTick className="hidden md:block">{chromeRight}</MonoTick> : null}
      </Container>

      <Container className="relative z-10 mt-8 md:mt-12">
        <Reveal>
          <h1 className="flex flex-wrap items-center gap-x-5 gap-y-2 font-display text-[clamp(3rem,9vw,7rem)] font-medium leading-[0.95] tracking-[-0.035em]">
            <span>{lead}</span>
            <span
              aria-hidden
              className="hidden h-[0.12em] w-[clamp(2rem,5vw,5rem)] shrink-0 rounded-full bg-brand md:inline-block"
            />
            <span>{numeral}</span>
          </h1>
          {subhead ? (
            <p className="mt-7 max-w-md text-xl text-ink/75">{subhead}</p>
          ) : null}
        </Reveal>
      </Container>

      {/* controls, anchored low-left */}
      <Container className="relative z-10 mt-auto flex flex-wrap items-end justify-between gap-6 pb-12">
        {actions?.length ? (
          <Reveal className="flex flex-wrap gap-3" delayMs={120}>
            {actions.map((a) => (
              <Button key={a.href} href={a.href} variant={a.variant ?? "brand"} size="lg">
                {a.label}
              </Button>
            ))}
          </Reveal>
        ) : (
          <span />
        )}
        <MonoTick className="hidden shrink-0 md:block">SCROLL ↓</MonoTick>
      </Container>
    </section>
  );
}