/* HTD Intro Sequence — 4 swipeable value frames (spec screen 2) */
(function () {
  const { useState, useRef } = React;
  const Icon = window.HTDIcon;
  const { useNav } = window.HTDUI;
  const { StatusBar } = window.HTDShell;
  const { HTDMark } = window.HTDAuth;
  const F = window.HTD_FIX;

  function Intro() {
    const nav = useNav();
    const [i, setI] = useState(0);
    const frames = F.intro;
    const last = i === frames.length - 1;
    const touch = useRef(null);
    const next = () => last ? nav.setPhase('welcome') : setI(i + 1);
    const prev = () => i > 0 && setI(i - 1);
    const f = frames[i];

    return (
      <div className="grid-bg" style={{ position:'absolute', inset:0, background:'var(--void)', display:'flex', flexDirection:'column' }}
        onTouchStart={e=>{ touch.current = e.touches[0].clientX; }}
        onTouchEnd={e=>{ const dx = e.changedTouches[0].clientX - touch.current;
          if (dx < -40) next(); else if (dx > 40) prev(); }}>
        <StatusBar />
        <div className="row between" style={{ padding:'4px 18px' }}>
          <HTDMark size={34} />
          <button onClick={()=>nav.setPhase('welcome')} className="label-mono" style={{ background:'none', border:'none', cursor:'pointer', color:'var(--steel)', padding:8 }}>SKIP</button>
        </div>
        <div className="screen-body screen-enter" key={i} style={{ display:'flex', flexDirection:'column', justifyContent:'center', padding:'0 34px 40px', cursor:'pointer' }} onClick={next}>
          <div className="label-mono acid" style={{ letterSpacing:3 }}>{String(i+1).padStart(2,'0')} / 0{frames.length}</div>
          <div style={{ width:64, height:64, borderRadius:14, margin:'26px 0', border:'1px solid var(--border-active)',
            display:'grid', placeItems:'center', boxShadow:'0 0 26px -8px var(--acid-glow)' }}>
            <Icon name={f.icon} size={30} color="var(--acid)" />
          </div>
          <div className="display-xl" style={{ fontSize:40 }}>{f.title}</div>
          <div className="muted" style={{ fontSize:15, lineHeight:1.55, marginTop:14, maxWidth:280 }}>{f.line}</div>
        </div>
        <div style={{ padding:'0 26px 36px' }}>
          <div className="row" style={{ gap:6, justifyContent:'center', marginBottom:18 }}>
            {frames.map((_,j)=>(
              <button key={j} onClick={()=>setI(j)} style={{ width: j===i?22:7, height:4, borderRadius:2, border:'none', cursor:'pointer', padding:0,
                background: j===i?'var(--acid)':'var(--hairline-2)', transition:'width .2s, background .2s' }} aria-label={'Frame '+(j+1)} />
            ))}
          </div>
          <button className="btn-primary" onClick={next}>{last ? 'START BASELINE' : 'CONTINUE'}</button>
        </div>
      </div>
    );
  }

  window.HTDIntro = { Intro };
})();