/* global React */
const { useState, useEffect, useRef } = React;
function LangToggle() {
const { lang, setLang } = window.useLang();
const options = [
{ code: 'ar', label: 'AR' },
{ code: 'en', label: 'EN' },
];
return (
{options.map((opt, i) => (
{i < options.length - 1 && (
·
)}
))}
);
}
function NavBar() {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const [hideNav, setHideNav] = useState(false);
const lastScrollY = useRef(0);
/* Scroll: frosted glass + hide-on-scroll-down */
useEffect(() => {
const onScroll = () => {
const y = window.scrollY;
setScrolled(y > 20);
if (!menuOpen) {
const delta = y - lastScrollY.current;
if (Math.abs(delta) > 6) {
setHideNav(delta > 0 && y > 120);
}
}
lastScrollY.current = y;
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, [menuOpen]);
/* Body scroll lock when menu open */
useEffect(() => {
document.body.style.overflow = menuOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [menuOpen]);
/* Escape key closes menu */
useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
const { theme } = window.useTheme();
const ThemeToggle = window.ThemeToggle;
const t = window.useCopy();
const links = [
{ label: t.nav.cases, href: '#sila-case' },
{ label: t.nav.services, href: '#tier-1' },
{ label: t.nav.doctrine, href: '#doctrine' },
{ label: t.nav.contact, href: '#final-cta' },
];
const closeMenu = () => setMenuOpen(false);
const bgSolid = theme === 'light' ? 'rgba(255,255,255,0.97)' : 'rgba(9,9,11,0.97)';
const bgScrolled = theme === 'light' ? 'rgba(255,255,255,0.90)' : 'rgba(9,9,11,0.88)';
const WA = ({ size = 15 }) => (
);
return (
<>
{/* ── Header bar ── */}
{/* ── Mobile fullscreen overlay ── */}
{menuOpen && (
)}
);
}
Object.assign(window, { NavBar, LangToggle });