// teaser-c.jsx — Direction III · "Empty Square" — redacted stealth dossier.
function CHeader({ tel }){
  return <header className="c-head">
    <div className="c-head-in wrap">
      <StaticLockup h={22} />
      <div style={{ display:'flex', alignItems:'center', gap:18, flexWrap:'wrap', justifyContent:'flex-end' }}>
        <Read k="DOC" v="RESTRICTED" kcolor={T.faint} vcolor={T.slateAcc} size={10} />
        <span style={{ width:1, height:12, background:'var(--line)' }}></span>
        <Read k="REF" v={'0xOCT · Δt'+tel.frame} kcolor={T.faint} vcolor={T.faint} size={10} />
      </div>
    </div>
  </header>;
}

function CBoardCell({ b, i }){
  const lit = b.state === 'lit';
  return <Reveal delay={i*90} className={'c-cell' + (lit ? ' lit' : '')}>
    <div className="c-cell-top">
      <span style={{ fontFamily:T.mono, fontSize:11, color: lit ? T.slateAcc : T.faint }}>
        {String(i+1).padStart(2,'0')}
      </span>
      {lit
        ? <span style={{ fontFamily:T.mono, fontSize:11, color:T.slateAcc }}>◆</span>
        : <span className="c-x">✕</span>}
    </div>
    <div className="c-cell-body">
      {lit && <div className="c-cell-cube"><OctantCube vb={CUBE_VB} w={Math.round(46*76/88)} h={46}
        line="oklch(1 0 0/0.95)" t={ACC_DK.t} r={ACC_DK.r} l={ACC_DK.l} /></div>}
      <div style={{ fontFamily:T.hel, fontWeight:500, fontSize:21, letterSpacing:'-0.01em',
        color: lit ? T.txt : T.dim }}>{b.k}</div>
      <div style={{ fontFamily:T.mono, fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase',
        color: lit ? T.slateAcc : T.faint, marginTop:6 }}>{b.sub}</div>
    </div>
    <div className="c-cell-note" style={{ color: lit ? T.dim : T.faint, borderColor:'var(--line-soft)' }}>
      {b.note}
    </div>
  </Reveal>;
}

function CEntry({ s, i, redact }){
  return <Reveal as="article" className="c-entry">
    <div className="c-entry-meta">
      <span style={{ fontFamily:T.mono, fontSize:12, color:T.slateLt }}>{s.title || ('§' + s.n)}</span>
    </div>
    <div className="c-entry-body">
      <h3 className="sec-head" style={{ fontSize:'clamp(19px, 2vw, 27px)', margin:'0 0 14px' }}>{s.head}</h3>
      <p className="body" style={{ fontSize:18, maxWidth:620, margin:0 }}>
        {s.body}{redact && <span style={{ color:T.faint }}> — filed from <span className="redact">37°46′N 122°25′W</span></span>}
      </p>
    </div>
  </Reveal>;
}

function DirectionC({ motion, glow, showTel, tel }){
  return <div className="stage stage-c">
    <div className="lyr linegrid"></div>
    <div className="lyr scanlines" style={{ opacity:0.45 }}></div>
    <div className="lyr vignette"></div>

    <CHeader tel={tel} />

    <main className="c-main wrap">
      {/* hero */}
      <section className="c-hero">
        <Reveal>
          <Kicker style={{ color:T.faint, letterSpacing:'0.3em' }}>FIELD BRIEF — RESTRICTED</Kicker>
        </Reveal>
        <Reveal delay={90}>
          <h1 className="hero-line" style={{ fontSize:'clamp(30px, 5vw, 58px)', maxWidth:900, margin:'22px 0 0' }}>
            {COPY.hero.line}
          </h1>
        </Reveal>
        <Reveal delay={180} style={{ marginTop:22, display:'flex', gap:16, alignItems:'center', flexWrap:'wrap' }}>
          <p className="mono" style={{ fontSize:13, color:T.dim, letterSpacing:'0.03em', margin:0, maxWidth:560, lineHeight:1.7 }}>
            {COPY.hero.sub}
          </p>
        </Reveal>
        <Reveal delay={240} style={{ marginTop:26 }}>
          <Read k="SUBJECT" v="OCTANT SYSTEMS" kcolor={T.faint} vcolor={T.slateAcc} size={11} />
          <span style={{ margin:'0 14px', color:'var(--line)' }}>·</span>
          <span style={{ fontFamily:T.mono, fontSize:11, color:T.faint }}>CLEARANCE <span className="redact">LEVEL-04</span></span>
        </Reveal>
      </section>

      {/* the board */}
      <section className="c-block">
        <Reveal className="c-block-h">
          <Kicker>THE BOARD</Kicker>
          <span className="body" style={{ fontSize:14, color:T.dim, maxWidth:460 }}>
            Two known approaches. One square left empty — until now.
          </span>
        </Reveal>
        <div className="c-board">
          {COPY.board.map((b, i) => <CBoardCell key={b.k} b={b} i={i} />)}
        </div>
      </section>

      {/* dossier entries */}
      <section className="c-block">
        <Reveal className="c-block-h"><Kicker>DECRYPTED — FOUR ENTRIES</Kicker></Reveal>
        <div className="c-entries">
          {COPY.sections.map((s, i) => <CEntry key={i} s={s} i={i} redact={i===0} />)}
        </div>
      </section>

      {/* properties strip */}
      <section className="c-block">
        <Reveal className="c-block-h"><Kicker>// WHAT NO ONE ELSE COMBINES</Kicker></Reveal>
        <div className="c-props">
          {COPY.props.map((p, i) => (
            <Reveal key={p.k} delay={i*70} className="c-prop">
              <span style={{ fontFamily:T.mono, fontSize:11, letterSpacing:'0.14em', color:T.slateAcc }}>
                {String(i+1).padStart(2,'0')}
              </span>
              <div style={{ fontFamily:T.hel, fontWeight:500, fontSize:16, color:T.txt, margin:'10px 0 6px' }}>{p.k}</div>
              <div className="body" style={{ fontSize:13, color:T.dim }}>{p.v}</div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* footer */}
      <section className="c-foot">
        <Reveal>
          <h2 className="hero-line" style={{ fontSize:'clamp(26px, 3.8vw, 46px)', maxWidth:760, margin:'0 0 40px' }}>
            {COPY.closing}
          </h2>
        </Reveal>
        <Reveal delay={120} className="c-foot-row">
          <StaticLockup h={30} tagline={true} />
          <div style={{ display:'flex', gap:16, flexWrap:'wrap' }}>
            {COPY.status.map((s, i) => <Kicker key={i} style={{ fontSize:10, color:T.faint }}>{s}</Kicker>)}
          </div>
        </Reveal>
      </section>
    </main>
  </div>;
}

Object.assign(window, { DirectionC });