function Modes() {
  const modes = window.FOREMAN.modes;
  const [active, setActive] = React.useState('solo');
  const m = modes.find((x) => x.id === active);
  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">/07 &nbsp; Modes</div>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.035em', maxWidth: 900, textWrap: 'balance' }}>
              Three switches. They stack.
            </h2>
            <p style={{ marginTop: 20, fontSize: 18, color: 'var(--muted)', maxWidth: 720, lineHeight: 1.5 }}>
              <span className="mono" style={{ fontSize: 14, color: 'var(--ink-2)' }}>/solo</span> + <span className="mono" style={{ fontSize: 14, color: 'var(--ink-2)' }}>/stoic on</span> + <span className="mono" style={{ fontSize: 14, color: 'var(--ink-2)' }}>/language japanese</span> = a solopreneur receiving Stoic-framed strategy in Japanese.
            </p>
          </div>
        </header>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 24 }}>
          {modes.map((mm) => (
            <button key={mm.id} onClick={() => setActive(mm.id)} style={{
              padding: '20px 22px',
              background: active === mm.id ? 'var(--ink)' : 'var(--paper)',
              color: active === mm.id ? 'white' : 'var(--ink-2)',
              border: '1px solid ' + (active === mm.id ? 'var(--ink)' : 'var(--line)'),
              textAlign: 'left',
              transition: 'all .15s ease',
            }}>
              <div className="mono" style={{ fontSize: 12, opacity: 0.6, marginBottom: 8 }}>{mm.cmd}</div>
              <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>{mm.label}</div>
            </button>
          ))}
        </div>

        <div style={{
          border: '1px solid var(--line)',
          padding: '32px 32px',
          background: 'var(--paper-2)',
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Mode &middot; {m.label}</div>
              <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.3, marginBottom: 16, maxWidth: 480 }}>
                {m.pitch}
              </div>
              <div style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.55, maxWidth: 480 }}>
                {m.sample}
              </div>
            </div>
            <div className="mono" style={{
              background: 'var(--paper)',
              border: '1px solid var(--line)',
              padding: '20px 20px',
              fontSize: 13, lineHeight: 1.6,
              color: 'var(--ink-2)',
              alignSelf: 'start',
            }}>
              <div style={{ color: 'var(--muted)' }}>&gt; {m.cmd}</div>
              {m.id === 'solo' && (
                <>
                  <div style={{ marginTop: 8, color: 'var(--muted-2)' }}>// audience: you, future-you</div>
                  <div>// dropping: board prep, hiring plan</div>
                  <div>// adding: sustainability, energy mgmt</div>
                </>
              )}
              {m.id === 'stoic' && (
                <>
                  <div style={{ marginTop: 8, color: 'var(--muted-2)' }}>// adding: dichotomy of control</div>
                  <div>// adding: premeditatio malorum</div>
                  <div>// adding: virtue anti-patterns</div>
                </>
              )}
              {m.id === 'language' && (
                <>
                  <div style={{ marginTop: 8, color: 'var(--muted-2)' }}>// composing: en \u2192 reasoning</div>
                  <div>// translating: en \u2192 tr (idiomatic)</div>
                  <div>// preserving: framework names, citations</div>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Modes = Modes;