/* hero.jsx — cinematic hero with 3 treatments: spotlight | split | silhouette */
const { useEffect: _heUse } = React;

function HeroStats({ className = '' }) {
  const [info, setInfo] = React.useState(null);
  const stats = [
    { k: 'Model', v: 'Baldwin SF-10' },
    { k: 'Performances', v: '35 shows' },
    { k: 'Spectators', v: '550,000+',
      info: { title: 'Live Spectators', body:
        "The live spectator metric is a cumulative attendance calculation based on official box office data from Billy Joel's 1982 A Tour Behind the Nylon Curtain itinerary. The figure is determined by totaling the documented crowd sizes across the tour's 35 arena dates in the United States and Canada. Because the tour exclusively utilized high-capacity metropolitan sports arenas—averaging between 15,000 and 16,000 attendees per night (including the multi-night, maximum-capacity stand of 15,200+ fans per show at the Nassau Veterans Memorial Coliseum)—the aggregate live audience that witnessed this exact piano perform exceeds 550,000 people." } },
    { k: 'Last Played', v: 'Dec. 31, 1982' },
  ];
  return (
    <React.Fragment>
      <dl className={`grid grid-cols-2 gap-x-10 gap-y-6 sm:grid-cols-4 ${className}`}>
        {stats.map((s) => (
          <div key={s.k} className="relative border-t border-white/15 pt-3">
            {s.info && <InfoButton onClick={() => setInfo(s.info)} label={`How ${s.k} is calculated`} className="!top-3" />}
            <dt className="pr-7 font-mono text-[10px] uppercase tracking-[0.28em] text-ink-faint">{s.k}</dt>
            <dd className="mt-1 font-display text-2xl tracking-tight text-ink">{s.v}</dd>
          </div>
        ))}
      </dl>
      <InfoDrawer open={!!info} eyebrow="How it's calculated" title={info ? info.title : ''} onClose={() => setInfo(null)}>
        {info && <InfoBody>{info.body}</InfoBody>}
      </InfoDrawer>
    </React.Fragment>
  );
}

function ScrollCue() {
  return (
    <div className="flex items-center gap-3 font-mono text-[10px] uppercase tracking-[0.3em] text-ink-faint">
      <span className="relative block h-9 w-px overflow-hidden bg-white/15">
        <span className="absolute inset-x-0 top-0 h-3 bg-white/70" style={{ animation: 'cuefall 2.2s cubic-bezier(.7,0,.3,1) infinite' }}></span>
      </span>
      Scroll
      <style>{`@keyframes cuefall{0%{transform:translateY(-12px)}60%,100%{transform:translateY(36px)}}`}</style>
    </div>
  );
}

/* ---- TREATMENT A — SPOTLIGHT: full-bleed performance frame ---- */
function HeroSpotlight() {
  const bg = useParallax(0.16, true);
  return (
    <header className="relative flex min-h-screen flex-col overflow-hidden bg-black">
      <div className="hero-bg absolute inset-0">
        <video ref={bg} autoPlay muted loop playsInline preload="auto"
               poster="assets/hero-poster.jpg" aria-hidden="true"
               className="h-full w-full object-cover" style={{ filter: 'grayscale(0.32) contrast(1.08) brightness(0.82)' }}>
          <source src="assets/hero-loop.webm" type="video/webm" />
          <source src="assets/hero-loop.mp4" type="video/mp4" />
        </video>
      </div>
      {/* spotlight + grades */}
      <div className="pointer-events-none absolute inset-0" style={{ background: 'radial-gradient(120% 80% at 50% -10%, rgba(58,95,174,0.18), rgba(0,0,0,0) 45%)', animation: 'breathe 9s ease-in-out infinite' }}></div>
      <div className="pointer-events-none absolute inset-0" style={{ background: 'linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.12) 30%, rgba(0,0,0,0.35) 62%, rgba(10,10,11,0.98) 100%)' }}></div>
      <div className="pointer-events-none absolute inset-0" style={{ boxShadow: 'inset 0 0 220px rgba(0,0,0,0.85)' }}></div>

      <div className="relative z-10 mx-auto flex w-full max-w-[1240px] flex-1 flex-col justify-end px-6 pb-16 pt-32 md:px-10 md:pb-20">
        <h1 className="font-display uppercase leading-[0.9] tracking-[-0.005em]">
          <span data-reveal data-reveal-delay="60" className="block text-[clamp(2.4rem,8.5vw,8rem)] text-ink">The Billy Joel</span>
          <span data-reveal data-reveal-delay="160" className="block text-[clamp(2.4rem,8.5vw,8rem)] chrome">Piano</span>
        </h1>
        <div data-reveal data-reveal-delay="240" className="mt-8 flex flex-col gap-8 md:flex-row md:items-end md:justify-between">
          <p className="max-w-[62ch] text-[16px] leading-relaxed text-ink-dim" style={{ textWrap: 'balance' }}>From his most prolific era on stage to the Ultimate Holy Grail: discover the history, on-screen legacy, and untold journey of Billy Joel’s legendary 1978 Baldwin “kill sticker” piano.
          </p>
          <div className="hidden md:block"><ScrollCue /></div>
        </div>
        <div data-reveal data-reveal-delay="320">
          <HeroStats className="mt-12" />
        </div>
        <div className="mt-10 flex items-center justify-between gap-6">
          <p className="font-mono text-[10px] leading-relaxed tracking-wide md:whitespace-nowrap" style={{ color: 'rgba(255,255,255,0.5)' }}>
            Source: “Live from Long Island” (Nassau Coliseum, 1982). Property of HBO / Columbia Records (Sony Music Entertainment). Displayed for historical and archival preservation purposes.
          </p>
          <div className="shrink-0 md:hidden"><ScrollCue /></div>
        </div>
      </div>
    </header>
  );
}

