// ReservAI Landing — Navbar responsive (pill + hamburger mobile) const { useState, useEffect } = React; const BLUE = '#0983d6'; // Los links con `id` hacen scroll dentro de la home; los que tienen `href` // llevan a otra página (van como para que Google siga el enlace). const LINKS = [ { label: 'Beneficios', id: 'beneficios' }, { label: 'Cómo funciona', id: 'como-funciona' }, { label: 'Pruébalo', id: 'pruebalo' }, { label: 'Planes', href: '/precios' }, { label: 'Blog', href: '/blog' }, { label: 'FAQ', id: 'faq' }, { label: 'Contacto', id: 'contacto' }, ]; // Ancho mínimo para que quepan los 7 links + logo + CTA sin recortarse contra // el overflow:hidden de la píldora. Por debajo se usa el menú hamburguesa. // Ojo: NO reutilizar el useIsMobile global — Hero/Sections/Footer lo redefinen // después y, al ser todos scripts globales, gana la última definición. const NAV_COMPACT_BP = 1150; function useNavCompact() { const [c, setC] = React.useState(window.innerWidth < NAV_COMPACT_BP); React.useEffect(() => { const h = () => setC(window.innerWidth < NAV_COMPACT_BP); window.addEventListener('resize', h); return () => window.removeEventListener('resize', h); }, []); return c; } function Navbar({ onNav }) { const [scrolled, setScrolled] = useState(false); const [scrollPct, setScrollPct] = useState(0); const [hov, setHov] = useState(null); const [active, setActive] = useState(null); const [menuOpen, setMenuOpen] = useState(false); const compact = useNavCompact(); useEffect(() => { const el = document.querySelector('#landing-scroll') || window; const onScroll = () => { const top = el === window ? window.scrollY : el.scrollTop; const max = el === window ? document.documentElement.scrollHeight - window.innerHeight : el.scrollHeight - el.clientHeight; setScrolled(top > 30); setScrollPct(max > 0 ? (top / max) * 100 : 0); }; el.addEventListener('scroll', onScroll); return () => el.removeEventListener('scroll', onScroll); }, []); useEffect(() => { if (!compact) setMenuOpen(false); }, [compact]); // Llegando desde otra página (/#beneficios, /#faq...) el enlace correspondiente // debe salir ya marcado. Sin esto el punto azul no aparece hasta que vuelves a // picarle, porque `active` solo se llenaba al hacer clic. useEffect(() => { const sincronizar = () => { const id = decodeURIComponent(window.location.hash.slice(1)); const link = id && LINKS.find(l => l.id === id); setActive(link ? link.label : null); }; sincronizar(); window.addEventListener('hashchange', sincronizar); return () => window.removeEventListener('hashchange', sincronizar); }, []); const handleNav = (link) => { setMenuOpen(false); if (link.href) return; // el navega solo setActive(link.label); onNav && onNav(link.id); }; // El logo es un para que funcione y se indexe como enlace normal, // pero estando ya en la home no tiene sentido recargar: sube al inicio. const handleLogo = (e) => { setMenuOpen(false); const el = document.querySelector('#landing-scroll'); if (!el) return; // sin contenedor, que navegue a "/" e.preventDefault(); setActive(null); el.scrollTop = 0; }; return (