);
}
// Self-contained, language-agnostic marquee.
// Uses JS to read the natural width of one set of items, then duplicates
// only as many copies as are needed to fill 2× the container, and translates
// by the first-set width per cycle — this guarantees a seamless loop in any
// direction or language without depending on percentage math.
function Marquee({ items, lang, speed = 60 /* px/sec */ }) {
const containerRef = React.useRef(null);
const setRef = React.useRef(null);
const trackRef = React.useRef(null);
const [setWidth, setSetWidth] = React.useState(0);
const [copies, setCopies] = React.useState(2);
// Measure one set's width and decide how many copies to render
React.useEffect(() => {
if (!setRef.current || !containerRef.current) return;
const measure = () => {
const w = setRef.current.scrollWidth;
const cw = containerRef.current.clientWidth;
if (!w || !cw) return;
setSetWidth(w);
// Need at least enough copies so total > 2 × container
const needed = Math.max(2, Math.ceil((cw * 2) / w) + 1);
setCopies(needed);
};
measure();
const ro = new ResizeObserver(measure);
ro.observe(setRef.current);
ro.observe(containerRef.current);
return () => ro.disconnect();
}, [items]);
// Drive the translateX loop via rAF
React.useEffect(() => {
if (!setWidth || !trackRef.current) return;
let raf, last = performance.now(), x = 0;
const tick = (now) => {
const dt = (now - last) / 1000; last = now;
x -= speed * dt;
// wrap when one set has fully scrolled past
if (-x >= setWidth) x += setWidth;
if (trackRef.current) trackRef.current.style.transform = `translate3d(${x}px,0,0)`;
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [setWidth, speed]);
// One "set" of items rendered; we render `copies` of it (first one is the
// measured reference; the rest are aria-hidden duplicates).
const renderSet = (k, isMeasure = false) => (