// teaser-b.jsx — Direction II · "World Engine" — otherworldly.
const { useState: useStB, useEffect: useEffB } = React;

function useVMin(){
  const [vm, setVm] = useStB(() => Math.min(window.innerWidth, window.innerHeight));
  useEffB(() => {
    const on = () => setVm(Math.min(window.innerWidth, window.innerHeight));
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, []);
  return vm;
}

// decorative rotating wireframe lattice (NOT the logo) — gives "rotation" on-brand
function BLattice({ size }){
  const r = size / 2;
  return <svg width={size} height={size} viewBox="0 0 100 100"
    style={{ position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)',
      overflow:'visible' }}>
    <g className="spin-slow" style={{ transformOrigin:'50px 50px' }}>
      <rect x="22" y="22" width="56" height="56" fill="none" stroke="oklch(0.7 0.08 250 / 0.16)" strokeWidth="0.4" />
      <rect x="32" y="32" width="36" height="36" fill="none" stroke="oklch(0.7 0.08 250 / 0.12)" strokeWidth="0.4" />
      <line x1="50" y1="4" x2="50" y2="96" stroke="oklch(0.7 0.08 250 / 0.08)" strokeWidth="0.3" />
      <line x1="4" y1="50" x2="96" y2="50" stroke="oklch(0.7 0.08 250 / 0.08)" strokeWidth="0.3" />
    </g>
    <g className="spin-rev" style={{ transformOrigin:'50px 50px' }}>
      <circle cx="50" cy="50" r="46" fill="none" stroke="oklch(0.7 0.08 250 / 0.10)" strokeWidth="0.3" strokeDasharray="1.2 5" />
    </g>
  </svg>;
}

function BPanel({ children, tall = true, style }){
  return <section className="b-panel" style={{ minHeight: tall ? '100svh' : '70vh',
    display:'flex', alignItems:'center', justifyContent:'center', position:'relative',
    padding:'90px 24px', ...style }}>{children}</section>;
}

function BCoords({ tel, which }){
  const sets = [
    [['LAT', tel.lat], ['LON', tel.lon]],
    [['VOX', tel.vox+'×10⁹'], ['MOD', '07']],
    [['RECON', tel.recon+'s'], ['GPU', '01']],
    [['ALT', tel.alt+'M'], ['Δt', tel.frame]],
  ];
  const pair = sets[which % sets.length];
  return <>
    <div style={{ position:'absolute', top:34, left:34 }}>
      <Read k={pair[0][0]} v={pair[0][1]} kcolor={T.faint} vcolor={T.faint} size={10} />
    </div>
    <div style={{ position:'absolute', bottom:34, right:34 }}>
      <Read k={pair[1][0]} v={pair[1][1]} kcolor={T.faint} vcolor={T.faint} size={10} />
    </div>
  </>;
}

// every section-header kicker gets the statements' legible blue + dark halo
const B_KICKER = { color:T.slateLt,
  textShadow:'0 1px 16px oklch(0.118 0.012 262 / 0.95), 0 0 3px oklch(0.118 0.012 262 / 0.85)' };

function BStatement({ s, i, tel }){
  return <BPanel>
    <BCoords tel={tel} which={i} />
    <div className="b-scrim">
      <Reveal blur>
        <Kicker style={{ ...B_KICKER, letterSpacing:'0.3em' }}>{s.title || ('§' + s.n)}</Kicker>
        <h2 className="hero-line" style={{ fontSize:'clamp(25px, 3.8vw, 46px)', maxWidth:820,
          margin:'20px auto 0' }}>{s.head}</h2>
        <p className="body" style={{ fontSize:19, maxWidth:600, margin:'22px auto 0' }}>{s.body}</p>
      </Reveal>
    </div>
  </BPanel>;
}

// open positions — pulled from careers.md / jobs/*.md (see careers-shared.jsx)
function BOpenings(){
  const { jobs } = useCareers();
  if (!jobs.length) return null;
  return <BPanel>
    <div className="b-scrim" style={{ maxWidth:680, width:'100%' }} data-screen-label="Openings">
      <Reveal style={{ marginBottom:26 }}>
        <Kicker style={B_KICKER}>WE ARE HIRING · {String(jobs.length).padStart(2,'0')} OPEN POSITIONS</Kicker>
      </Reveal>
      <div className="b-open-list">
        {jobs.map((j, i) => (
          <Reveal key={j.slug} delay={i * 90}>
            <a className="b-open" href={'careers.html#' + j.slug}>
              <span className="bo-t">{j.title}</span>
              <span className="bo-m">{j.meta.location}</span>
              <span className="bo-a">→</span>
            </a>
          </Reveal>
        ))}
      </div>
      <Reveal delay={220} style={{ marginTop:30 }}>
        <a className="b-openall" href="careers.html">ALL POSITIONS + PROVISIONS →</a>
      </Reveal>
    </div>
  </BPanel>;
}

