const themes = [
  { name: 'AI customer profitability for SMBs', desc: 'SMBs have tools but no structure. AI creates new opportunities to manage customer and product profitability cross functionally.', venture: null, goal: 'AI innovation must work for small business, which historically provide the majority of our jobs. They must be a growth engine.' },
  { name: 'AI Compliance & Governance', desc: 'Every company becomes an AI company. Every regulated sector needs audit trails for every AI decision.', venture: '→ AI Compliance', goal: 'AI will drive so much positivity and yet create the potential for negative outcomes. Regulation will be required and is coming to ensure AI adoption is for the betterment of all.' },
  { name: 'Physical-World Orchestration', desc: "Agents can generate text but can't move freight. Real-time sensor integration and logistics require structural moats FMs can't replicate.", venture: '→ TBD', goal: 'Successful companies will need tooling to coordinate a diverse workforce of AI agents, robots, and humans.' },
  { name: 'Home Lifecycle Management', desc: 'Personal agents will manage energy, maintenance, insurance, contractors. Whoever owns this coordination layer owns the household.', venture: '→ Home Manager Agent', goal: 'Housing shortage is a crisis. We are paying too much for ever aging homes. There is a better way to extend life and maximize home enjoyment.' },
];

function ThemeGrid() {
  return (
    <section id="themes" className="site-section" style={{ paddingTop: 64, paddingBottom: 64, fontFamily: 'var(--font-body)' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: 'var(--tracking-widest)', color: 'var(--text-secondary)', marginBottom: 16, maxWidth: 1120, margin: '0 auto 16px' }}>Where we invest</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(260px,1fr))', gap: 20, maxWidth: 1120, margin: '0 auto' }}>
        {themes.map((t) => (
          <div key={t.name} style={{ background: '#fff', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', padding: 24, boxShadow: 'var(--shadow-sm)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--ink-950)', marginBottom: 10 }}>{t.name}</div>
            <div style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)', marginBottom: 16 }}>{t.desc}</div>
            <div style={{ fontSize: 13, color: 'var(--text-primary)', lineHeight: 'var(--leading-normal)', borderTop: '1px solid var(--border-subtle)', paddingTop: 14, marginBottom: 14 }}>{t.goal}</div>
          </div>
        ))}
      </div>
    </section>
  );
}