const { Button, IconButton } = window.HotelManglaresLodgeCaldera_e07d8c; /* Breakpoint hook — el sitio usa estilos inline, así que exponemos banderas de viewport para decidir layout (menú móvil, motor de reservas vertical). */ function useBP() { const get = () => { const w = typeof window !== "undefined" ? window.innerWidth : 1280; return { mobile: w <= 640, tablet: w > 640 && w <= 980, desktop: w > 980, navCollapsed: w <= 900 }; }; const [bp, setBp] = React.useState(get()); React.useEffect(() => { const on = () => setBp(get()); window.addEventListener("resize", on); return () => window.removeEventListener("resize", on); }, []); return bp; } window.useBP = useBP; const NAV = [ { id: "home", label: "Inicio" }, { id: "rooms", label: "Habitaciones" }, { id: "experiences", label: "Experiencias" }, { id: "gastronomia", label: "Gastronomía" }, { id: "about", label: "Nosotros" }, { id: "contact", label: "Contacto" }, ]; const WHATSAPP = "50689062992"; const PHONE = "50663343148"; // Las reservas se gestionan con el booking engine de Soverack. // TODO: reemplazar por la URL del motor de reservas de Soverack cuando esté lista. const RESERVA_URL = "https://wa.me/50689062992"; window.RESERVA_URL = RESERVA_URL; function SiteHeader({ current, onNavigate, transparent }) { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); const bp = useBP(); const collapsed = bp.navCollapsed; // El header es sticky (ocupa flujo), así que nunca llega a "sobreponerse" al // hero: mantenerlo sólido garantiza legibilidad del menú en todas las páginas. const solid = true; const go = (id) => { onNavigate(id); setOpen(false); }; React.useEffect(() => { if (!collapsed && open) setOpen(false); }, [collapsed, open]); return (

go("home")} style={{ display: "flex", alignItems: "center", cursor: "pointer", textDecoration: "none" }}>

{!collapsed && ( )} {collapsed && ( )}

{collapsed && open && (

{NAV.map((n) => ( go(n.id)} style={{ fontFamily: "var(--font-sans)", fontSize: "16px", fontWeight: 600, cursor: "pointer", color: current === n.id ? "var(--gold-600)" : "var(--ink-700)", borderBottom: "1px solid var(--border-soft)", padding: "12px 2px", }}>{n.label} ))}

)}

); } function SiteFooter({ onNavigate }) { const col = { display: "flex", flexDirection: "column", gap: "10px" }; const link = { fontFamily: "var(--font-sans)", fontSize: "14px", color: "rgba(251,247,239,0.72)", cursor: "pointer", textDecoration: "none" }; const h = { fontFamily: "var(--font-sans)", fontSize: "12px", letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 700, color: "var(--gold-400)", marginBottom: "4px" }; return ( ); } /* Botón flotante de WhatsApp — patrón estándar en sitios de hotelería. */ function WhatsAppFab() { return ( ); } Object.assign(window, { SiteHeader, SiteFooter, WhatsAppFab, NAV });