/* ---- TREATMENT B — EDITORIAL SPLIT: type left, plate right ---- */
function HeroSplit() {
  const img = useParallax(0.1, true);
  return (
    <header className="relative min-h-screen overflow-hidden bg-coal">
      <div className="mx-auto grid min-h-screen w-full max-w-[1320px] grid-cols-1 items-stretch gap-0 md:grid-cols-12">
        {/* type column */}
        <div className="relative z-10 flex flex-col justify-center px-6 pt-28 pb-12 md:col-span-7 md:px-10 md:pt-32 md:pb-20">
          <div data-reveal><Kicker dot>1978 · Baldwin Piano Co. · Serial SF 223781</Kicker></div>
          <h1 className="mt-7 font-display uppercase leading-[0.92] tracking-[-0.005em]">
            <span data-reveal data-reveal-delay="60" className="block text-[clamp(2.1rem,6.5vw,6rem)] text-ink">The Billy Joel</span>
            <span data-reveal data-reveal-delay="140" className="block text-[clamp(2.1rem,6.5vw,6rem)] chrome">Piano</span>
            <span data-reveal data-reveal-delay="220" className="mt-4 block font-sans text-[13px] font-semibold uppercase tracking-[0.26em] text-ink-faint">Baldwin SF-10 Artist Grand</span>
          </h1>
          <p data-reveal data-reveal-delay="300" className="mt-9 max-w-[46ch] text-[16px] leading-relaxed text-ink-dim">
            Owned and toured the world by Billy Joel from 1980 through the entire 1982
            <span className="text-ink"> Nylon Curtain</span> tour. The handwritten setlist is still affixed to the lid.
          </p>
          <div data-reveal data-reveal-delay="360"><HeroStats className="mt-12 max-w-xl" /></div>
        </div>
        {/* plate column */}
        <div className="relative md:col-span-5">
          <div className="relative h-[52vh] w-full overflow-hidden ring-1 ring-white/10 md:absolute md:inset-0 md:h-full">
            <img ref={img} src="assets/joel-side.webp" alt="Billy Joel at the Baldwin SF-10, side view"
                 className="h-full w-full scale-110 object-cover" style={{ filter: 'grayscale(0.25) contrast(1.06) brightness(0.86)' }} />
            <div className="pointer-events-none absolute inset-0" style={{ background: 'linear-gradient(90deg, rgba(10,10,11,0.95) 0%, rgba(0,0,0,0) 30%)' }}></div>
            <div className="pointer-events-none absolute inset-0" style={{ background: 'linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(10,10,11,0.7) 100%)' }}></div>
            <div className="absolute bottom-4 right-4 font-mono text-[10px] tracking-widest text-ink-faint">UNIONDALE, NY · 12 / 29 / 82</div>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ---- TREATMENT C — SILHOUETTE: stage-lit, type over near-black ---- */
function HeroSilhouette() {
  const img = useParallax(0.12, true);
  return (
    <header className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-black text-center">
      {/* stage beams */}
      <div className="pointer-events-none absolute inset-x-0 top-0 h-2/3" style={{ background: 'conic-gradient(from 180deg at 50% 0%, rgba(0,0,0,0) 42%, rgba(58,95,174,0.16) 50%, rgba(0,0,0,0) 58%)', animation: 'breathe 8s ease-in-out infinite' }}></div>
      <div className="pointer-events-none absolute inset-x-0 top-0 h-1/2" style={{ background: 'radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,0.10), rgba(0,0,0,0) 60%)' }}></div>

      <div className="relative z-10 px-6">
        <div data-reveal><Kicker dot className="justify-center">Tour-Used · 1978 Baldwin SF-10 Artist Grand</Kicker></div>
        <h1 className="mt-7 font-display uppercase leading-[0.9] tracking-[-0.005em]">
          <span data-reveal data-reveal-delay="60" className="block text-[clamp(2.6rem,9vw,8.5rem)] text-ink">The Billy Joel</span>
          <span data-reveal data-reveal-delay="150" className="-mt-1 block text-[clamp(2.6rem,9vw,8.5rem)] chrome">Piano</span>
        </h1>
        <p data-reveal data-reveal-delay="230" className="mx-auto mt-6 max-w-[42ch] text-[16px] leading-relaxed text-ink-dim">
          The instrument behind <span className="text-ink">The Nylon Curtain</span>.
        </p>
      </div>

      {/* low piano silhouette */}
      <div className="absolute inset-x-0 bottom-0 h-[42vh] overflow-hidden">
        <img ref={img} src="assets/joel-front.webp" alt="Billy Joel at the Baldwin SF-10"
             className="h-full w-full scale-110 object-cover object-top" style={{ filter: 'grayscale(0.4) contrast(1.1) brightness(0.62)' }} />
        <div className="pointer-events-none absolute inset-0" style={{ background: 'linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.1) 40%, rgba(10,10,11,1) 100%)' }}></div>
      </div>
      <div className="absolute bottom-7 left-1/2 z-10 -translate-x-1/2"><ScrollCue /></div>
    </header>
  );
}

function Hero({ variant }) {
  if (variant === 'split') return <HeroSplit />;
  if (variant === 'silhouette') return <HeroSilhouette />;
  return <HeroSpotlight />;
}

Object.assign(window, { Hero });