/* SP Valets — Navbar. Desktop: floating pill on scroll + mega-menu. Mobile: full-screen dark menu. */ const INSTAGRAM_URL_NAV = "https://www.instagram.com/sp__valets/"; const SERVICE_MENU = [ { group: "Valets", items: [ { icon: "auto_fix", label: "Mini Valet", price: "£20", bg: "#2A1114", iconColor: "#E31B23" }, { icon: "directions_car", label: "4x4s & Larger", price: "from £12", bg: "#2A1114", iconColor: "#E31B23" }, ], }, { group: "Single services", items: [ { icon: "cleaning_services", label: "Interior", price: "£10", bg: "#2A1114", iconColor: "#E31B23" }, { icon: "local_car_wash", label: "Exterior", price: "£10", bg: "#2A1114", iconColor: "#E31B23" }, { icon: "shield", label: "Exterior Protection", price: "from £5", bg: "#2A1114", iconColor: "#E31B23" }, ], }, ]; const SECONDARY_LINKS = ["Home", "Gallery", "Contact"]; function Navbar({ onBook, onNav, active = "Home" }) { const { Button } = window.ReviveRefineDesignSystem_38ca5a; const links = ["Home", "Services", "Contact", "Gallery"]; const [scrolled, setScrolled] = React.useState(false); const [hoveredLink, setHoveredLink] = React.useState(null); const [megaOpen, setMegaOpen] = React.useState(false); const [mobileOpen, setMobileOpen] = React.useState(false); const megaTimeout = React.useRef(null); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); React.useEffect(() => { document.body.style.overflow = mobileOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [mobileOpen]); const handleNav = (page) => { setMobileOpen(false); onNav && onNav(page); }; const handleBook = () => { setMobileOpen(false); window.open(INSTAGRAM_URL_NAV, "_blank"); }; const openMega = () => { clearTimeout(megaTimeout.current); setMegaOpen(true); }; const closeMega = () => { megaTimeout.current = setTimeout(() => setMegaOpen(false), 120); }; return ( <>

{ e.preventDefault(); handleNav("Home"); }} style={{ display:"flex",alignItems:"center" }}>

{mobileOpen && (

{SERVICE_MENU.map((group) => (

{group.group}

{group.items.map((item, i) => ( { e.preventDefault(); handleNav("Services"); }} style={{ display:"flex",alignItems:"center",gap:14,padding:"12px 20px",textDecoration:"none",borderBottom:i

{item.icon}

{item.label} {item.price} ))}

))}

{SECONDARY_LINKS.map((l) => ( { e.preventDefault(); handleNav(l); }} style={{ display:"block",padding:"13px 20px",fontSize:16,fontWeight:400,color:"#FFFFFF",textDecoration:"none",fontFamily:"var(--font-body)" }}>{l} ))}

call Call us

)} ); } window.RRNavbar = Navbar;