/* Nav.jsx — sticky nav for Cawi Media (DE/EN aware) */ const Nav = ({ variant = 'hero', current = '' }) => { const [scrolled, setScrolled] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); /* ─── i18n: detect language from URL ─── */ /* Vercel strips trailing slashes, so '/en' and '/en/' must both count as EN. */ const isEn = typeof window !== 'undefined' && (window.location.pathname === '/en' || window.location.pathname.startsWith('/en/')); const lang = isEn ? 'en' : 'de'; const T = { de: { ariaNav: 'Hauptnavigation', ariaLogo: 'Cawi Media — Startseite', ariaMenuOpen: 'Menü öffnen', ariaMenuClose: 'Menü schließen', ariaLang: 'Sprache', kiAudit: 'KI-Audit', transformation: 'Transformation', ueberUns: 'Über uns', kontakt: 'Kontakt', cta: 'Gespräch buchen', }, en: { ariaNav: 'Main navigation', ariaLogo: 'Cawi Media — Home', ariaMenuOpen: 'Open menu', ariaMenuClose: 'Close menu', ariaLang: 'Language', kiAudit: 'AI Audit', transformation: 'Transformation', ueberUns: 'About', kontakt: 'Contact', cta: 'Book a call', }, }; const t = T[lang]; /* Asset path prefix: EN-pages live in /en/, so they need '../' */ const assetPrefix = isEn ? '../' : ''; /* Slug-aware language toggle target */ const path = typeof window !== 'undefined' ? window.location.pathname : '/'; const slug = (() => { const parts = path.split('/').filter(Boolean); if (isEn) { /* /en/ or /en/ */ const s = parts[1]; return s || 'index.html'; } return parts[0] || 'index.html'; })(); const toggleHref = isEn ? '/' + (slug === 'index.html' ? '' : slug) : '/en/' + (slug === 'index.html' ? '' : slug); const otherLangLabel = isEn ? 'DE' : 'EN'; React.useEffect(() => { if (variant !== 'hero') { setScrolled(true); return; } const onScroll = () => setScrolled(window.scrollY > 12); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, [variant]); React.useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [menuOpen]); const navStyle = { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100, transition: 'background 220ms var(--ease-out), border-color 220ms var(--ease-out), backdrop-filter 220ms var(--ease-out)', background: menuOpen ? '#0c0e13' : (scrolled ? 'rgba(255,255,255,0.9)' : 'transparent'), backdropFilter: menuOpen ? 'none' : (scrolled ? 'saturate(180%) blur(14px)' : 'none'), WebkitBackdropFilter: menuOpen ? 'none' : (scrolled ? 'saturate(180%) blur(14px)' : 'none'), borderBottom: menuOpen ? '1px solid rgba(255,255,255,0.08)' : (scrolled ? '1px solid var(--border-hairline)' : '1px solid transparent'), }; const rowStyle = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72, }; const dark = menuOpen || (variant === 'hero' && !scrolled); const textColor = dark ? '#fff' : 'var(--fg-1)'; const linkStyle = { fontSize: 14, fontWeight: 500, color: textColor, letterSpacing: '-0.005em', whiteSpace: 'nowrap', transition: 'opacity 140ms var(--ease-out)', }; const logoStyle = { display: 'inline-flex', alignItems: 'center' }; const logoImgStyle = { height: 28, width: 'auto', display: 'block', transition: 'opacity 220ms var(--ease-out)' }; const ctaClass = dark ? 'btn btn-white btn-sm' : 'btn btn-sm'; const navItem = (href, label, key) => { const active = current === key; return ( {label} ); }; return ( ); }; window.Nav = Nav;