// Marquees — top (big role) + bottom (small meta)
function MarqueeStrip({ items, big, reverse, slow, small }) {
  // duplicate group so the loop is seamless
  const cls = ['marquee'];
  if (reverse) cls.push('marquee--rev');
  if (slow) cls.push('marquee--slow');
  if (small) cls.push('marquee--small');

  const wrapCls = ['marquee-strip'];
  if (big) wrapCls.push('marquee-strip--big');

  const renderItems = () => items.map((it, i) => <span className="marquee-item" key={i}>{it}</span>);

  return (
    <div className={wrapCls.join(' ')}>
      <div className={cls.join(' ')}>
        <div className="marquee-track">
          <div className="marquee-group">{renderItems()}</div>
          <div className="marquee-group">{renderItems()}</div>
          <div className="marquee-group">{renderItems()}</div>
        </div>
      </div>
    </div>
  );
}

window.MarqueeStrip = MarqueeStrip;