// Wasabil — site components (shared across pages) // Usage: include after React + Babel, then render const { useState, useEffect, useRef } = React; // -------- Mascot -------- // poses: default | clap | explain | zen | egg | genki | genki2 | genki3 | rest | baby | king | bttf | nimbus const MASCOT_POSES = { default: "/assets/mascot.png", clap: "/assets/mascot-clap.png", explain: "/assets/mascot-explain.png", zen: "/assets/mascot-zen.png", egg: "/assets/mascot-egg.png", genki: "/assets/mascot-genki.png", genki2: "/assets/mascot-genki2.png", genki3: "/assets/mascot-genki3.png", "genki-a0": "/assets/mascot-genki-a0.png", "genki-a1": "/assets/mascot-genki-a1.png", "genki-a2": "/assets/mascot-genki-a2.png", "genki-a3": "/assets/mascot-genki-a3.png", "genki-a4": "/assets/mascot-genki-a4.png", "genki-a5": "/assets/mascot-genki-a5.png", "genki-a6": "/assets/mascot-genki-a6.png", "genki-a7": "/assets/mascot-genki-a7.png", "genki-a8": "/assets/mascot-genki-a8.png", "genki-a9": "/assets/mascot-genki-a9.png", rest: "/assets/mascot-rest.png", baby: "/assets/mascot-baby.png", king: "/assets/mascot-king.png", bttf: "/assets/mascot-bttf.png", nimbus: "/assets/mascot-nimbus.png", }; function Mascot({ size = 40, style = {}, pose = "default" }) { const src = MASCOT_POSES[pose] || MASCOT_POSES.default; return ( ); } // -------- Nav -------- function Nav({ current = "home" }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(false); useEffect(() => { setIsLoggedIn(document.cookie.split(';').some(c => c.trim().startsWith('wsbtoken='))); }, []); // Reactivo a cambios de paleta: observa data-palette del y // actualiza el logo al instante (sin esperar la transición de 600ms). const computeIsDark = () => { const p = document.documentElement.dataset.palette; if (p === "light") return false; if (p === "dark") return true; const bg = getComputedStyle(document.documentElement).getPropertyValue("--bg").trim(); if (bg.startsWith("#")) { const hex = bg.slice(1); const r = parseInt(hex.slice(0,2),16), g = parseInt(hex.slice(2,4),16), b = parseInt(hex.slice(4,6),16); return (r * 299 + g * 587 + b * 114) / 1000 < 128; } return true; }; const [isDark, setIsDark] = useState(computeIsDark); useEffect(() => { const obs = new MutationObserver(() => setIsDark(computeIsDark())); obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-palette"] }); return () => obs.disconnect(); }, []); const logoSrc = isDark ? "/assets/logo-wasabil-dark.png" : "/assets/logo-wasabil.png"; useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { if (menuOpen) document.body.style.overflow = "hidden"; else document.body.style.overflow = ""; return () => { document.body.style.overflow = ""; }; }, [menuOpen]); const links = [ { id: "producto", label: "Producto", href: "/producto/" }, { id: "pricing", label: "Precios", href: "/pricing/" }, { id: "about", label: "Nosotros", href: "/about/" }, { id: "blog", label: "Blog", href: "/blog/" }, ]; return ( <> {menuOpen && (
setMenuOpen(false)}> {links.map(l => ( {l.label} ))}
Iniciar sesión Agenda demo {!isLoggedIn && ( Prueba gratis → )}
)} ); } // -------- Footer -------- function Footer() { return ( ); } // -------- Logo cloud -------- function LogoCloud() { const brands = [ { name: "Platanus Ventures", src: "/assets/logos/platanus-ventures.webp", h: 26 }, { name: "Endeavor", src: "/assets/logos/endeavor.png", h: 22 }, { name: "Start-Up Chile", src: "/assets/logos/startup-chile.png", h: 22 }, { name: "SII", src: "/assets/logos/sii.png", h: 32 }, ]; // Cada logo va dentro de una "chip" con fondo claro fijo y borde sutil. // Así se ven igual en modo claro u oscuro, sin filtros que rompan logos a color. return (
Respaldados por
{brands.map(b => (
{b.name}
))}
); } Object.assign(window, { Mascot, Nav, Footer, LogoCloud });