/* Main site navigation — used on index, indexv2, contact, code-inwisselen, the 3 legal pages under /overig, and the /check// landing pages. Props: heroStyle — 'dark' (default) or 'light'. 'light' inverts colours for hero-light pages. isMobile — boolean from useWindowWidth(); toggles desktop links vs hamburger. activePage — 'contact' | 'code-inwisselen' | 'home' | a CHECKS_MENU slug like 'rdw'. Highlights the matching link. basePath — prepend for pages in subdirectories. '' for root, '../' for /overig/*, '../../' for /check//. Defaults to ''. Depends on: Stars (components/Stars.jsx), useWindowWidth (js/window-width.js). */ const CHECKS_MENU = [ { slug: 'rdw', label: 'RDW Check', desc: 'Officiële RDW gegevens' }, { slug: 'kilometer', label: 'Kilometer Check', desc: 'Tellerstand & afwijkingen' }, { slug: 'nap', label: 'NAP Check', desc: 'Nationale Auto Pas verificatie' }, { slug: 'schade', label: 'Schade Check', desc: 'Schade & total-loss historie' }, { slug: 'import', label: 'Import Check', desc: 'Geïmporteerde voertuigen' }, { slug: 'marktplaats', label: 'Marktplaats Check', desc: 'Veilig kopen van particulier' }, { slug: 'motoren', label: 'Motor Check', desc: 'Kentekencheck voor motoren' }, { slug: 'campers', label: 'Camper Check', desc: 'Camper & motorhome' }, { slug: 'bedrijfswagens', label: 'Bedrijfswagen Check', desc: 'Bestelbus & grijs kenteken' }, { slug: 'elektrische-auto', label: 'Elektrische Auto', desc: 'EV — accu, range, label' }, { slug: 'vrachtwagens', label: 'Vrachtwagen Check', desc: 'N2/N3 & zware bedrijfswagens' }, ]; function Nav({ heroStyle = 'dark', isMobile = false, activePage, basePath = '' }) { const { useState, useEffect, useRef } = React; const dark = heroStyle !== 'light'; const navW = useWindowWidth(); const isTiny = navW < 350; const showBrandWordmark = !isMobile || navW >= 520; const [dropOpen, setDropOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const dropRef = useRef(null); useEffect(() => { function outside(e) { if (dropRef.current && !dropRef.current.contains(e.target)) setDropOpen(false); } document.addEventListener('mousedown', outside); return () => document.removeEventListener('mousedown', outside); }, []); const lc = dark ? 'rgba(255,255,255,0.82)' : '#0F1F5C'; const navLinkStyle = { color: lc, fontWeight: 500, fontSize: 14, textDecoration: 'none', padding: '6px 12px', borderRadius: 8, transition: 'background .15s', }; const activeLinkStyle = { ...navLinkStyle, color: '#FFD12E', fontWeight: 700 }; const isActive = (page) => activePage === page; const indexHref = basePath || '/'; const codeHref = basePath + 'code-inwisselen'; const contactHref = basePath + 'contact'; return ( ); }