// Marquee.jsx — infinite scroll strip between sections
const { useState: useStateMq } = React;

function Marquee({ items, reverse = false, speed = 40 }) {
  const stream = [...items, ...items];
  const [paused, setPaused] = useStateMq(false);
  const toggle = () => setPaused(p => !p);
  return (
    <section className="marquee-section" aria-hidden="true">
      <div
        className={`marquee ${reverse ? 'reverse' : ''} ${paused ? 'is-paused' : ''}`}
        style={{ '--marquee-duration': `${speed}s` }}
        onTouchStart={toggle}
      >
        {stream.map((it, i) => (
          <span className="marquee-item" key={i}>
            <span>{it.text}</span>
            {it.italic && <em>&nbsp;{it.italic}</em>}
            <span className="bullet" style={{background: it.color || 'var(--oz-gold-400)'}} />
          </span>
        ))}
      </div>
    </section>
  );
}

window.Marquee = Marquee;