function Marquee() {
  const tags = [
    'БАЛАНС БЖУ', '40+ ВИТАМИНОВ', 'СОН', 'ШАГИ', 'ПИЩЕВАРЕНИЕ',
    'ИНДЕКС ЗДОРОВЬЯ', 'AI-ФОТО', 'СПЕЦИАЛИСТ', 'ВОДНЫЙ БАЛАНС', 'ГОРМОНЫ',
  ];
  return (
    <section style={{ padding: '40px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', overflow: 'hidden' }}>
      <div className="marquee">
        {[0, 1].map(d => (
          <div key={d} style={{ display: 'flex', gap: 64, paddingRight: 64, flexShrink: 0 }}>
            {tags.map((t, i) => (
              <span key={i} style={{
                fontFamily: 'var(--display)', fontWeight: 700, fontSize: 32,
                color: i % 2 === 0 ? 'var(--ink)' : 'var(--ink-3)',
                whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 24,
                letterSpacing: '-0.02em',
              }}>
                {t}
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--violet)' }}/>
              </span>
            ))}
          </div>
        ))}
      </div>
    </section>
  );
}
window.Marquee = Marquee;