{particles && }

); } // Particles riding along the wave path. Most cluster within a horizontal band // around y≈55%, with a sparse upper layer for atmosphere. function ParticleField({ wave }) { const particles = useMemo(() => { const arr = []; const N = 140; for (let i = 0; i < N; i++) { const inBand = i % 4 !== 0; const seed = i * 9301 + 49297; const r1 = ((seed % 233280) / 233280); const r2 = (((seed * 7) % 233280) / 233280); const r3 = (((seed * 13) % 233280) / 233280); const x = r1 * 110 - 5; const y = inBand ? 40 + r2 * 28 + Math.sin(r1 * Math.PI * 2) * 6 : r2 * 100; const size = 1 + (i % 5) * 0.35 + (inBand ? 0.4 : 0); const duration = 18 + r3 * 26; const delay = -r1 * duration; const peak = (inBand ? 0.55 : 0.25) + r3 * 0.4; const twinkleDur = 4 + (i % 7) * 0.8; const twinkleDelay = -r2 * twinkleDur; const drift = 60 + r3 * 80; // vertical bob amplitude px const variant = i % 3; arr.push({ x, y, size, duration, delay, peak, twinkleDur, twinkleDelay, drift, variant }); } return arr; }, []); return (

{particles.map((p, i) => ( ))}

); } // ---------- XMB NAV ---------- // Mobile shrinks columns so all categories fit on one screen — same feel as // desktop where you can see the whole row at a glance. function useColWidth() { const get = () => (typeof window !== "undefined" && window.innerWidth < 600 ? 76 : 200); const [w, setW] = useState(get); useEffect(() => { const onResize = () => setW(get()); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); return w; } function XMB({ catIdx, itemIdx, onSelectCat, onSelectItem, onOpen }) { const colWidth = useColWidth(); // 50vw (viewport center) instead of 50% (row's own center) — the row's // intrinsic width is N × colWidth which doesn't equal the viewport on phones, // so the old math pushed the active column hard to the right on small screens. return (

{CATEGORIES.map((cat, ci) => { const active = ci === catIdx; return (

{cat.items.map((item, ii) => { const itemActive = active && ii === itemIdx; return ( ); })}

); })}

); } // ---------- CONTENT PANELS ---------- function Placeholder({ label, height = 220 }) { return (

{label}

); } // Drop a YouTube ID (the part after v=) into a skate item's `youtube` field and // it renders here. Vimeo support tucked in too. If neither is set, you get a // labeled placeholder so the empty state is obvious in the panel. function VideoEmbed({ youtube, vimeo, label }) { if (!youtube && !vimeo) return ; const src = youtube ? `https://www.youtube-nocookie.com/embed/${youtube}` : `https://player.vimeo.com/video/${vimeo}`; return (