// ─── SHARED STYLES & COMPONENTS ──────────────────────────────────────────── // Matches Spraakmaker Media design system const SPRAAKMAKER_TOKENS = { bg: '#F7F8FC', bgAlt: '#FFFFFF', fg: '#0A0920', muted: '#5C5B7A', border: '#DDDDF0', card: '#FFFFFF', accent: '#10069F', accentLight: '#EEEEFF', blush: '#E4E2F2', blushSoft: '#F1F0FA', blushDeep: '#C9C6E0', ink: '#0A0920', }; // Hook: mobile breakpoint function useIsMobile(bp = 768) { const [m, setM] = React.useState(typeof window !== 'undefined' ? window.innerWidth < bp : false); React.useEffect(() => { const o = () => setM(window.innerWidth < bp); window.addEventListener('resize', o); return () => window.removeEventListener('resize', o); }, [bp]); return m; } // ── Service label lookup ───────────────────────────────────────────────── function getServiceLabel(slug) { const found = (window.SPRAAKMAKER_SERVICES || []).find(s => s.slug === slug); return found ? found.label : slug; } // ── Top nav (matches main site) ────────────────────────────────────────── function SiteNav({ scrolled }) { const isMobile = useIsMobile(1024); const [open, setOpen] = React.useState(false); const items = [ { href: '/cases/archive.html', label: 'Podcasts' }, { href: '/Spraakmaker Media.html#services', label: 'Wat we doen' }, { href: '/Spraakmaker Media.html#process', label: 'Proces' }, { href: '/Podcast Studio Amsterdam.html', label: 'Studio' }, { href: '/Spraakmaker Media.html#contact', label: 'Contact' }, ]; return ( ); } // ── Footer (slim version) ───────────────────────────────────────────────── function SiteFooter() { const isMobile = useIsMobile(); return ( ); } // Export globals Object.assign(window, { SPRAAKMAKER_TOKENS, useIsMobile, getServiceLabel, SiteNav, SiteFooter, });