function HowItWorks() {
  const flow = window.FOREMAN.flow;
  return (
    <section id="how" 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: 56 }}>
          <div className="eyebrow">/02 &nbsp; How it works</div>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.035em', maxWidth: 900, textWrap: 'balance' }}>
              Six layers. One conversation.
            </h2>
            <p style={{ marginTop: 20, fontSize: 18, color: 'var(--muted)', maxWidth: 720, lineHeight: 1.5 }}>
              You type a sentence. Foreman matches intent, reads your memory, runs a diagnostic, picks a playbook, ships an output, and remembers what you committed to.
            </p>
          </div>
        </header>

        {/* ASCII flow */}
        <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 strategic-advisor</span>
          </div>
          <div style={{ padding: '36px 32px', overflowX: 'auto' }}>
            <pre className="mono" style={{
              margin: 0,
              fontSize: 13, lineHeight: 1.5,
              color: 'var(--ink-2)', whiteSpace: 'pre',
            }}>
{`> "My competitors are crushing us on price"
            \u2502`}
            </pre>
            <div style={{ marginTop: 14, display: 'grid', gap: 8 }}>
              {flow.map((f, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '32px 220px 1fr',
                  alignItems: 'center', gap: 16,
                  padding: '14px 0',
                  borderTop: '1px solid var(--line-2)',
                }}>
                  <span className="mono" style={{ fontSize: 12, color: 'var(--muted-2)' }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 16, letterSpacing: '-0.01em' }}>{f.step}</div>
                    <div className="mono" style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{f.desc}</div>
                  </div>
                  <div className="mono" style={{
                    fontSize: 13, color: 'var(--ink-2)',
                    background: 'var(--paper-3)',
                    padding: '8px 12px',
                    border: '1px solid var(--line)',
                    justifySelf: 'start',
                  }}>
                    {f.detail}
                  </div>
                </div>
              ))}
            </div>
            <pre className="mono" style={{
              margin: '20px 0 0 0',
              fontSize: 13, lineHeight: 1.5, color: 'var(--muted)', whiteSpace: 'pre',
            }}>
{`            \u2502
            \u25BC
   strategic decision, traceable.`}
            </pre>
          </div>
        </div>

        <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {[
            { eyebrow: 'When', title: 'I describe a vague worry,', body: 'pattern-match it to a known shape so I stop spinning.' },
            { eyebrow: 'I want to', title: 'use a real framework on it,', body: 'one that\u2019s been pressure-tested by people who&rsquo;ve done this before.' },
            { eyebrow: 'So I can', title: 'walk into Monday', body: 'with one decision and a check-in scheduled.' },
          ].map((c, i) => (
            <div key={i} style={{
              padding: '24px 24px 28px',
              background: 'var(--paper)',
              border: '1px solid var(--line)',
            }}>
              <div className="eyebrow">{c.eyebrow}</div>
              <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 14, lineHeight: 1.25 }}>{c.title}</div>
              <div style={{ fontSize: 15, color: 'var(--muted)', marginTop: 10, lineHeight: 1.5 }} dangerouslySetInnerHTML={{ __html: c.body }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;