/* global React */
const { useEffect: useEffectLang, useState: useStateLang, useRef: useRefLang, createContext: createCtxLang, useContext: useCtxLang } = React;
/* ----------------------------------------------------------------- */
/* ASPACE — Language Switcher */
/* - Curated segmented capsule with sliding pill */
/* - Persists choice and broadcasts events */
/* ----------------------------------------------------------------- */
const LANG_KEY = 'aspace.lang';
function readLang() {
try { return localStorage.getItem(LANG_KEY) || 'en'; } catch { return 'en'; }
}
function writeLang(l) {
try { localStorage.setItem(LANG_KEY, l); } catch {}
document.documentElement.setAttribute('lang', l);
window.dispatchEvent(new CustomEvent('aspace:lang', { detail: { lang: l } }));
}
const LangCtx = createCtxLang({ lang: 'en', setLang: () => {} });
function LangProvider({ children }) {
const [lang, setLangState] = useStateLang(() => readLang());
const [transitioning, setTransitioning] = useStateLang(false);
useEffectLang(() => {
document.documentElement.setAttribute('lang', lang);
const onExternal = (e) => { if (e.detail?.lang && e.detail.lang !== lang) setLangState(e.detail.lang); };
window.addEventListener('aspace:lang', onExternal);
return () => window.removeEventListener('aspace:lang', onExternal);
}, [lang]);
const setLang = (l) => {
if (l === lang) return;
setTransitioning(true);
// Subtle global breath — fade body slightly while we swap
document.documentElement.style.setProperty('--lang-fade', '0.35');
setTimeout(() => {
writeLang(l);
setLangState(l);
document.documentElement.style.setProperty('--lang-fade', '1');
setTimeout(() => setTransitioning(false), 480);
}, 180);
};
// NOTE: We do NOT wrap children in a styled div here.
// A wrapper with `filter` or `transform` creates a new containing block
// that breaks `position: fixed` for every descendant (AI trigger, contact
// panel, cookie banner, header). The lang fade is applied via the
// `--lang-fade` CSS variable on , which any consumer can opt into.
return (
{children}
);
}
function useLang() { return useCtxLang(LangCtx); }
/* ----------------------------------------------------------------- */
/* Switcher — pill segmented control */
/* variant: 'header' (light glass) | 'header-dark' | 'menu' */
/* ----------------------------------------------------------------- */
function LangSwitcher({ variant = 'header' }) {
const { lang, setLang } = useLang();
const ref = useRefLang(null);
const [magnet, setMagnet] = useStateLang({ x: 0, y: 0 });
const [hover, setHover] = useStateLang(false);
const onMove = (e) => {
const el = ref.current; if (!el) return;
const r = el.getBoundingClientRect();
setMagnet({ x: (e.clientX - (r.left + r.width/2)) * 0.12, y: (e.clientY - (r.top + r.height/2)) * 0.12 });
};
const onLeave = () => { setMagnet({ x: 0, y: 0 }); setHover(false); };
const onDark = variant === 'header-dark';
const isMenu = variant === 'menu';
// Bigger surface in menu, compact in header
const PADDING_X = isMenu ? 6 : 4;
const ITEM_W = isMenu ? 56 : 38;
const ITEM_H = isMenu ? 40 : 30;
const FONT_SIZE = isMenu ? 13 : 11;
const items = ['EN', 'NL'];
const idx = lang === 'nl' ? 1 : 0;
const baseBg = onDark
? 'rgba(255,255,255,0.06)'
: 'rgba(255,255,255,0.55)';
const hoverBg = onDark
? 'rgba(255,255,255,0.10)'
: 'rgba(255,255,255,0.78)';
const borderColor = onDark
? 'rgba(255,255,255,0.16)'
: 'rgba(10,10,11,0.10)';
const inkActive = onDark ? '#0A0A0B' : '#fff';
const inkInactive = onDark ? 'rgba(255,255,255,0.85)' : 'rgba(10,10,11,0.6)';
const pillBg = onDark ? '#F4F2EC' : '#0A0A0B';
return (
setHover(true)}
role="group"
aria-label="Language"
style={{
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
padding: PADDING_X,
borderRadius: 999,
background: hover ? hoverBg : baseBg,
backdropFilter: 'blur(14px) saturate(140%)',
WebkitBackdropFilter: 'blur(14px) saturate(140%)',
border: `1px solid ${borderColor}`,
boxShadow: hover
? `0 8px 24px -10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.5), 0 0 0 3px rgba(0,194,255,0.08)`
: `0 4px 14px -8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.4)`,
transform: `translate(${magnet.x}px, ${magnet.y}px)`,
transition: 'transform 360ms cubic-bezier(0.22,1.2,0.36,1), background 320ms ease, box-shadow 360ms ease',
cursor: 'pointer',
}}
>
{/* Sliding active pill */}
{items.map((it, i) => (
))}
);
}
window.LangProvider = LangProvider;
window.LangSwitcher = LangSwitcher;
window.useLang = useLang;