const NAV_ITEMS = [ { id: "performance", label: "Performance" }, { id: "design", label: "Design" }, { id: "build", label: "The Build" }, { id: "cities", label: "Cities" }, { id: "sepang", label: "Sepang" }, { id: "gallery", label: "Gallery" }, { id: "specs", label: "Specs" }, ]; function Nav() { const [active, setActive] = useState(""); const [open, setOpen] = useState(false); // Hero video mute toggle. Video ALWAYS plays on loop — this only controls audio. // Default: muted (browsers require this for autoplay anyway). Click to unmute. const [muted, setMuted] = useState(() => { try { return localStorage.getItem("heroVideoMuted") !== "false"; } catch { return true; } }); // Sync any hero videos to current muted state. Video keeps playing on loop // regardless — we only flip the muted property. useEffect(() => { const sync = () => { document.querySelectorAll("[data-hero-video]").forEach((v) => { v.muted = muted; v.volume = muted ? 0 : 1; // belt-and-braces against stuck volume // Keep playing — never pause from mute control. if (v.paused) { const p = v.play(); if (p && p.catch) p.catch(() => {}); } }); }; sync(); // Re-sync when DOM changes (variant switches mount new video elements) const mo = new MutationObserver(sync); mo.observe(document.body, { childList: true, subtree: true }); return () => mo.disconnect(); }, [muted]); const toggleMute = () => { const next = !muted; setMuted(next); try { localStorage.setItem("heroVideoMuted", String(next)); } catch {} }; useEffect(() => { const ids = NAV_ITEMS.map((i) => i.id); const els = ids.map((id) => document.getElementById(id)).filter(Boolean); if (!els.length) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); }); }, { rootMargin: "-40% 0px -50% 0px", threshold: 0 } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); return ( ); } window.Nav = Nav;