function MarqueeTrack({ words, reverse }) {
  const items = [...words, ...words, ...words, ...words];
  return (
    <div className={`marquee-track ${reverse ? 'reverse' : ''}`}>
      {items.map((w, i) => (
        <span className="marquee-item" key={i}>
          {w}
          <span className="marquee-spark">&#10022;</span>
        </span>
      ))}
    </div>
  );
}

function MarqueeRibbon() {
  const wordsA = ['Design', 'Web Design', 'Branding', 'Develop', 'Imagine'];
  const wordsB = ['Craft', 'Print', 'Create', 'Discover', 'Build'];
  return (
    <div className="ribbon-wrap" aria-hidden="true">
      <div className="ribbon ribbon-1">
        <MarqueeTrack words={wordsA} />
      </div>
      <div className="ribbon ribbon-2">
        <MarqueeTrack words={wordsB} reverse />
      </div>
    </div>
  );
}

window.MarqueeRibbon = MarqueeRibbon;