// Feature grid — the long-tail of features.
const FeatureGrid = () => {
  const features = [
    { i: <Icons.Reply />, t: 'Smart Reply', d: 'Tone-matched drafts in your voice. Streams as it generates.' },
    { i: <Icons.List />, t: 'Action Items', d: 'Pull every "by Friday", every owner, every commitment from a thread.' },
    { i: <Icons.Wand />, t: 'Thread Summary', d: 'Catch up on a 27-message reply chain in three sentences.' },
    { i: <Icons.GitCompare />, t: 'See what changed', d: 'Every AI rewrite shows a colored diff — red for cut, green for added. Accept or reject in one click. Your signature, your facts, untouched.' },
    { i: <Icons.Translate />, t: '7 languages', d: 'en, nb, de, fr, es, ja, zh-Hans — UI, prompts, and replies.' },
    { i: <Icons.Sparkle />, t: 'Sender summary', d: 'Quick read on who they are, how often they write, what they usually write about.' },
    { i: <Icons.Bolt />, t: 'Freeform prompts', d: '"Reply yes but firmer." "Push 30 min later." Free-text every time.' },
    { i: <Icons.Cpu />, t: 'Message-id binding', d: 'The reply lands in the right thread even if you click around mid-stream.' },
  ];

  return (
    <section style={{ background:'var(--bg-2)' }}>
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow"><span className="dot" /> The toolkit</div>
          <h2 style={{ marginTop: 18 }}>Eight features.<br/><span className="serif" style={{ fontStyle:'italic' }}>Built for one keyboard shortcut.</span></h2>
          <p className="lede" style={{ marginTop: 22, maxWidth: 560 }}>
            Hit <span className="mono" style={{ background:'rgba(15,11,20,0.06)', padding:'3px 8px', borderRadius: 6, fontSize: 14 }}>⌘⇧A</span> on any message. Pick a tool. That's the whole interface.
          </p>
        </div>

        <div style={{ marginTop: 60, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 16 }}>
          {features.map(f => (
            <div key={f.t} className="card" style={{ padding: 24, transition:'transform .2s' }}
              onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-3px)'}
              onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>
              <div style={{ width: 38, height: 38, borderRadius: 9, background:'linear-gradient(135deg,#F4A6C8,#7B7BE8)', color:'white', display:'flex', alignItems:'center', justifyContent:'center', marginBottom: 16 }}>{f.i}</div>
              <div style={{ fontWeight: 600, fontSize: 15 }}>{f.t}</div>
              <div style={{ color:'var(--muted)', fontSize: 13.5, marginTop: 6, lineHeight: 1.55 }}>{f.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.FeatureGrid = FeatureGrid;