/* ============================================================================ VELDRA · Legal page shell (Phase 4 · Approach C — chrome i18n only) - Top nav: lang toggle (EN · ES · 中) flips chrome strings. - Body of each legal page stays English (legally controlling text). - In ES / ZH a controlling-language notice appears above the body. ============================================================================ */ const LegalNav = () => { const [lang, setLangState] = React.useState( (typeof window !== "undefined" && window.getLang && window.getLang()) || "en" ); React.useEffect(() => { const onLang = (e) => setLangState((e && e.detail && e.detail.lang) || window.getLang()); window.addEventListener("__lang_changed", onLang); return () => window.removeEventListener("__lang_changed", onLang); }, []); const switchLang = (l) => { if (window.setLang) window.setLang(l); }; const langBtn = (code, label) => ( ); return ( ); }; const LegalFooter = () => { const [, setTick] = React.useState(0); React.useEffect(() => { const onLang = () => setTick(x => x + 1); window.addEventListener("__lang_changed", onLang); return () => window.removeEventListener("__lang_changed", onLang); }, []); return ( ); }; const FootCol = ({ title, items }) => (
{title}
); /* Sticky-TOC active-section tracking */ const useActiveSection = (ids) => { const [active, setActive] = React.useState(ids[0] || ""); React.useEffect(() => { const obs = new IntersectionObserver((entries) => { const visible = entries.filter(e => e.isIntersecting); if (visible.length > 0) { const top = visible.reduce((a, b) => a.boundingClientRect.top < b.boundingClientRect.top ? a : b ); setActive(top.target.id); } }, { rootMargin: "-20% 0px -70% 0px", threshold: 0 }); ids.forEach(id => { const el = document.getElementById(id); if (el) obs.observe(el); }); return () => obs.disconnect(); }, [ids.join("|")]); return active; }; /* Controlling-language notice — only renders when lang !== "en". */ const ControllingNotice = () => { const [lang, setLangState] = React.useState( (typeof window !== "undefined" && window.getLang && window.getLang()) || "en" ); React.useEffect(() => { const onLang = () => setLangState(window.getLang()); window.addEventListener("__lang_changed", onLang); return () => window.removeEventListener("__lang_changed", onLang); }, []); if (lang === "en") return null; return (
▸ {t("legal.controlling.title")}

{t("legal.controlling.body")}

); }; const LegalShell = ({ title, eyebrow, updated, toc, children }) => { // Re-render whole shell on lang change so eyebrow/title/toc t() calls update const [, setTick] = React.useState(0); React.useEffect(() => { const onLang = () => setTick(x => x + 1); window.addEventListener("__lang_changed", onLang); return () => window.removeEventListener("__lang_changed", onLang); }, []); const ids = toc.map(([id]) => id); const active = useActiveSection(ids); return ( <>
{/* Hero */}
{t(`legal.eyebrow.${eyebrow}`)}

{t(`legal.title.${eyebrow}`)}

{t("legal.updated_label")} · {updated}

{/* Two-column body */}
{/* Sticky TOC */} {/* Body — English text remains controlling. ES/ZH show notice above. */}
{children}
{/* Body styles for legal long-form copy */} ); }; window.LegalShell = LegalShell; window.LegalNav = LegalNav; window.LegalFooter = LegalFooter;