// teaser-a.jsx — Direction I · "Transmission" — research-lab console.
const { useEffect: useEffA } = React;

function ATopBar({ tel, showTel }){
  return <div style={{ position:'fixed', top:0, left:0, right:0, zIndex:30,
    padding:'30px 64px 0', display:'flex', alignItems:'flex-start', justifyContent:'space-between',
    pointerEvents:'none' }}>
    <div style={{ display:'flex', alignItems:'center', gap:16 }}>
      <StaticLockup h={22} />
    </div>
    <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:6, textAlign:'right' }}>
      <span style={{ fontFamily:T.mono, fontSize:11, letterSpacing:'0.22em', color:T.slateAcc,
        display:'inline-flex', alignItems:'center', gap:8 }}>
        <span className="blink" style={{ width:6, height:6, borderRadius:'50%', background:T.slateAcc,
          boxShadow:'0 0 8px '+T.slateAcc }}></span>
        STEALTH
      </span>
      {showTel && <Read k="BUILD" v={'0xOCT · Δt'+tel.frame} size={10} kcolor={T.faint} vcolor={T.faint} />}
    </div>
  </div>;
}

function ABottomBar({ tel }){
  const sep = <span style={{ color:'oklch(1 0 0/0.16)' }}>/</span>;
  return <div style={{ position:'fixed', bottom:0, left:0, right:0, zIndex:30,
    borderTop:'1px solid var(--line-soft)', background:'linear-gradient(transparent, oklch(0.118 0.012 262/0.9) 40%)',
    backdropFilter:'blur(2px)' }}>
    <div style={{ maxWidth:'var(--maxw)', margin:'0 auto', padding:'13px 64px',
      display:'flex', alignItems:'center', gap:18, flexWrap:'wrap', justifyContent:'space-between' }}>
      <div style={{ display:'flex', alignItems:'center', gap:18, flexWrap:'wrap' }}>
        <Read k="LAT" v={tel.lat} /><Read k="LON" v={tel.lon} /><Read k="ALT" v={tel.alt+'M'} />
      </div>
      <div style={{ display:'flex', alignItems:'center', gap:18, flexWrap:'wrap' }}>
        <Read k="VOX" v={tel.vox+'×10⁹'} kcolor={T.slate} />
        {sep}<Read k="MOD" v={'0'+tel.mod} />
        {sep}<Read k="RECON" v={tel.recon+'s · 1×GPU'} />
      </div>
    </div>
  </div>;
}

function ASection({ s, i }){
  return <Reveal as="section" className="a-sec" style={{ borderTop:'1px solid var(--line-soft)' }}>
    <div className="wrap a-sec-grid">
      <div className="a-rail">
        <span style={{ fontFamily:T.mono, fontSize:13, color:T.slateLt, letterSpacing:'0.05em' }}>{s.title || ('§' + s.n)}</span>
      </div>
      <div className="a-content">
        <h2 className="sec-head" style={{ fontSize:'clamp(22px, 2.6vw, 34px)', margin:'0 0 20px' }}>{s.head}</h2>
        <p className="body" style={{ fontSize:18, maxWidth:600, margin:0 }}>{s.body}</p>
      </div>
    </div>
  </Reveal>;
}

function APropCell({ p, i }){
  return <Reveal delay={i*70} style={{ borderTop:'1px solid var(--line)', paddingTop:18 }}>
    <div style={{ fontFamily:T.mono, fontSize:12, letterSpacing:'0.16em', color:T.slateAcc, marginBottom:10 }}>
      {String(i+1).padStart(2,'0')} · {p.k}
    </div>
    <div className="body" style={{ fontSize:14, color:T.dim }}>{p.v}</div>
  </Reveal>;
}

function DirectionA({ motion, glow, showTel, tel }){
  const intro = useIntro(motion, 3200);
  return <div className="stage stage-a">
    {/* background */}
    <div className="lyr dotgrid" style={{ opacity:0.9 }}></div>
    <div className="lyr scanlines"></div>
    <div className="lyr vignette"></div>

    <ATopBar tel={tel} showTel={showTel} />

    {/* hero */}
    <section style={{ minHeight:'100svh', display:'flex', flexDirection:'column',
      alignItems:'center', justifyContent:'center', textAlign:'center', padding:'120px 24px 90px',
      position:'relative' }}>
      <Reveal style={{ marginBottom:34 }}>
        <Kicker style={{ letterSpacing:'0.34em', color:T.faint }}>TRANSMISSION · {COPY.hero.kicker}</Kicker>
      </Reveal>
      <div className="hero-logo" style={{ marginBottom:46 }}>
        <AnimatedLockup dark size={188} run={intro} tagline={false} />
      </div>
      <Reveal delay={motion?300:0}>
        <h1 className="hero-line" style={{ fontSize:'clamp(30px, 5.2vw, 62px)', maxWidth:920, margin:'0 auto' }}>
          {COPY.hero.line}
        </h1>
        <p className="mono" style={{ marginTop:24, fontSize:13, letterSpacing:'0.04em',
          color:T.dim, maxWidth:560, marginLeft:'auto', marginRight:'auto', lineHeight:1.7 }}>
          {COPY.hero.sub}
        </p>
      </Reveal>
      <div style={{ position:'absolute', bottom:54, left:0, right:0, display:'flex', justifyContent:'center' }}>
        <Reveal delay={motion?700:0}><ScrollCue label="DECODE" /></Reveal>
      </div>
    </section>

    {/* sections */}
    <div style={{ paddingBottom:40 }}>
      {COPY.sections.map((s, i) => <ASection key={i} s={s} i={i} />)}
    </div>

    {/* properties */}
    <section className="wrap" style={{ padding:'78px 64px 96px', borderTop:'1px solid var(--line-soft)' }}>
      <Reveal style={{ marginBottom:40 }}>
        <Kicker>// WHAT NO ONE ELSE COMBINES</Kicker>
      </Reveal>
      <div className="a-props">
        {COPY.props.map((p, i) => <APropCell key={p.k} p={p} i={i} />)}
      </div>
    </section>

    {/* closing */}
    <section style={{ minHeight:'82vh', display:'flex', flexDirection:'column', alignItems:'center',
      justifyContent:'center', textAlign:'center', padding:'80px 24px 130px',
      borderTop:'1px solid var(--line)' }}>
      <Reveal>
        <h2 className="hero-line" style={{ fontSize:'clamp(28px, 4.4vw, 54px)', maxWidth:840, margin:'0 auto 46px' }}>
          {COPY.closing}
        </h2>
      </Reveal>
      <Reveal delay={120}>
        <StaticLockup h={34} tagline={true} />
      </Reveal>
      <Reveal delay={220} style={{ marginTop:40, display:'flex', gap:18, flexWrap:'wrap', justifyContent:'center' }}>
        {COPY.status.map((s, i) => <Kicker key={i} style={{ fontSize:10, color:T.faint }}>{s}</Kicker>)}
      </Reveal>
    </section>

    {showTel && <ABottomBar tel={tel} />}
  </div>;
}

Object.assign(window, { DirectionA });