// Marquee.jsx — bold scrolling strip; speeds up with scroll velocity
function Marquee({ items, ink, reverse }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const track = ref.current;
    if (!track) return;
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let lastY = window.scrollY;
    let lastT = performance.now();
    let boost = 1;
    let raf = 0;
    const tick = () => {
      boost += (1 - boost) * 0.06;            // ease back to base speed
      track.style.animationDuration = (26 / boost) + 's';
      raf = requestAnimationFrame(tick);
    };
    const onScroll = () => {
      const now = performance.now();
      const dy = Math.abs(window.scrollY - lastY);
      const dt = Math.max(16, now - lastT);
      const v = dy / dt;                       // px per ms
      boost = Math.min(5, 1 + v * 2.2);        // cap the speed-up
      lastY = window.scrollY; lastT = now;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    raf = requestAnimationFrame(tick);
    return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); };
  }, []);
  const run = (items || []).map((t, i) => (
    <span className="w-marquee__item" key={i}><span className="w-marquee__star" aria-hidden>✦</span>{t}</span>
  ));
  return (
    <div className={`w-marquee${ink ? ' w-marquee--ink' : ''}${reverse ? ' w-marquee--rev' : ''}`} aria-hidden="true">
      <div className="w-marquee__track" ref={ref}>{run}{run}</div>
    </div>
  );
}
Object.assign(window, { Marquee });