function WhatsInside() {
  const items = [
    { n: 158, l: 'Skills', d: 'Frameworks from Porter to Stoic philosophy, across 12 categories.' },
    { n: 48, l: 'Output templates', d: 'Documents for investors, boards, teams, clients, yourself.' },
    { n: 24, l: 'Diagnostics', d: 'Triage systems that find root causes through structured questioning.' },
    { n: 21, l: 'Playbooks', d: 'Multi-step recipes for pivots, fundraising, scaling, crises.' },
    { n: 17, l: 'Hooks', d: 'Natural language triggers that route problems to the right solution.' },
    { n: 6, l: 'Agents', d: 'The orchestration layer that connects every component.' },
    { n: 9, l: 'Industry packs', d: 'Sector benchmarks for SaaS, Marketplace, Fintech, and 6 more.' },
    { n: 18, l: 'Research guides', d: 'Data collection from market sizing to churn analysis.' },
    { n: 10, l: 'Board personas', d: 'Adversarial role-play for pitch and board practice.' },
  ];
  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: 56 }}>
          <div className="eyebrow">/05 &nbsp; What&rsquo;s inside</div>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.035em', maxWidth: 900, textWrap: 'balance' }}>
              The library a great mentor would have read for you.
            </h2>
            <p style={{ marginTop: 20, fontSize: 18, color: 'var(--muted)', maxWidth: 720, lineHeight: 1.5 }}>
              Every number below is one piece you don&rsquo;t have to author yourself.
            </p>
          </div>
        </header>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          border: '1px solid var(--line)',
        }}>
          {items.map((it, i) => {
            const col = i % 3;
            const row = Math.floor(i / 3);
            const lastRow = row === Math.floor((items.length - 1) / 3);
            return (
              <div key={i} style={{
                padding: '32px 28px 36px',
                borderRight: col < 2 ? '1px solid var(--line)' : 'none',
                borderBottom: !lastRow ? '1px solid var(--line)' : 'none',
              }}>
                <div style={{
                  fontSize: 64, fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1,
                  marginBottom: 20,
                }}>{it.n}</div>
                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 8 }}>{it.l}</div>
                <div style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.5 }}>{it.d}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.WhatsInside = WhatsInside;