/* global React, ReactDOM, LangContext, useLang, t, Mark, Icon, Arrow, Chev, Badge, NAV, SOLUTIONS, SOCIALS */ const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React; /* ============================================================= LangProvider — persists EN / ES / AR across pages ============================================================= */ function LangProvider({ children }) { const [lang, setLangState] = useStateC(() => { try {return localStorage.getItem('bci-lang') || 'en';} catch (e) {return 'en';} }); const setLang = (l) => { setLangState(l); try {localStorage.setItem('bci-lang', l);} catch (e) {} }; useEffectC(() => { document.body.setAttribute('dir', lang === 'ar' ? 'rtl' : 'ltr'); document.documentElement.setAttribute('lang', lang); }, [lang]); return {children}; } /* ============================================================= LanguageSelectorDropdown — globe trigger + dropdown list dark = on navy strip | light = on white/paper surface ============================================================= */ function LanguageSelectorDropdown({ dark }) { const { lang, setLang } = useLang(); const [open, setOpen] = useStateC(false); const [pos, setPos] = useStateC({ top: 0, right: 0 }); const ref = useRefC(null); const panelRef = useRefC(null); const languages = [ { code: 'en', label: 'English', short: 'EN' }, { code: 'es', label: 'Español', short: 'ES' }, { code: 'ar', label: 'العربية', short: 'ع' }]; const current = languages.find((l) => l.code === lang) || languages[0]; /* Close on outside click — ignore clicks inside the trigger OR the portalled panel */ useEffectC(() => { const handler = (e) => { const inTrigger = ref.current && ref.current.contains(e.target); const inPanel = panelRef.current && panelRef.current.contains(e.target); if (!inTrigger && !inPanel) setOpen(false); }; document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }, []); /* Compute portal position from trigger rect each time we open */ const handleToggle = () => { if (!open && ref.current) { const r = ref.current.getBoundingClientRect(); setPos({ top: r.bottom + 6, right: window.innerWidth - r.right }); } setOpen((o) => !o); }; const borderCol = dark ? 'rgba(255,255,255,0.22)' : 'var(--bci-hairline-light)'; const fgTrigger = dark ? '#fff' : 'var(--bci-navy)'; const fgMuted = dark ? 'rgba(255,255,255,0.55)' : 'var(--bci-steel)'; const bgDropdown = dark ? '#062338' : '#fff'; const bgHover = dark ? 'rgba(255,255,255,0.07)' : 'var(--bci-concrete)'; return (
{/* Trigger button */} {/* Dropdown — portalled to so it escapes overflow:hidden parents */} {open && ReactDOM.createPortal(
{languages.map((l) => { const active = l.code === lang; return ( ); })}
, document.body )}
); } /* ============================================================= MegaHeader ============================================================= */ function MegaHeader({ active }) { const { lang } = useLang(); const { isMobile } = useViewport(); const [prog, setProg] = useStateC(0); const [mega, setMega] = useStateC(false); const [drawer, setDrawer] = useStateC(false); useEffectC(() => { const START = 64,END = 230; let raf = null; const compute = () => { const y = window.scrollY; setProg(Math.min(1, Math.max(0, (y - START) / (END - START)))); raf = null; }; const onScroll = () => {if (raf == null) raf = requestAnimationFrame(compute);}; compute(); window.addEventListener('scroll', onScroll, { passive: true }); return () => {window.removeEventListener('scroll', onScroll);if (raf) cancelAnimationFrame(raf);}; }, []); useEffectC(() => { if (!drawer) return; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => {document.body.style.overflow = prev;}; }, [drawer]); useEffectC(() => {if (!isMobile && drawer) setDrawer(false);}, [isMobile, drawer]); const isAr = lang === 'ar'; const ease = prog * prog * (3 - 2 * prog); const barH = 86 - 22 * ease; const stripH = 38 * (1 - ease); const logoScale = 1 - 0.18 * ease; const fg = 'var(--bci-navy)'; const mBarH = isMobile ? 62 : barH; const mLogoScale = isMobile ? 0.9 : logoScale; return (
setMega(false)} style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200, fontFamily: 'var(--ff-sans)' }}> {/* Top utility strip — desktop only */} {!isMobile &&
{/* Left: brand credential + email */}
{t(lang, e.currentTarget.style.color = 'var(--bci-green-400)'} onMouseOut={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.72)'}> info@bcisaudi.com
{/* Right: location · phone · language */}
{t(lang, 'Dammam, KSA', 'الدمام، السعودية', 'Dammam, Arabia Saudita')} e.currentTarget.style.color = 'var(--bci-green-400)'} onMouseOut={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.88)'}> +966 59 312 0221
} {/* Main bar */}
BCI — Building Chemistry Industry {!isMobile && } {!isMobile ?
{t(lang, 'Get a Quote', 'اطلب عرض سعر', 'Solicitar Cotización')}
: }
{isMobile && setDrawer(false)} active={active} />}
); } /* ============================================================= MobileMenu ============================================================= */ function MobileMenu({ open, onClose, active }) { const { lang } = useLang(); const isAr = lang === 'ar'; const [solOpen, setSolOpen] = useStateC(false); const linkBase = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '17px 4px', textDecoration: 'none', fontFamily: isAr ? 'var(--ff-arabic)' : 'var(--ff-sans)', fontSize: 19, fontWeight: 600, borderBottom: '1px solid var(--bci-hairline-light)', flexDirection: isAr ? 'row-reverse' : 'row' }; return ( <>