// ─── Hero: cinematic match-cut drop + headline ───────────────────────────

function Hero({ onNav }) {
  const [stage, setStage] = useState('idle'); // idle -> scrub -> drop -> reveal -> done
  const triggered = useRef(false);

  useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    if (mq.matches) { setStage('done'); return; }
    // Auto-play after a short beat on load; also triggered on first scroll
    const start = () => {
      if (triggered.current) return;
      triggered.current = true;
      setStage('scrub');
      setTimeout(() => setStage('drop'), 900);
      setTimeout(() => setStage('reveal'), 1500);
      setTimeout(() => setStage('done'), 2700);
    };
    const t = setTimeout(start, 650);
    const onScroll = () => start();
    window.addEventListener('scroll', onScroll, { passive: true, once: true });
    return () => { clearTimeout(t); window.removeEventListener('scroll', onScroll); };
  }, []);

  const done = stage === 'done';

  return (
    <section id="top" style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 80, overflow: 'hidden' }}>
      {/* Ambient markers */}
      <div className="container" style={{ position: 'relative', width: '100%' }}>

        {/* Top-of-frame metadata (matches brand "document header" convention) */}
        <div style={{
          position: 'absolute', top: -40, left: 48, right: 48,
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'var(--tungsten)',
        }}>
          <span>REF · STUDIO.ANSEL / MAIN</span>
          <span>2026 · ESTABLISHED</span>
        </div>

        {/* Match-cut overlay (the red line + dot) */}
        <div aria-hidden="true" style={{
          position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
          display: done ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center',
          pointerEvents: 'none', zIndex: 3,
        }}>
          <div style={{ position: 'relative', width: 280, height: 4 }}>
            <span style={{ position: 'absolute', inset: 0, background: 'var(--signal)', opacity: 0.28 }} />
            <span style={{
              position: 'absolute',
              top: '50%',
              left: stage === 'idle' ? '0%' : 'calc(100% - 14px)',
              width: 14, height: 14, background: 'var(--signal)',
              transform: stage === 'drop' ? 'translate(0, 60vh) translateY(-50%)' : 'translateY(-50%)',
              transition: stage === 'scrub'
                ? 'left 800ms cubic-bezier(.45,.05,.55,.95)'
                : stage === 'drop'
                  ? 'transform 600ms cubic-bezier(.55,.06,.68,.19)'
                  : 'none',
              opacity: stage === 'reveal' || stage === 'done' ? 0 : 1,
            }} />
          </div>
        </div>

        {/* Hero content */}
        <div style={{
          opacity: done ? 1 : 0,
          transform: done ? 'translateY(0)' : 'translateY(12px)',
          transition: 'opacity 900ms ease, transform 900ms cubic-bezier(.2,.6,.2,1)',
        }}>
          <div className="mono" style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--parchment)', marginBottom: 44 }}>
            <span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--signal)' }} />
            <span>STUDIO · ANSEL</span>
            <span style={{ color: 'var(--tungsten)' }}>//</span>
            <span>MODE · DIRECTED AI</span>
            <span style={{ color: 'var(--tungsten)' }}>//</span>
            <span>STATUS · AVAILABLE</span>
          </div>

          <div className="hero-grid" style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1.25fr) minmax(0, 1fr)',
            gap: 72,
            alignItems: 'start',
          }}>
            {/* LEFT — headline column */}
            <div>
              <h1 className="display" style={{
                fontSize: 'clamp(48px, 8.4vw, 124px)',
                lineHeight: 0.96,
                letterSpacing: '-0.02em',
                color: 'var(--bone)',
                maxWidth: '14ch',
                fontWeight: 500,
                textWrap: 'pretty',
                textTransform: 'lowercase',
              }}>
                infinite reach,<br />
                <span style={{ fontStyle: 'italic', color: 'var(--parchment)' }}>with a human</span> touch<span style={{ color: 'var(--signal)' }}>.</span>
              </h1>

              <p style={{ maxWidth: 540, color: 'var(--parchment)', fontSize: 19, lineHeight: 1.55, fontWeight: 300, marginTop: 56 }}>
                Ansel is a production studio for brands that refuse the generic. We build cinematic films, campaign systems, and creative pipelines at the pace of modern tooling — with the judgment of a traditional studio behind every frame.
              </p>

              <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 40 }}>
                <a href="#inquiry" onClick={(e) => { e.preventDefault(); onNav('inquiry'); }} className="btn primary">
                  Start a project <span className="arrow">→</span>
                </a>
                <a href="#work" onClick={(e) => { e.preventDefault(); onNav('work'); }} className="btn ghost">
                  View the reel
                </a>
              </div>
            </div>

            {/* RIGHT — framed reference plate */}
            <figure className="hero-plate" style={{
              position: 'relative',
              margin: 0,
              aspectRatio: '1 / 1',
              background: 'var(--obsidian)',
              border: '1px solid var(--border)',
              overflow: 'hidden',
            }}>
              {/* corner crop marks */}
              {[
                { top: 8, left: 8, borderTop: '1px solid var(--bone)', borderLeft: '1px solid var(--bone)' },
                { top: 8, right: 8, borderTop: '1px solid var(--bone)', borderRight: '1px solid var(--bone)' },
                { bottom: 8, left: 8, borderBottom: '1px solid var(--bone)', borderLeft: '1px solid var(--bone)' },
                { bottom: 8, right: 8, borderBottom: '1px solid var(--bone)', borderRight: '1px solid var(--bone)' },
              ].map((s, i) => (
                <span key={i} aria-hidden="true" style={{ position: 'absolute', width: 14, height: 14, ...s }} />
              ))}

              <img
                src="assets/inevitable.png"
                alt="Two hands framing an ellipsis — the Ansel motif of directed emergence."
                style={{
                  width: '100%', height: '100%', objectFit: 'cover', display: 'block',
                  filter: 'contrast(1.02) brightness(0.98)',
                  transform: done ? 'scale(1)' : 'scale(1.04)',
                  transition: 'transform 2200ms cubic-bezier(.2,.6,.2,1)',
                }}
              />

              {/* caption strip */}
              <figcaption className="mono" style={{
                position: 'absolute', left: 0, right: 0, bottom: 0,
                padding: '10px 14px',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                fontSize: 9.5, color: 'var(--parchment)',
                background: 'linear-gradient(180deg, transparent, rgba(13,13,11,0.88) 55%)',
                letterSpacing: '0.14em',
              }}>
                <span>PLATE 001 &nbsp;·&nbsp; <span style={{ color: 'var(--ember)' }}>INEVITABLE</span></span>
                <span>1:1 &nbsp;·&nbsp; TUNGSTEN</span>
              </figcaption>
            </figure>
          </div>
        </div>

        {/* Footer bar of hero */}
        <div style={{
          opacity: done ? 1 : 0,
          transition: 'opacity 1200ms ease 400ms',
          marginTop: 120, paddingTop: 24, borderTop: '1px solid var(--border)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20,
        }}>
          <div className="mono" style={{ fontSize: 10, color: 'var(--parchment)' }}>
            <span style={{ color: 'var(--tungsten)' }}>N°</span> 044 &nbsp;·&nbsp;
            FIRST DAY &nbsp;·&nbsp; 1:1 &nbsp;·&nbsp; RENDERED
          </div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--parchment)', display: 'flex', alignItems: 'center', gap: 10 }}>
            Scroll <span style={{ width: 1, height: 28, background: 'var(--tungsten)', display: 'inline-block' }} />
            <span style={{
              display: 'inline-block', width: 1, height: 28, background: 'var(--ember)',
              animation: 'slideDown 1.8s ease-in-out infinite',
            }} />
          </div>
        </div>

        <style>{`
          @keyframes slideDown { 0%{ transform: translateY(-12px); opacity: 0; } 30%,70%{ opacity: 1; } 100%{ transform: translateY(12px); opacity: 0; } }
        `}</style>
      </div>
    </section>
  );
}

window.Hero = Hero;