/* global React, useLang, t, Icon, Badge, Arrow, Chev, SOLUTIONS, PROJECTS */ const { useState: useState_p, useRef: useRef_p, useEffect: useEffect_p } = React; // Reveal a section's children once it scrolls into view (one-shot, respects reduced-motion). // Uses a scroll/rect check (robust everywhere) with IntersectionObserver as an enhancement. function useInView(margin) { const ref = useRef_p(null); const [inView, setInView] = useState_p(false); useEffect_p(() => { const el = ref.current; if (!el) return; const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduced) { setInView(true); return; } const m = margin || 80; let done = false; let rafId = null; const reveal = () => { if (!done) { done = true; setInView(true); cleanup(); } }; const check = () => { if (done || !ref.current) return false; const r = ref.current.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; if (r.top < vh - m && r.bottom > 0) { reveal(); return true; } return false; }; // rAF polling loop — robust where scroll events / IO callbacks aren't delivered. const loop = () => { if (done) return; if (!check()) rafId = requestAnimationFrame(loop); }; let obs; if (typeof IntersectionObserver !== 'undefined') { obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) reveal(); }); }, { threshold: 0.1 }); obs.observe(el); } function cleanup() { if (obs) obs.disconnect(); if (rafId) cancelAnimationFrame(rafId); window.removeEventListener('scroll', check, true); window.removeEventListener('resize', check); } window.addEventListener('scroll', check, true); window.addEventListener('resize', check); rafId = requestAnimationFrame(loop); return cleanup; }, []); return [ref, inView]; } // ---------- 03 · Solutions overview (home) ---------- function SolutionsOverview() { const { lang } = useLang(); const isAr = lang === 'ar'; const [gridRef, inView] = useInView(0.12); const [headRef, headIn] = useInView(0.12); return (
{t(lang, 'Solutions', 'الحلول', 'Soluciones')}

{t(lang, <>Engineered Solutions For
Demanding Projects, <>تسعة خطوط حلول.
معيار واحد., <>Soluciones de Ingeniería Para
Proyectos Exigentes)}

{t(lang, 'All solutions', 'كل الحلول', 'Todas las soluciones')}
{SOLUTIONS.slice(0, 8).map((s, i) => (
))}
); } function SolutionCard({ s }) { const { lang } = useLang(); const isAr = lang === 'ar'; const [hover, setHover] = useState_p(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', overflow: 'hidden', background: '#fff', border: `1px solid ${hover ? 'var(--bci-navy)' : 'var(--bci-hairline-light)'}`, borderRadius: 2, padding: 28, transition: 'border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease', boxShadow: hover ? 'var(--shadow-md)' : 'none', transform: hover ? 'translateY(-3px)' : 'translateY(0)', display: 'flex', flexDirection: 'column', minHeight: 268, textDecoration: 'none', textAlign: isAr ? 'right' : 'left' }}> {/* top accent rule that grows on hover */}

{(s[lang] || s.en).name}

{(s[lang] || s.en).tagline}

{t(lang, 'Explore', 'استكشف', 'Explorar')}
); } // A CTA card that sits at the end of the solutions grid so the set never // reads as a closed list — it points to the full Solutions page. function ViewAllSolutionsCard() { const { lang } = useLang(); const isAr = lang === 'ar'; const [hover, setHover] = useState_p(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', overflow: 'hidden', background: 'var(--bci-navy)', border: '1px solid var(--bci-navy)', borderRadius: 2, padding: 28, transition: 'box-shadow 200ms ease, transform 200ms ease', boxShadow: hover ? 'var(--shadow-md)' : 'none', transform: hover ? 'translateY(-3px)' : 'translateY(0)', display: 'flex', flexDirection: 'column', minHeight: 268, textDecoration: 'none', textAlign: isAr ? 'right' : 'left' }}>

{t(lang, 'The Full Range', 'النطاق الكامل', 'La Gama Completa')}

{t(lang, '320+ products across our complete line of construction-chemical systems.', '+320 منتجاً عبر مجموعتنا الكاملة من أنظمة كيمياء البناء.', 'Más de 320 productos en nuestra línea completa de sistemas químicos para la construcción.')}

{t(lang, 'View all solutions', 'كل الحلول', 'Ver todo')}
); } // ---------- 04 · Projects (home preview, data-driven) ---------- function Projects({ limit }) { const { lang } = useLang(); const isAr = lang === 'ar'; const list = limit ? PROJECTS.slice(0, limit) : PROJECTS; const [headRef, headIn] = useInView(0.12); const [gridRef, gridIn] = useInView(0.12); return (
{t(lang, 'Projects', 'المشاريع', 'Proyectos')}

{t(lang, 'Where BCI Solutions Perform', 'حيث تثبت حلول BCI جدارتها', 'Donde Rinden las Soluciones BCI')}

{t(lang, 'View all projects', 'كل المشاريع', 'Ver todos los proyectos')}
{list.map((p, i) =>
)}
); } function ProjectCard({ p }) { const { lang } = useLang(); const isAr = lang === 'ar'; const [hover, setHover] = useState_p(false); // Pull a scale figure off the system string for the caption on clean photos. const parts = (p.sys[lang] || p.sys.en || '').split('·').map((s) => s.trim()).filter(Boolean); const system = parts.length >= 2 ? parts.slice(0, -1).join(' · ') : p.sys[lang] || p.sys.en; const scale = parts.length >= 2 ? parts[parts.length - 1] : null; return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ textDecoration: 'none', display: 'block', position: 'relative', aspectRatio: '3 / 2', background: p.swatch, borderRadius: 2, overflow: 'hidden', border: '1px solid var(--bci-hairline-light)', boxShadow: hover ? 'var(--shadow-md)' : 'none', transform: hover ? 'translateY(-3px)' : 'translateY(0)', transition: 'box-shadow 200ms ease, transform 200ms ease' }}> {p.title[lang] {!p.composed &&
{p.sector[lang] || p.sector.en}

{p.title[lang] || p.title.en}

{p.loc[lang] || p.loc.en} {scale && {scale}}

{system}

}
); } Object.assign(window, { SolutionsOverview, SolutionCard, ViewAllSolutionsCard, Projects, ProjectCard });