/* ================================================================= js/components.jsx — utilities & primitives Exposes to window: Cursor, Reveal, Counter, Logo, useLang, T ================================================================= */ const { useEffect, useState, useRef, useCallback, createContext, useContext } = React; /* ----------------- Language context ----------------- */ const LangCtx = createContext({ lang: "es", setLang: () => {} }); function LangProvider({ children }) { const [lang, setLang] = useState(() => { try { return localStorage.getItem("sysd_lang") || "es"; } catch (e) { return "es"; } }); useEffect(() => { try { localStorage.setItem("sysd_lang", lang); } catch (e) {} document.documentElement.lang = lang; }, [lang]); return {children}; } function useLang() { return useContext(LangCtx); } // Translation helper — pass an object {es: "...", en: "..."} function T({ es, en }) { const { lang } = useLang(); return <>{lang === "en" ? en : es}; } function t(obj, lang) { return obj[lang] || obj.es; } /* ----------------- Custom cursor ----------------- */ function Cursor() { return null; } /* ----------------- Reveal on scroll ----------------- */ function Reveal({ children, delay = 0, as = "div", className = "", ...rest }) { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setSeen(true); return; } const io = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setSeen(true); io.disconnect(); } }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" }); io.observe(el); return () => io.disconnect(); }, []); const Tag = as; return ( {children} ); } /* ----------------- Animated counter ----------------- */ function Counter({ to, duration = 1800, suffix = "", prefix = "" }) { const [val, setVal] = useState(0); const ref = useRef(null); const started = useRef(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver(([entry]) => { if (entry.isIntersecting && !started.current) { started.current = true; const start = performance.now(); const tick = (now) => { const elapsed = now - start; const p = Math.min(1, elapsed / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(Math.round(to * eased)); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); } }, { threshold: 0.5 }); io.observe(el); return () => io.disconnect(); }, [to, duration]); return ( {prefix}{val}{suffix} ); } /* ----------------- Logo SVG ----------------- */ function Logo() { return ( ); } /* ----------------- WhatsApp icon (official mark) ----------------- */ function WhatsAppIcon() { return ( ); } /* ----------------- Magnetic wrapper ----------------- */ function Magnetic({ children, strength = 0.3 }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; if (window.matchMedia("(hover: none)").matches) return; const onMove = (e) => { const r = el.getBoundingClientRect(); const x = (e.clientX - r.left - r.width / 2) * strength; const y = (e.clientY - r.top - r.height / 2) * strength; el.style.transform = `translate(${x}px, ${y}px)`; }; const onLeave = () => { el.style.transform = "translate(0,0)"; }; el.addEventListener("mousemove", onMove); el.addEventListener("mouseleave", onLeave); return () => { el.removeEventListener("mousemove", onMove); el.removeEventListener("mouseleave", onLeave); }; }, [strength]); return {children}; } /* ----------------- Cookie consent ----------------- */ const COOKIE_CONSENT_KEY = "sys_cookie_consent_v1"; const COOKIE_CONSENT_VERSION = 1; const COOKIE_PREFS_EVENT = "sys:open-cookie-preferences"; function readCookieConsent() { try { const raw = localStorage.getItem(COOKIE_CONSENT_KEY); if (!raw) return null; const data = JSON.parse(raw); if (!data || data.version !== COOKIE_CONSENT_VERSION) return null; return data; } catch (e) { return null; } } function writeCookieConsent(consent) { const payload = { version: COOKIE_CONSENT_VERSION, necessary: true, analytics: !!consent.analytics, marketing: !!consent.marketing, ts: Date.now(), }; try { localStorage.setItem(COOKIE_CONSENT_KEY, JSON.stringify(payload)); } catch (e) {} applyCookieScripts(payload); return payload; } function applyCookieScripts(consent) { if (!consent) return; document.documentElement.dataset.cookieAnalytics = consent.analytics ? "1" : "0"; document.documentElement.dataset.cookieMarketing = consent.marketing ? "1" : "0"; /* Ejemplo: cargar Google Analytics solo con consentimiento if (consent.analytics && !window.__sysAnalyticsLoaded) { window.__sysAnalyticsLoaded = true; // gtag('config', 'G-XXXXXXXX'); } */ } function openCookiePreferences() { window.dispatchEvent(new CustomEvent(COOKIE_PREFS_EVENT)); } function CookieConsent() { const stored = readCookieConsent(); const [consent, setConsent] = useState(stored); const [view, setView] = useState(stored ? null : "banner"); const [draft, setDraft] = useState({ analytics: stored?.analytics ?? false, marketing: stored?.marketing ?? false, }); useEffect(() => { if (consent) applyCookieScripts(consent); }, []); useEffect(() => { const onOpen = () => { const current = readCookieConsent(); setDraft({ analytics: current?.analytics ?? false, marketing: current?.marketing ?? false, }); setView("preferences"); }; window.addEventListener(COOKIE_PREFS_EVENT, onOpen); return () => window.removeEventListener(COOKIE_PREFS_EVENT, onOpen); }, []); useEffect(() => { const on = view === "banner" || view === "preferences"; document.body.classList.toggle("has-cookie-ui", on); document.body.classList.toggle("has-cookie-banner", view === "banner"); document.body.classList.toggle("has-cookie-preferences", view === "preferences"); return () => { document.body.classList.remove("has-cookie-ui", "has-cookie-banner", "has-cookie-preferences"); }; }, [view]); const persist = (next) => { const saved = writeCookieConsent(next); setConsent(saved); setView(null); }; const acceptAll = () => persist({ analytics: true, marketing: true }); const rejectOptional = () => persist({ analytics: false, marketing: false }); const savePreferences = () => persist(draft); if (!view) return null; const termsHref = `${pageUrl("terminos.html")}#cookies`; if (view === "preferences") { return ( ); } return ( ); } /* ----------------- Export to window ----------------- */ Object.assign(window, { LangProvider, useLang, T, t, Cursor, Reveal, Counter, Logo, WhatsAppIcon, Magnetic, CookieConsent, openCookiePreferences, readCookieConsent, });