function Framework() {
  const levels = [
    { n: 'L1', name: 'Perceptual', ex: 'Quality inspection · alert monitoring · document classification', tag: 'Automate', tone: 'hi' },
    { n: 'L2', name: 'Analytical', ex: 'Reconciliation · inventory optimization · compliance checking', tag: 'Automate', tone: 'hi' },
    { n: 'L3', name: 'Evaluative', ex: 'Credit decisions · hiring recommendations · risk assessment',      tag: 'Assist',   tone: 'mid' },
    { n: 'L4', name: 'Creative',   ex: 'Product design · marketing campaigns · problem-solving',            tag: 'Human',    tone: 'lo' },
    { n: 'L5', name: 'Integrative',ex: 'Executive decisions · organizational design · negotiation',        tag: 'Human',    tone: 'lo' },
  ];
  const tagStyle = (t) => {
    if (t === 'hi')  return { color: 'var(--s4-green)',     borderColor: 'var(--s4-green)', background: 'var(--s4-green-wash)' };
    if (t === 'mid') return { color: 'var(--s4-amber-ink)', borderColor: 'var(--s4-amber)', background: 'var(--s4-amber-wash)' };
    return { color: 'var(--fg-2)', borderColor: 'var(--s4-rule)', background: 'transparent' };
  };
  return (
    <section style={{
      background: 'var(--s4-paper-2)', padding: '120px 40px',
      borderTop: '1px solid var(--s4-rule)', borderBottom: '1px solid var(--s4-rule)',
    }}>
      <div style={{ maxWidth: 1160, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
              textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--fg-3)',
              marginBottom: 24,
            }}>
              Where to start
            </div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: 48, lineHeight: 1.02, letterSpacing: '-0.02em',
              margin: 0,
            }}>
              The Cognitive<br/>Processing<br/>Framework.
            </h2>
            <p style={{
              fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.55,
              color: 'var(--fg-2)', marginTop: 24, maxWidth: 420,
            }}>
              AI implementation success correlates inversely with cognitive level.
              The wins are in Levels 1 and 2 — high-volume, unglamorous work where
              AI can operate with minimal human oversight.
            </p>
          </div>
          <div>
            {levels.map((l, i) => (
              <div key={l.n} style={{
                display: 'grid',
                gridTemplateColumns: '50px 140px 1fr 90px',
                alignItems: 'center', gap: 20,
                padding: '20px 0',
                borderBottom: i < levels.length - 1 ? '1px solid var(--s4-rule)' : 'none',
              }}>
                <span style={{
                  fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28,
                }}>{l.n}</span>
                <span style={{
                  fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 600,
                }}>{l.name}</span>
                <span style={{
                  fontFamily: 'var(--font-serif)', fontSize: 15,
                  color: 'var(--fg-2)', lineHeight: 1.4,
                }}>{l.ex}</span>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  textTransform: 'uppercase', letterSpacing: '0.1em',
                  padding: '4px 8px', border: '1px solid', textAlign: 'center',
                  ...tagStyle(l.tone),
                }}>{l.tag}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Framework = Framework;