// Homepage components for Extrian — broken into pieces to keep files small.
// Hero (Stack), nav, stats strip, annotation showcase, domains grid,
// capability scope, process steps, CTA, footer.

const Nav = () => {
  const [open, setOpen] = React.useState(false);
  const links = ['Annotation', 'Domains', 'Capability', 'Process'];
  const onLink = (e, l) => {
    e.preventDefault();
    setOpen(false);
    // small delay so the menu can collapse before we scroll
    setTimeout(() => window.__exScrollAndPlay(l.toLowerCase()), 120);
  };
  return (
  <header data-ex-nav style={{
    position: 'sticky', top: 0, zIndex: 50,
    background: 'rgba(240,238,233,0.85)',
    backdropFilter: 'blur(12px)',
    borderBottom: '1px solid var(--ex-rule)',
  }}>
    <div style={{
      maxWidth: 1320, margin: '0 auto',
      padding: '14px 40px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <a href="#" style={{
        fontFamily: 'var(--ex-mono)',
        fontSize: 13, fontWeight: 500,
        color: 'var(--ex-ink)', textDecoration: 'none',
        letterSpacing: '0.02em',
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <span style={{
          display: 'inline-block', width: 14, height: 14,
          borderRadius: 3,
          background: 'var(--ex-ink)',
          position: 'relative',
        }}>
          <span style={{
            position: 'absolute', inset: 3,
            background: 'var(--ex-signal)',
            borderRadius: 1,
          }}/>
        </span>
        EXTRIAN
      </a>
      <nav className="ex-nav-links" style={{ display: 'flex', gap: 28, fontFamily: 'var(--ex-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
        {links.map(l => (
          <a key={l} href={`#${l.toLowerCase()}`} onClick={(e) => onLink(e, l)} style={{ color: 'var(--ex-ink-2)', textDecoration: 'none' }}>{l}</a>
        ))}
      </nav>
      <a className="ex-nav-cta" href="mailto:hello@extrian.com" style={{
        fontFamily: 'var(--ex-mono)',
        fontSize: 11, letterSpacing: '0.06em',
        textTransform: 'uppercase',
        padding: '8px 14px',
        background: 'var(--ex-ink)',
        color: 'var(--ex-cream)',
        textDecoration: 'none',
        borderRadius: 4,
      }}>Request sample →</a>
      {/* hamburger — hidden on desktop via CSS */}
      <button
        className="ex-nav-hamburger"
        aria-label={open ? 'Close menu' : 'Open menu'}
        onClick={() => setOpen(v => !v)}
        style={{
          display: 'none',
          width: 40, height: 40,
          alignItems: 'center', justifyContent: 'center',
          background: 'transparent', border: 'none', padding: 0, cursor: 'pointer',
        }}>
        <span style={{
          position: 'relative', width: 22, height: 14, display: 'block',
        }}>
          <span style={{
            position: 'absolute', left: 0, right: 0, height: 1.5,
            background: 'var(--ex-ink)',
            top: open ? 6 : 0,
            transform: open ? 'rotate(45deg)' : 'rotate(0)',
            transformOrigin: 'center',
            transition: 'transform 0.2s, top 0.2s, opacity 0.2s',
          }}/>
          <span style={{
            position: 'absolute', left: 0, right: 0, height: 1.5,
            background: 'var(--ex-ink)',
            top: 6,
            opacity: open ? 0 : 1,
            transition: 'opacity 0.2s',
          }}/>
          <span style={{
            position: 'absolute', left: 0, right: 0, height: 1.5,
            background: 'var(--ex-ink)',
            top: open ? 6 : 12,
            transform: open ? 'rotate(-45deg)' : 'rotate(0)',
            transformOrigin: 'center',
            transition: 'transform 0.2s, top 0.2s',
          }}/>
        </span>
      </button>
    </div>
    {/* mobile menu overlay */}
    {open && (
      <div className="ex-mobile-menu">
        {links.map(l => (
          <a key={l} href={`#${l.toLowerCase()}`} onClick={(e) => onLink(e, l)}>
            <em>·</em> {l}
          </a>
        ))}
        <a className="ex-mm-cta" href="mailto:hello@extrian.com" onClick={() => setOpen(false)}>
          Request sample →
        </a>
      </div>
    )}
  </header>
  );
};

const Hero = () => {
  return (
    <PinnedScrub scrubLength={1.5}>
      {(t) => {
        const pressed = t > 0.02;
        return (
          <section style={{ position: 'relative', borderBottom: '1px solid var(--ex-rule)', flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
            <div className="ex-hero-grid" style={{
              maxWidth: 1320, margin: '0 auto', width: '100%',
              padding: '20px 40px 12px',
              display: 'grid', gridTemplateColumns: '0.45fr 1.55fr', gap: 28,
              alignItems: 'center', flex: 1, minHeight: 0,
            }}>
              {/* LEFT — copy */}
              <div>
                <div className="hero-meta" style={{ position: 'static', marginBottom: 18 }}>
                  <span style={{
                    display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
                    background: 'var(--ex-signal)', marginRight: 8,
                    boxShadow: '0 0 10px var(--ex-signal-glow)',
                    verticalAlign: 'middle',
                  }}/>
                  APPLIED AUDIO LAB
                </div>
                <h1 className="ex-hero-headline" style={{
                  fontFamily: 'var(--ex-serif)',
                  fontWeight: 300,
                  fontSize: 'clamp(40px, 4.4vw, 70px)',
                  lineHeight: 1.0,
                  letterSpacing: '-0.025em',
                  margin: '0 0 20px',
                }}>
                  Building<br/>
                  <em style={{ fontStyle: 'italic', color: 'var(--ex-signal)' }}>for voice AI.</em>
                </h1>
                <p className="ex-hero-sub" style={{
                  fontSize: 18, lineHeight: 1.4,
                  color: 'var(--ex-ink-2)', maxWidth: 460,
                  margin: '0 0 22px',
                  fontWeight: 400,
                }}>
                  More data. <em style={{ fontStyle: 'italic' }}>More human.</em>
                </p>

              </div>

              {/* RIGHT — Constellation X (cinematic word reveal) */}
              <div className="ex-hero-visual" style={{ height: '100%', minHeight: 0, position: 'relative' }}>
                <HeroConstellationX pressed={pressed} t={t}/>
              </div>
            </div>

            {/* live-readout footer strip — always visible, lights up as scroll begins */}
            <div style={{
              borderTop: '1px solid var(--ex-rule)',
              background: 'var(--ex-cream-2)',
            }}>
              <div className="ex-hero-readout" style={{
                maxWidth: 1320, margin: '0 auto',
                padding: '14px 40px',
                display: 'flex', justifyContent: 'space-between',
                fontFamily: 'var(--ex-mono)', fontSize: 11,
                letterSpacing: '0.06em', textTransform: 'uppercase',
                color: 'var(--ex-ink-2)',
              }}>
                <span>
                  <span style={{
                    display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
                    background: pressed ? 'var(--ex-signal)' : 'var(--ex-mute)',
                    boxShadow: pressed ? '0 0 8px var(--ex-signal-glow)' : 'none',
                    marginRight: 8, verticalAlign: 'middle',
                    transition: 'background 0.3s, box-shadow 0.3s',
                  }}/>
                  {pressed ? 'LIVE' : 'IDLE'} · sample_0481.wav
                </span>
                <span>48 kHz · 24-bit · stereo</span>
                <span>ES-MX · 3 speakers · 4:12</span>
                <span>SNR 38 dB</span>
                <span style={{ fontVariantNumeric: 'tabular-nums' }}>{(t * 4.12).toFixed(2).padStart(5, '0')}s</span>
              </div>
            </div>
          </section>
        );
      }}
    </PinnedScrub>
  );
};

const StatsStrip = () => (
  <section style={{
    background: 'var(--ex-ink)',
    color: 'var(--ex-cream)',
    padding: '64px 40px',
  }}>
    <div className="ex-stats-grid" style={{
      maxWidth: 1320, margin: '0 auto',
      display: 'grid', gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr', gap: 40,
      alignItems: 'center',
    }}>
      <div style={{
        fontFamily: 'var(--ex-mono)', fontSize: 11,
        letterSpacing: '0.08em', textTransform: 'uppercase',
        opacity: 0.6, maxWidth: 140, lineHeight: 1.5,
      }}>
        Powering<br/>frontier labs<br/>with
      </div>
      {[
        { n: '60+', label: 'LANGUAGES' },
        { n: '50+', label: 'ANNOTATIONS' },
        { n: '10k+', label: 'EXPERTS' },
        { n: '< 48h', label: 'SAMPLE TURNAROUND' },
      ].map(s => (
        <div key={s.label} style={{ borderLeft: '1px solid rgba(240,238,233,0.15)', paddingLeft: 24 }}>
          <div className="ex-stat-num" style={{
            fontFamily: 'var(--ex-serif)',
            fontWeight: 300,
            fontSize: 64, lineHeight: 1,
            letterSpacing: '-0.03em',
          }}>{s.n}</div>
          <div style={{
            fontFamily: 'var(--ex-mono)',
            fontSize: 10, letterSpacing: '0.1em',
            opacity: 0.55, marginTop: 8,
          }}>{s.label}</div>
        </div>
      ))}
    </div>
  </section>
);

window.Nav = Nav;
window.Hero = Hero;
window.StatsStrip = StatsStrip;