// components.jsx — Shared atoms for Spree Ravers // BlurText, MarkerTag, FadingVideo, AnimatedHeroBg, Glass primitives, Nav, Footer. const { useState, useEffect, useRef, useMemo, useCallback } = React; // ─── i18n hook ──────────────────────────────────────────────────────── function useT(lang) { return useCallback((key) => { const dict = window.I18N[lang] || window.I18N.en; return dict[key] || window.I18N.en[key] || key; }, [lang]); } // ─── Icons (inline SVG, no external lib) ─────────────────────────────── const Icon = { ArrowUR: (props) => ( ), Shield: (props) => ( ), Telegram: (props) => ( ), Marker: (props) => ( ), Instagram: (props) => ( ), Facebook: (props) => ( ), }; // ─── BlurText: word-by-word blur-in stagger ──────────────────────────── function BlurText({ children, className = "", style = {}, delay = 0, stagger = 100, asInline = false }) { const text = typeof children === "string" ? children : ""; const words = text.split(" "); const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { if (!ref.current) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduced) { setVisible(true); return; } // Safety: always reveal after 1.5s even if observer doesn't fire const safety = setTimeout(() => setVisible(true), 1500); const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); clearTimeout(safety); } }, { threshold: 0.05 }); obs.observe(ref.current); return () => { obs.disconnect(); clearTimeout(safety); }; }, []); return ( {words.map((w, i) => ( {w} ))} ); } // ─── MarkerTag — rotated Permanent Marker text "slapped" on layout ──── function MarkerTag({ children, color = "var(--c-cyan)", rotate = -3, size = "1.5rem", className = "", drift = true, style = {} }) { return ( {children} ); } // ─── FadingVideo — rAF crossfade per the brief ──────────────────────── function FadingVideo({ src, poster, style = {}, scale = 1.2 }) { const ref = useRef(null); useEffect(() => { const v = ref.current; if (!v) return; let raf; const fadeTo = (target, duration = 500) => { cancelAnimationFrame(raf); const start = performance.now(); const from = parseFloat(v.style.opacity || "0"); const step = (now) => { const t = Math.min(1, (now - start) / duration); v.style.opacity = String(from + (target - from) * t); if (t < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); }; const onLoaded = () => { v.style.opacity = "0"; v.play().catch(() => {}); fadeTo(1, 700); }; const onTime = () => { if (v.duration && v.duration - v.currentTime <= 0.55) fadeTo(0, 550); }; const onEnded = () => { v.style.opacity = "0"; setTimeout(() => { v.currentTime = 0; v.play().catch(() => {}); fadeTo(1, 700); }, 100); }; v.addEventListener("loadeddata", onLoaded); v.addEventListener("timeupdate", onTime); v.addEventListener("ended", onEnded); return () => { cancelAnimationFrame(raf); v.removeEventListener("loadeddata", onLoaded); v.removeEventListener("timeupdate", onTime); v.removeEventListener("ended", onEnded); }; }, [src]); return (