// Feature grid — the long-tail of features.
const FeatureGrid = () => {
  const features = [
    { i: <Icons.Reply />,       t: t('features.f1_t'), d: t('features.f1_d') },
    { i: <Icons.List />,        t: t('features.f2_t'), d: t('features.f2_d') },
    { i: <Icons.Wand />,        t: t('features.f3_t'), d: t('features.f3_d') },
    { i: <Icons.GitCompare />,  t: t('features.f4_t'), d: t('features.f4_d') },
    { i: <Icons.Translate />,   t: t('features.f5_t'), d: t('features.f5_d') },
    { i: <Icons.Sparkle />,     t: t('features.f6_t'), d: t('features.f6_d') },
    { i: <Icons.Bolt />,        t: t('features.f7_t'), d: t('features.f7_d') },
    { i: <Icons.Cpu />,         t: t('features.f8_t'), d: t('features.f8_d') },
  ];

  return (
    <section style={{ background:'var(--bg-2)' }}>
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow"><span className="dot" /> {t('features.eyebrow')}</div>
          <h2 style={{ marginTop: 18 }}>{t('features.h2_line1')}<br/><span className="serif" style={{ fontStyle:'italic' }}>{t('features.h2_line2')}</span></h2>
          <p className="lede" style={{ marginTop: 22, maxWidth: 560 }}>
            {t('features.lede_part1')}<span className="mono" style={{ background:'rgba(15,11,20,0.06)', padding:'3px 8px', borderRadius: 6, fontSize: 14 }}>⌘⇧A</span>{t('features.lede_part2')}
          </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;