function Features() {
  const items = [
    { c: 'var(--rose)',    k: 'Спринты', t: 'Цели по 7 дней',
      d: 'Маленькие циклы вместо «похудеть к лету». Короткие отрезки позволяют держать темп, видеть результат и не терять мотивацию.', icon: 'sprint' },
    { c: 'var(--violet-2)', k: 'Аналитика', t: 'AI-консилиум',
      d: 'Глубокий разбор каждого спринта и выводы, где биология стала сильнее, а привычки крепче.', icon: 'ai' },
    { c: 'var(--amber)',   k: 'Нутриенты', t: 'Микроэлементозы',
      d: 'Дефицит, избыток, дисбаланс витаминов и минералов — Миникорн видит риски раньше, чем они ударят по здоровью.', icon: 'pill' },
    { c: '#60A5FA',        k: 'Миникорн', t: 'На связи 24/7',
      d: 'Сбор контекста за 15 секунд. Миникорн всегда под рукой, чтобы зафиксировать детали, которые лягут в основу консилиума.', icon: 'chat' },
    { c: 'var(--green)',   k: 'Дополнительно', t: 'Переменные',
      d: 'Миникорн учитывает всё: от качества стула до влияния алкоголя и сигарет на организм. Это честная картина без «белых пятен».', icon: 'layers' },
    { c: 'var(--pink)',    k: 'Карта здоровья', t: '9 систем под наблюдением',
      d: 'Энергия, мозг, сон, гормоны, иммунитет, ЖКТ, ССС, тело, красота — всё на одном экране и понятным языком.', icon: 'map' },
  ];

  const Icon = ({ kind, color }) => {
    const sz = 22;
    const s = { width: sz, height: sz, stroke: color, fill: 'none', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
    if (kind === 'cam')   return <svg viewBox="0 0 24 24" {...s}><path d="M3 8h3l2-3h8l2 3h3v11H3z"/><circle cx="12" cy="13" r="4"/></svg>;
    if (kind === 'map')   return <svg viewBox="0 0 24 24" {...s}><path d="M12 21s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    if (kind === 'pill')  return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="9" width="18" height="6" rx="3"/><path d="M12 9v6"/></svg>;
    if (kind === 'chat')  return <svg viewBox="0 0 24 24" {...s}><path d="M4 5h16v11H10l-5 4V5z"/><circle cx="9" cy="11" r=".5" fill={color}/><circle cx="12" cy="11" r=".5" fill={color}/><circle cx="15" cy="11" r=".5" fill={color}/></svg>;
    if (kind === 'sprint') return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9"/><path d="M12 12l5-3"/><path d="M3 12h2M19 12h2"/></svg>;
    if (kind === 'body')  return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="5" r="2.5"/><path d="M12 8v7M8 11l4 1 4-1M9 21l3-6 3 6"/></svg>;
    if (kind === 'ai')    return <svg viewBox="0 0 24 24" {...s}><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z"/><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15z"/></svg>;
    if (kind === 'layers') return <svg viewBox="0 0 24 24" {...s}><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>;
    return null;
  };

  return (
    <section id="features" className="pad-y-lg">
      <div className="wrap">
        <Reveal>
          <SectionLabel n={4}>Что ещё</SectionLabel>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 80px)', margin: '0 0 16px', maxWidth: '20ch' }}>
            Шесть вещей, ради которых <span style={{ color: 'var(--violet)' }}>стоит открыть приложение</span>.
          </h2>
          <p className="lede" style={{ marginBottom: 56 }}>
            Функции не для галочки, а для настоящего улучшения здоровья.
          </p>
        </Reveal>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
        }} className="feat-grid">
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 70}>
              <div className="glass" style={{
                padding: 28, height: '100%',
                display: 'flex', flexDirection: 'column', gap: 18,
                position: 'relative', overflow: 'hidden',
              }}>
                <div aria-hidden style={{
                  position: 'absolute', top: -40, right: -40,
                  width: 140, height: 140, borderRadius: '50%',
                  background: `radial-gradient(circle, ${it.c}33, transparent 70%)`, filter: 'blur(20px)',
                }}/>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: `linear-gradient(135deg, ${it.c}30, ${it.c}10)`,
                  border: `1px solid ${it.c}40`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  position: 'relative',
                }}>
                  <Icon kind={it.icon} color={it.c}/>
                </div>
                <div className="eyebrow" style={{ color: it.c }}>{it.k}</div>
                <h3 style={{
                  margin: 0, fontFamily: 'var(--display)', fontWeight: 700,
                  fontSize: 30, lineHeight: 1.05, letterSpacing: '-0.02em',
                }}>{it.t}</h3>
                <p style={{ margin: 0, color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.55 }}>{it.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){ .feat-grid{ grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 600px){ .feat-grid{ grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}
window.Features = Features;