function Testimonial() {
  const STACK = [
    'Отраслевые таксономии',
    'Каналы и филиалы',
    'SKU и услуги',
    'Мультиагентная разметка',
    'ИИ-обоснование с цитатами',
    'Резидент Yandex AI Lab',
  ];

  return (
    <section style={{ padding: '120px 0 80px', background: 'var(--bg)' }}>
      <div className="container">
        <div style={{ maxWidth: 880, marginInline: 'auto', textAlign: 'center' }}>
          <h2 className="display" style={{
            fontSize: 56, fontWeight: 700, lineHeight: 1.05,
            letterSpacing: '-0.03em', color: 'var(--ink)',
          }}>
            Фидли понимает{' '}
            <span style={{
              color: 'var(--accent)',
              backgroundImage: 'linear-gradient(180deg, transparent 62%, rgba(122,96,255,0.28) 62%, rgba(122,96,255,0.28) 92%, transparent 92%)',
              backgroundRepeat: 'no-repeat',
              padding: '0 4px',
            }}>весь контекст</span>{' '}
            того, как устроен ваш бизнес
          </h2>
          <p style={{
            fontSize: 18, color: 'var(--muted)', marginTop: 24,
            maxWidth: 720, marginInline: 'auto', lineHeight: 1.55,
          }}>
            Никаких универсальных заготовок для всех клиентов. Мультиагентная система Фидли выделяет темы и строит таксономии под вашу отрасль, каналы, товары и филиалы — чтобы аналитика была точной, объяснимой и применимой в работе.
          </p>

          <div style={{
            display: 'flex', flexWrap: 'wrap', gap: 8,
            justifyContent: 'center', marginTop: 36,
          }}>
            {STACK.map(t => (
              <span key={t} style={{
                padding: '8px 14px', borderRadius: 999,
                fontSize: 13.5, fontWeight: 500,
                background: 'var(--card)',
                border: '1px solid var(--line)',
                color: 'var(--ink-2)',
              }}>{t}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Testimonial = Testimonial;