function NotAChatbot() {
  const cards = [
    {
      c: 'var(--violet)',
      k: 'Проактивность',
      t: 'Приходит сам',
      d: 'Не ждёт вопроса. Замечает отклонения от цели, напоминает про спринт, предлагает шаг — на основе того, что происходит прямо сейчас.',
      icon: (color) => (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
          <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
          <circle cx="18" cy="5" r="3" fill={color} stroke="none" opacity="0.9"/>
        </svg>
      ),
    },
    {
      c: 'var(--green)',
      k: 'Долгосрочная память',
      t: 'Помнит всё',
      d: 'Что ел вчера, какой был дефицит две недели назад, что улучшилось после прошлого спринта. Контекст накапливается.',
      icon: (color) => (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <ellipse cx="12" cy="12" rx="10" ry="6"/>
          <path d="M2 12c0 3.3 4.5 6 10 6s10-2.7 10-6"/>
          <path d="M12 6v6l3 2"/>
        </svg>
      ),
    },
    {
      c: 'var(--amber)',
      k: 'Анализ паттернов',
      t: 'Видит корреляции',
      d: 'Замечает, что ужин в 23:00 совпадает с плохим сном. Что переедание в среду — следствие недобора белка во вторник.',
      icon: (color) => (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 18l4-8 4 5 3-4 4 7"/>
          <circle cx="7" cy="10" r="1.5" fill={color} stroke="none"/>
          <circle cx="11" cy="15" r="1.5" fill={color} stroke="none"/>
          <circle cx="14" cy="11" r="1.5" fill={color} stroke="none"/>
          <circle cx="18" cy="18" r="1.5" fill={color} stroke="none"/>
        </svg>
      ),
    },
    {
      c: 'var(--pink)',
      k: 'База знаний',
      t: '90 000+ продуктов',
      d: 'Точный нутриентный профиль каждого блюда — опираясь на стандарты международных институтов питания.',
      icon: (color) => (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 6h16M4 10h16M4 14h10"/>
          <circle cx="19" cy="17" r="3"/>
          <path d="M21 19l1.5 1.5"/>
        </svg>
      ),
    },
  ];

  return (
    <section id="notachatbot" className="pad-y-lg" style={{ position: 'relative' }}>
      <div className="wrap">

        {/* ── Header ── */}
        <Reveal>
          <div style={{ marginBottom: 20 }}>
            <span className="pill" style={{ marginBottom: 20, display: 'inline-flex' }}>
              <span className="dot"/>Не chatbot
            </span>
          </div>
          <h2 className="display" style={{
            fontSize: 'clamp(36px, 5.5vw, 76px)',
            margin: '0 0 20px', maxWidth: '24ch', lineHeight: 0.95,
          }}>
            Модели GPT знают всё о питании.{' '}
            <span style={{
              background: 'linear-gradient(120deg, #ffffff 20%, var(--violet) 55%, var(--pink) 100%)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>Миникорн знает всё о твоём питании.</span>
          </h2>
          <p className="lede" style={{ marginBottom: 56 }}>
            Теория против реальности.<br/>Знать «как правильно» недостаточно, если это не работает.
          </p>
        </Reveal>

        {/* ── Cards ── */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14,
        }} className="nac-grid">
          {cards.map((card, i) => (
            <Reveal key={i} delay={i * 70}>
              <div className="glass" style={{
                padding: 28, height: '100%',
                display: 'flex', flexDirection: 'column', gap: 16,
                position: 'relative', overflow: 'hidden',
              }}>
                {/* Ambient glow */}
                <div aria-hidden style={{
                  position: 'absolute', top: -50, right: -50,
                  width: 160, height: 160, borderRadius: '50%',
                  background: `radial-gradient(circle, ${card.c}28, transparent 70%)`,
                  filter: 'blur(24px)',
                }}/>

                {/* Icon */}
                <div style={{
                  width: 44, height: 44, borderRadius: 12, flexShrink: 0,
                  background: `linear-gradient(135deg, ${card.c}28, ${card.c}0d)`,
                  border: `1px solid ${card.c}38`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  position: 'relative',
                }}>
                  {card.icon(card.c)}
                </div>

                {/* Label */}
                <div className="eyebrow" style={{ color: card.c }}>{card.k}</div>

                {/* Title */}
                <h3 style={{
                  margin: 0, fontFamily: 'var(--display)', fontWeight: 700,
                  fontSize: 26, lineHeight: 1.05, letterSpacing: '-0.02em',
                }}>{card.t}</h3>

                {/* Description */}
                <p style={{
                  margin: 0, color: 'var(--ink-2)',
                  fontSize: 14, lineHeight: 1.6,
                }}>{card.d}</p>
              </div>
            </Reveal>
          ))}
        </div>

      </div>
      <style>{`
        @media (max-width: 1024px) { .nac-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px)  { .nac-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}
window.NotAChatbot = NotAChatbot;