function BoardSim() {
  const personas = window.FOREMAN.boardPersonas;
  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">/09 &nbsp; Board sim</div>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.035em', maxWidth: 900, textWrap: 'balance' }}>
              Take the hits before the meeting, not in it.
            </h2>
            <p style={{ marginTop: 20, fontSize: 18, color: 'var(--muted)', maxWidth: 720, lineHeight: 1.5 }}>
              Ten adversarial personas. Five-dimension scoring. The questions that knock you over in a real boardroom &mdash; rehearsed at your desk on Sunday night.
            </p>
          </div>
        </header>

        <div style={{
          background: 'var(--paper)', border: '1px solid var(--line)',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        }}>
          {personas.map((p, i) => {
            const col = i % 3;
            const row = Math.floor(i / 3);
            const lastRow = row === Math.floor((personas.length - 1) / 3);
            return (
              <div key={p.id} style={{
                padding: '24px 24px 28px',
                borderRight: col < 2 ? '1px solid var(--line)' : 'none',
                borderBottom: !lastRow ? '1px solid var(--line)' : 'none',
                display: 'flex', flexDirection: 'column', gap: 14, minHeight: 180,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--muted-2)' }}>{String(i + 1).padStart(2, '0')}</span>
                  <span style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.015em' }}>{p.label}</span>
                </div>
                <div style={{ fontSize: 18, lineHeight: 1.4, color: 'var(--ink-2)', fontStyle: 'italic', textWrap: 'pretty' }}>
                  {p.barb}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{
          marginTop: 28, padding: '24px 28px',
          border: '1px solid var(--line)',
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0,
        }}>
          {[
            { l: 'Clarity', v: '4 / 5' },
            { l: 'Evidence', v: '3 / 5' },
            { l: 'Strategic coherence', v: '4 / 5' },
            { l: 'Risk awareness', v: '2 / 5' },
            { l: 'Response quality', v: '3 / 5' },
          ].map((s, i) => (
            <div key={i} style={{ paddingLeft: i === 0 ? 0 : 24, borderLeft: i === 0 ? 'none' : '1px solid var(--line)' }}>
              <div className="eyebrow" style={{ marginBottom: 10 }}>{s.l}</div>
              <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em' }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.BoardSim = BoardSim;