function Diagnostic() {
  const D = window.FOREMAN.diagnostic;
  const [step, setStep] = React.useState(0);
  const [picks, setPicks] = React.useState([]);

  const choose = (id) => {
    const next = [...picks, id];
    setPicks(next);
    setStep((s) => s + 1);
  };

  const reset = () => { setStep(0); setPicks([]); };
  const done = step >= D.flow.length;
  const current = D.flow[step];

  return (
    <section style={{ paddingTop: 96, paddingBottom: 96, borderTop: '1px solid var(--line)', background: 'var(--paper-2)' }}>
      <div className="container">
        <header style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48, marginBottom: 48 }}>
          <div className="eyebrow">/04 &nbsp; Diagnose</div>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.035em', maxWidth: 900, textWrap: 'balance' }}>
              Six questions usually, three for you.
            </h2>
            <p style={{ marginTop: 20, fontSize: 18, color: 'var(--muted)', maxWidth: 720, lineHeight: 1.5 }}>
              {D.intro}
            </p>
          </div>
        </header>

        <div style={{
          background: 'var(--paper)', border: '1px solid var(--line)',
          display: 'grid', gridTemplateColumns: '320px 1fr',
        }}>
          <aside style={{ padding: 28, borderRight: '1px solid var(--line)', background: 'var(--paper-2)' }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Triage</div>
            {D.flow.map((q, i) => (
              <div key={i} style={{
                display: 'flex', gap: 12, padding: '12px 0',
                borderTop: i === 0 ? 'none' : '1px solid var(--line)',
                opacity: i > step ? 0.4 : 1,
              }}>
                <span className="mono" style={{ fontSize: 12, color: i === step ? 'var(--ink)' : 'var(--muted)', minWidth: 20 }}>
                  {i < step ? '\u2713' : i === step ? '\u25B8' : String(i + 1).padStart(2, '0')}
                </span>
                <span style={{ fontSize: 13, fontWeight: i === step ? 600 : 400, lineHeight: 1.4 }}>{q.q}</span>
              </div>
            ))}
            <div style={{
              display: 'flex', gap: 12, padding: '12px 0',
              borderTop: '1px solid var(--line)',
              opacity: done ? 1 : 0.4,
            }}>
              <span className="mono" style={{ fontSize: 12, color: done ? 'var(--ink)' : 'var(--muted)', minWidth: 20 }}>
                {done ? '\u2713' : '\u00B7\u00B7'}
              </span>
              <span style={{ fontSize: 13, fontWeight: done ? 600 : 400, lineHeight: 1.4 }}>Verdict &amp; route</span>
            </div>
          </aside>

          <div style={{ padding: '40px 36px', minHeight: 360 }}>
            {!done ? (
              <div>
                <div className="eyebrow" style={{ marginBottom: 14 }}>Question {step + 1} of {D.flow.length}</div>
                <h3 style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 28, maxWidth: 600 }}>
                  {current.q}
                </h3>
                <div style={{ display: 'grid', gap: 10, maxWidth: 560 }}>
                  {current.opts.map((o) => (
                    <button key={o.id} onClick={() => choose(o.id)} style={{
                      textAlign: 'left',
                      padding: '16px 18px',
                      background: 'var(--paper)',
                      border: '1px solid var(--line)',
                      fontSize: 15, fontWeight: 500,
                      color: 'var(--ink)',
                      transition: 'all .12s ease',
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    }}
                    onMouseOver={(e) => { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.color = 'white'; e.currentTarget.style.borderColor = 'var(--ink)'; }}
                    onMouseOut={(e) => { e.currentTarget.style.background = 'var(--paper)'; e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.borderColor = 'var(--line)'; }}
                    >
                      <span>{o.label}</span>
                      <span className="mono" style={{ fontSize: 12, opacity: 0.6 }}>&rarr;</span>
                    </button>
                  ))}
                </div>
              </div>
            ) : (
              <div>
                <div className="eyebrow" style={{ marginBottom: 14 }}>Verdict</div>
                <h3 style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 24, maxWidth: 700, lineHeight: 1.3 }}>
                  {D.verdict}
                </h3>
                <div style={{
                  display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
                  border: '1px solid var(--line)', marginBottom: 24,
                }}>
                  {[
                    { l: 'Routed to', v: 'Competitive Response' },
                    { l: 'Frameworks', v: 'Porter\u2019s \u2192 Art of War \u2192 Blue Ocean' },
                    { l: 'Output', v: 'Investor brief + team plan' },
                  ].map((c, i) => (
                    <div key={i} style={{
                      padding: '16px 18px',
                      borderRight: i < 2 ? '1px solid var(--line)' : 'none',
                    }}>
                      <div className="eyebrow" style={{ marginBottom: 6 }}>{c.l}</div>
                      <div style={{ fontSize: 14, fontWeight: 500 }}>{c.v}</div>
                    </div>
                  ))}
                </div>
                <button onClick={reset} style={{
                  background: 'var(--ink)', color: 'white',
                  padding: '12px 18px', fontSize: 13, fontWeight: 600,
                  border: 'none',
                }}>Run again</button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Diagnostic = Diagnostic;