/* global React, useWishlist, useUI, HeartIcon, Arr */ const { useState, useEffect, useRef } = React; function Header({ page, setPage, dark, mobile }) { const [menuOpen, setMenuOpen] = useState(false); const wl = useWishlist(); const ui = useUI(); const headerRef = useRef(null); const [headerH, setHeaderH] = useState(0); // Mide la altura real del header (cambia entre mobile/desktop, y si el // logo/padding cambian en el futuro). La expone como --hdr-h en :root // para que la ficha de producto (única página sin foto) pueda reservar // su espacio real sin hardcodear píxeles. useEffect(() => { const el = headerRef.current; if (!el) return; const update = () => { const h = el.offsetHeight; setHeaderH(h); document.documentElement.style.setProperty("--hdr-h", h + "px"); }; update(); const ro = new ResizeObserver(update); ro.observe(el); window.addEventListener("resize", update); return () => { ro.disconnect(); window.removeEventListener("resize", update); }; }, []); // Cierra el menú al cambiar de página useEffect(() => { setMenuOpen(false); }, [page]); // Bloquea scroll del body cuando el menú está abierto useEffect(() => { document.body.style.overflow = menuOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [menuOpen]); // Regla fija, sin scroll ni detección de fondo: header transparente y // logo/texto BLANCO en todas las páginas. Única excepción: la ficha de // producto (sin foto de fondo), donde va oscuro. El menú/drawer lateral // siempre es oscuro también (fondo crema propio, más abajo). // Asumo que la ficha de producto usa page==="ficha" (nombre del archivo // ficha.jsx) — si el valor real es otro, dímelo y cambio esta única línea. const isFicha = page === "ficha"; const onDark = !isFicha; const showSpacer = isFicha; const navItems = [ { id: "home", label: "Inicio" }, { id: "catalog", label: "Catálogo" }, { id: "cursos", label: "Cursos" }, { id: "showroom", label: "Showroom" }, { id: "clientes", label: "Clientes" }, { id: "taller", label: "Taller" }, ]; return ( <>
{/* El header es fixed y ahora SIEMPRE transparente. Solo reservamos su altura real (empujamos el contenido) en páginas SIN foto arriba (dark=false) — ahí no hay nada que "integrar", así que evitamos que tape el primer texto/breadcrumb. En páginas con foto (dark=true: home, banner de categoría) el header flota superpuesto a propósito. */} {showSpacer &&