function Testimonials() {
  const quotes = [
    { q: 'Перестала вести excel-таблички с калориями. Просто фоткаю — и всё. Через месяц увидела, что у меня хроническая нехватка железа, и наконец это починила.',
      who: 'Аня К.', role: 'продакт-менеджер · 26', tag: '−5 кг за 3 месяца' },
    { q: 'Сын скептически ставил, чтобы посмеяться. Через неделю сам ходил с миникорном и уговорил жену. Теперь у нас семейный спринт.',
      who: 'Игорь В.', role: 'разработчик · 41', tag: 'нормализовал давление' },
    { q: 'Я диетолог. Рекомендую миникорн клиентам — он берёт на себя 80% рутины, и мы наконец говорим о важном, а не считаем граммы белка.',
      who: 'Ольга М.', role: 'нутрициолог', tag: 'клиенты счастливее' },
  ];
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI(x => (x + 1) % quotes.length), 7000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="pad-y-lg">
      <div className="wrap">
        <Reveal>
          <SectionLabel n={5}>Отзывы</SectionLabel>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center' }} className="t-grid">
          <Reveal>
            <div className="glass-strong" style={{ padding: '40px 44px', minHeight: 320, position: 'relative' }} key={i}>
              <span style={{
                position: 'absolute', top: 12, left: 24, fontFamily: 'var(--display)',
                fontSize: 100, lineHeight: 1, color: 'var(--violet)', opacity: 0.4,
              }}>“</span>
              <blockquote style={{
                margin: 0, fontFamily: 'var(--display)', fontWeight: 600,
                fontSize: 'clamp(24px, 3vw, 36px)', lineHeight: 1.2,
                letterSpacing: '-0.015em', color: 'var(--ink)',
                paddingTop: 16,
              }}>
                {quotes[i].q}
              </blockquote>
              <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                <div style={{
                  width: 44, height: 44, borderRadius: '50%',
                  background: ['linear-gradient(135deg, #EC4899, #A78BFA)','linear-gradient(135deg, #34D399, #A78BFA)','linear-gradient(135deg, #FBBF24, #EC4899)'][i],
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--display)', fontWeight: 800, fontSize: 16, color: 'white',
                }}>{quotes[i].who[0]}</div>
                <div>
                  <div style={{ fontWeight: 600 }}>{quotes[i].who}</div>
                  <div style={{ color: 'var(--ink-3)', fontSize: 13 }}>{quotes[i].role}</div>
                </div>
                <span className="pill" style={{ marginLeft: 'auto' }}>
                  <span className="dot"/>{quotes[i].tag}
                </span>
              </div>
              <div style={{ display: 'flex', gap: 6, marginTop: 28 }}>
                {quotes.map((_, j) => (
                  <button key={j} onClick={() => setI(j)} aria-label={`Отзыв ${j+1}`} style={{
                    appearance: 'none', cursor: 'pointer', padding: 0, border: 0,
                    width: j === i ? 28 : 8, height: 4, borderRadius: 2,
                    background: j === i ? 'var(--violet)' : 'var(--line-2)',
                    transition: 'all .25s',
                  }}/>
                ))}
              </div>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {[
                { k: '4.9', s: '★★★★★', l: 'App Store · 3.2K оценок' },
                { k: '94%', l: 'продлевают подписку через год' },
                { k: '12K+', l: 'активных пользователей' },
                { k: '0', l: 'продаж твоих данных' },
              ].map((s, j) => (
                <div key={j} className="glass" style={{ padding: 24 }}>
                  <div className="display" style={{ fontSize: 44, lineHeight: 1, marginBottom: 6 }}>{s.k}</div>
                  {s.s && <div style={{ color: 'var(--amber)', fontSize: 13, marginBottom: 6 }}>{s.s}</div>}
                  <div style={{ color: 'var(--ink-3)', fontSize: 12, fontFamily: 'var(--mono)', letterSpacing: '0.04em' }}>{s.l}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){ .t-grid{ grid-template-columns: 1fr !important; gap: 40px !important; } }
      `}</style>
    </section>
  );
}
window.Testimonials = Testimonials;