function ProcessDiagram() {
  const [active, setActive] = React.useState(1);
  const steps = [
    { n: 1, title: 'Process Architecture', body: 'Map the major process areas and their cognitive processing levels.' },
    { n: 2, title: 'Identify Handoffs',    body: 'Catalog every point where work, information, or responsibility transfers.' },
    { n: 3, title: 'Define Requirements',  body: 'Agree on inputs, formats, timing, and quality — sender and receiver, explicit.' },
    { n: 4, title: 'Prioritize AI',        body: 'Sequence implementations by cognitive level, handoff health, and impact.' },
  ];
  return (
    <section style={{ padding: '120px 40px', maxWidth: 1160, margin: '0 auto' }}>
      <div style={{
        fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
        textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--fg-3)',
        marginBottom: 24,
      }}>
        The path forward
      </div>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontWeight: 600,
        fontSize: 56, lineHeight: 1.02, letterSpacing: '-0.02em',
        margin: 0, maxWidth: 820,
      }}>
        Paying down process debt, in four steps.
      </h2>

      <div style={{ marginTop: 72, position: 'relative' }}>
        {/* baseline */}
        <div style={{
          position: 'absolute', top: 26, left: 40, right: 40, height: 1.5,
          background: 'var(--s4-ink)',
        }} />
        {/* nodes */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', position: 'relative' }}>
          {steps.map(s => {
            const isActive = active === s.n;
            return (
              <button key={s.n} onClick={() => setActive(s.n)} style={{
                display: 'flex', flexDirection: 'column', alignItems: 'center',
                background: 'none', border: 0, cursor: 'pointer', padding: 0,
              }}>
                <div style={{
                  width: 54, height: 54,
                  background: isActive ? 'var(--s4-amber)' : 'var(--s4-paper)',
                  border: '1.5px solid var(--s4-ink)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22,
                  color: isActive ? 'var(--s4-paper)' : 'var(--s4-ink)',
                  transition: 'all 200ms var(--ease-out)',
                  transform: isActive ? 'rotate(45deg)' : 'none',
                }}>
                  <span style={{ transform: isActive ? 'rotate(-45deg)' : 'none' }}>{s.n}</span>
                </div>
                <div style={{
                  fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
                  marginTop: 24, color: isActive ? 'var(--fg-1)' : 'var(--fg-3)',
                  transition: 'color 200ms var(--ease-out)',
                }}>
                  Step {s.n}
                </div>
              </button>
            );
          })}
        </div>

        {/* active step body */}
        <div style={{
          marginTop: 48, padding: '40px', background: 'var(--s4-paper)',
          border: '1px solid var(--s4-rule)',
          display: 'grid', gridTemplateColumns: '200px 1fr', gap: 40, alignItems: 'baseline',
        }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 48,
            letterSpacing: '-0.02em', color: 'var(--s4-amber)',
          }}>
            0{active}.
          </div>
          <div>
            <h3 style={{
              fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28,
              margin: 0, letterSpacing: '-0.01em',
            }}>
              {steps[active - 1].title}
            </h3>
            <p style={{
              fontFamily: 'var(--font-serif)', fontSize: 19, lineHeight: 1.55,
              color: 'var(--fg-2)', marginTop: 14, maxWidth: 640,
            }}>
              {steps[active - 1].body}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ProcessDiagram = ProcessDiagram;