// Marquee — dark band with niches

function Marquee(){
  const items = [
    "Кофейни", "Стоматологии", "Автосервисы", "Барбершопы",
    "Юристы", "Клиники", "Студии красоты", "Рестораны",
    "Фитнес-залы", "Шоурумы", "СТО", "Цветочные",
    "Школы английского", "Нотариусы", "Ателье",
  ];
  return (
    <section className="mq ink-block">
      <div className="wrap mq-head">
        <span className="eyebrow muted">Работаем с локальным бизнесом</span>
      </div>
      <div className="mq-strip" aria-hidden="true">
        <div className="mq-track">
          {[...items, ...items].map((it,i) => (
            <span key={i} className="mq-item">
              <PinIcon size={13} color="var(--accent)"/>
              {it}
            </span>
          ))}
        </div>
      </div>
      <style>{`
        .mq{padding:44px 0;background:var(--bg);color:var(--fg)}
        .mq-head{margin-bottom:22px}
        .mq-strip{overflow:hidden;mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
        .mq-track{display:flex;gap:48px;width:max-content;animation:scroll 38s linear infinite}
        .mq-item{display:inline-flex;align-items:center;gap:10px;color:var(--fg);font-size:20px;font-weight:600;letter-spacing:-.015em;white-space:nowrap}
        @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
      `}</style>
    </section>
  );
}

window.Marquee = Marquee;