function DirectionB({ motion, glow, showTel, tel, cubeStyle = 'solid' }){
  const vm = useVMin();
  const introB = useIntro(motion, 3400);
  const cube = Math.round(Math.max(220, Math.min(440, vm * 0.46)));
  const lat = Math.round(cube * 2.3);
  return <div className="stage stage-b">
    {/* fixed world behind everything */}
    <div className="lyr" style={{ background:'radial-gradient(130% 100% at 50% 32%, oklch(0.17 0.022 260) 0%, oklch(0.118 0.012 262) 46%, oklch(0.09 0.01 264) 100%)' }}></div>
    <ParticleField active={motion} density={86} />
    <div className="lyr scanlines" style={{ opacity:0.5 }}></div>
    <div className="b-stage-cube">
      <div className="b-cube-parallax">
        <BLattice size={lat} />
        <div className={'amark-wrap' + (introB ? ' run' : '')}
          style={{ position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)' }}>
          <BackdropOctant size={cube} variant={cubeStyle} />
        </div>
      </div>
    </div>
    <div className="lyr vignette"></div>

    {/* foreground scroll */}
    <div style={{ position:'relative', zIndex:2 }}>
      {/* hero panel — cube shows through */}
      <BPanel style={{ flexDirection:'column', justifyContent:'space-between', paddingTop:120, paddingBottom:64 }}>
        <Reveal style={{ textAlign:'center' }}>
          <Kicker style={{ ...B_KICKER, letterSpacing:'0.36em' }}>{COPY.hero.kicker}</Kicker>
        </Reveal>
        <div></div>
        <Reveal className="b-scrim" delay={motion?350:0} style={{ textAlign:'center' }}>
          <h1 className="hero-line" style={{ fontSize:'clamp(30px, 5.4vw, 64px)', maxWidth:900, margin:'0 auto' }}>
            {COPY.hero.line}
          </h1>
          <p className="mono" style={{ marginTop:22, fontSize:13, letterSpacing:'0.18em', color:T.slateAcc,
            textTransform:'uppercase' }}>{COPY.tagline}</p>
          <div style={{ marginTop:40, display:'flex', justifyContent:'center' }}>
            <ScrollCue label="DESCEND" />
          </div>
        </Reveal>
      </BPanel>

      {COPY.sections.map((s, i) => <BStatement key={i} s={s} i={i} tel={tel} />)}

      {/* properties — luminous list */}
      <BPanel>
        <div className="b-scrim" style={{ maxWidth:680 }}>
          <Reveal style={{ marginBottom:30 }}>
            <Kicker style={B_KICKER}>FOUR PROPERTIES · ONE WORLD</Kicker>
          </Reveal>
          <div className="b-props">
            {COPY.props.map((p, i) => (
              <Reveal key={p.k} delay={i*90} className="b-prop">
                <span style={{ fontFamily:T.hel, fontWeight:500, fontSize:'clamp(20px,2.6vw,30px)',
                  letterSpacing:'-0.01em', color:T.txt }}>{p.k}</span>
                <span style={{ fontFamily:T.mono, fontSize:12.5, color:T.dim, letterSpacing:'0.04em' }}>{p.v}</span>
              </Reveal>
            ))}
          </div>
        </div>
      </BPanel>

      <BOpenings />

      {/* closing */}
      <BPanel style={{ flexDirection:'column' }}>
        <div className="b-scrim">
          <Reveal blur>
            <h2 className="hero-line" style={{ fontSize:'clamp(28px, 4.8vw, 58px)', maxWidth:840, margin:'0 auto 44px' }}>
              {COPY.closing}
            </h2>
          </Reveal>
          <Reveal delay={140} style={{ display:'flex', justifyContent:'center' }}>
            <StaticLockup h={34} tagline={true} />
          </Reveal>
          <Reveal delay={240} style={{ marginTop:38, 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>
        </div>
      </BPanel>
    </div>
  </div>;
}

Object.assign(window, { DirectionB });