function Integrations() {
  const tools = ['Gmail', 'Slack', 'Linear', 'Notion', 'Google Cal', 'GitHub', 'Figma', 'Drive', 'Asana', 'HubSpot', 'Zoom', 'Outlook'];
  return (
    <section style={{ background: 'var(--bg-elev)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '128px 32px', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-subtle)', marginBottom: 20 }}>Connects to</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 'clamp(36px, 4.5vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.02em', color: 'var(--fg)', margin: 0 }}>The tools you already use.</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-muted)', marginTop: 24, maxWidth: 380 }}>
            genz lives where your work lives. No new tab to keep open, no system to learn.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {tools.map(t => (
            <div key={t} style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 8, padding: '20px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 28, height: 28, borderRadius: 6, background: 'var(--bg-sunken)', flex: '0 0 auto' }}></div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg)', fontWeight: 500 }}>{t}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Integrations = Integrations;