/* global React */ /* ============================================================ Nav — fixed top bar. Matches the design system reference: three-column grid, mark + mono nav + CTA. Background turns translucent on scroll. Active section is auto-tracked via IntersectionObserver. ============================================================ */ function Nav({ accent, sectionsOn }) { const allItems = [ { id: "studio", label: "Approach" }, { id: "services", label: "What we build" }, { id: "process", label: "Process" }, { id: "work", label: "Work" }, { id: "contact", label: "Contact" }, ]; const items = allItems.filter(it => sectionsOn[it.id] !== false); const [scrolled, setScrolled] = React.useState(false); const [active, setActive] = React.useState(null); const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); // Close the mobile menu on Escape or when the viewport grows past mobile. // While open, lock background scroll so the page doesn't move behind it. React.useEffect(() => { if (!menuOpen) return; const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); }; const onResize = () => { if (window.innerWidth > 860) setMenuOpen(false); }; window.addEventListener("keydown", onKey); window.addEventListener("resize", onResize); const prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("resize", onResize); document.body.style.overflow = prevOverflow; }; }, [menuOpen]); React.useEffect(() => { const obs = new IntersectionObserver((entries) => { // Pick the entry highest on screen that's intersecting const visible = entries.filter(e => e.isIntersecting) .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top); if (visible[0]) setActive(visible[0].target.id); }, { rootMargin: "-40% 0px -55% 0px", threshold: 0 }); items.forEach((it) => { const el = document.getElementById(it.id); if (el) obs.observe(el); }); return () => obs.disconnect(); }, [items.map(i => i.id).join(",")]); const monoStyle = { fontFamily: "'Geist Mono', ui-monospace, monospace", fontSize: 11.5, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", textDecoration: "none", }; function scrollTo(e, id) { e.preventDefault(); setMenuOpen(false); const el = document.getElementById(id); if (el) { const top = el.getBoundingClientRect().top + window.scrollY - 12; if (window.smoothScrollTo) window.smoothScrollTo(top); else window.scrollTo({ top, behavior: "smooth" }); } } return (

{/* MOBILE MENU SHEET */}

); } window.Nav = Nav;