function StatBlock() {
  const stats = [
    { num: '95', sym: '%', label: 'Pilots failing to create measurable value', cite: 'MIT NANDA · 2025' },
    { num: '2', sym: '×', label: 'Returns when workflows are redesigned first', cite: 'McKinsey · 2025' },
    { num: '25', sym: '%', label: 'Cost savings ceiling with end-to-end AI', cite: 'McKinsey · 2025' },
  ];
  return (
    <section style={{ background: 'var(--s4-ink)', color: 'var(--s4-paper)', padding: '96px 40px' }}>
      <div style={{ maxWidth: 1160, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
          textTransform: 'uppercase', letterSpacing: '0.14em',
          color: 'rgba(250,250,247,0.5)', marginBottom: 24,
        }}>
          The numbers don't lie
        </div>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.02em',
          margin: 0, maxWidth: 760, color: 'var(--s4-paper)',
        }}>
          Most organizations carrying process debt find that AI doesn't solve problems.
          It amplifies them.
        </h2>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          marginTop: 72, borderTop: '1px solid rgba(250,250,247,0.2)',
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: '32px 24px 0 0',
              borderRight: i < 2 ? '1px solid rgba(250,250,247,0.2)' : 'none',
              paddingLeft: i > 0 ? 32 : 0,
            }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 500,
                fontSize: 96, lineHeight: 0.95, letterSpacing: '-0.03em',
              }}>
                {s.num}<span style={{ fontSize: 44, color: 'rgba(250,250,247,0.6)', marginLeft: 2 }}>{s.sym}</span>
              </div>
              <div style={{
                fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.45,
                marginTop: 16, maxWidth: 280,
              }}>
                {s.label}
              </div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: 'rgba(250,250,247,0.5)', marginTop: 16,
                textTransform: 'uppercase', letterSpacing: '0.1em',
              }}>
                {s.cite}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.StatBlock = StatBlock;