// Marquee — bold rolling tape
function Marquee() {
  const items = [
    'CYPHER', '★', 'BATALLAS', '★', 'TORNAMESA', '★', 'MURO ABIERTO',
    '★', 'CULTURA', '★', 'BARRIO', '★', 'SIN FILTRO', '★', 'FLOWFAM PUDAHUEL',
  ];
  const loop = [...items, ...items];
  return (
    <section aria-hidden className="relative py-3 bg-ink-900 text-bone-100 overflow-hidden border-y-2 border-ink-900">
      <div className="marquee-track flex gap-6 whitespace-nowrap">
        {loop.map((t, i) => (
          <span key={i} className={
            t === '★'
              ? 'font-display text-[36px] text-fire-500'
              : 'font-display text-[36px]'
          }>{t}</span>
        ))}
      </div>
    </section>
  );
}

window.Marquee = Marquee;