function Terminal() {
  const script = window.FOREMAN.terminalScript;
  const [played, setPlayed] = React.useState(0);
  const [running, setRunning] = React.useState(true);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!running) return;
    if (played >= script.length) return;
    const t = setTimeout(() => setPlayed((p) => p + 1), played === 0 ? 400 : 520);
    return () => clearTimeout(t);
  }, [played, running]);

  React.useEffect(() => {
    // observe and start when in view
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setRunning(true); });
    }, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    if (!ref.current) return;
    ref.current.scrollTop = ref.current.scrollHeight;
  }, [played]);

  const replay = () => { setPlayed(0); setRunning(true); };

  const renderLine = (l, i) => {
    const baseStyle = {
      display: 'grid', gridTemplateColumns: '60px 1fr', gap: 14,
      padding: '4px 0', fontSize: 13, lineHeight: 1.55,
    };
    if (l.who === 'you') {
      return (
        <div key={i} style={baseStyle}>
          <span className="mono" style={{ color: 'var(--muted-2)' }}>you &gt;</span>
          <span style={{ color: 'var(--ink)', fontWeight: 500 }}>{l.text}</span>
        </div>
      );
    }
    if (l.who === 'sys') {
      return (
        <div key={i} style={baseStyle}>
          <span className="mono" style={{ color: 'var(--muted-2)' }}>sys</span>
          <span className="mono" style={{ color: 'var(--muted)' }}>{l.text}</span>
        </div>
      );
    }
    return (
      <div key={i} style={baseStyle}>
        <span className="mono" style={{ color: 'var(--ink)', fontWeight: 600 }}>foreman</span>
        <span style={{ color: 'var(--ink-2)' }}>{l.text}</span>
      </div>
    );
  };

  return (
    <section style={{ paddingTop: 96, paddingBottom: 96, borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <header style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48, marginBottom: 48 }}>
          <div className="eyebrow">/03 &nbsp; In motion</div>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.035em', maxWidth: 900, textWrap: 'balance' }}>
              From "we&rsquo;re losing on price" to a defensible plan, in one breath.
            </h2>
            <p style={{ marginTop: 20, fontSize: 18, color: 'var(--muted)', maxWidth: 720, lineHeight: 1.5 }}>
              A real Foreman session. The system layer is normally hidden &mdash; we&rsquo;ve surfaced it so you can watch the diagnosis form.
            </p>
          </div>
        </header>

        <div style={{
          background: 'var(--paper)',
          border: '1px solid var(--line)',
        }}>
          <div style={{
            padding: '14px 20px', borderBottom: '1px solid var(--line)',
            display: 'flex', alignItems: 'center', gap: 10,
            background: 'var(--paper-2)',
          }}>
            <span style={{ width: 10, height: 10, borderRadius: 5, background: '#e8e8e8' }} />
            <span style={{ width: 10, height: 10, borderRadius: 5, background: '#e8e8e8' }} />
            <span style={{ width: 10, height: 10, borderRadius: 5, background: '#e8e8e8' }} />
            <span className="mono" style={{ marginLeft: 12, fontSize: 12, color: 'var(--muted)' }}>foreman \u2014 session 0a3f</span>
            <button onClick={replay} className="mono" style={{
              marginLeft: 'auto',
              background: 'transparent', border: '1px solid var(--line)',
              padding: '4px 10px', fontSize: 11, color: 'var(--ink-2)',
            }}>replay</button>
          </div>
          <div ref={ref} style={{
            padding: '24px 28px',
            maxHeight: 460,
            overflowY: 'auto',
            scrollBehavior: 'smooth',
          }}>
            {script.slice(0, played).map(renderLine)}
            {played < script.length && (
              <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 14, padding: '4px 0' }}>
                <span className="mono" style={{ color: 'var(--muted-2)', fontSize: 13 }}>...</span>
                <span style={{
                  display: 'inline-block', width: 7, height: 14,
                  background: 'var(--ink)',
                  animation: 'blink 1s steps(2) infinite',
                }} />
              </div>
            )}
            {played >= script.length && (
              <div style={{
                marginTop: 16, paddingTop: 14, borderTop: '1px dashed var(--line)',
                display: 'grid', gridTemplateColumns: '60px 1fr', gap: 14,
              }}>
                <span className="mono" style={{ color: 'var(--muted-2)', fontSize: 13 }}>&#x2713;</span>
                <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>session saved &middot; 4 commitments tracked &middot; next check-in: Tue</span>
              </div>
            )}
          </div>
        </div>
        <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
      </div>
    </section>
  );
}
window.Terminal = Terminal;