/* global React */
const { useState, useEffect, useRef, createContext, useContext } = React;
// ---------------- Lang Context ----------------
const LangContext = createContext({ lang: 'en', setLang: () => {} });
const useLang = () => useContext(LangContext);
const t = (lang, en, ar, es) => {
if (lang === 'ar') return ar;
if (lang === 'es') return es != null ? es : en;
return en;
};
// ---------------- Viewport hook ----------------
// Re-renders the calling component on resize. Breakpoints:
// phone < 640 tablet 640–1023 desktop ≥ 1024
function useViewport() {
const [w, setW] = useState(() => (typeof window !== 'undefined' ? window.innerWidth : 1280));
useEffect(() => {
let raf = null;
const onResize = () => {
if (raf != null) return;
raf = requestAnimationFrame(() => { setW(window.innerWidth); raf = null; });
};
window.addEventListener('resize', onResize, { passive: true });
window.addEventListener('orientationchange', onResize);
return () => {
window.removeEventListener('resize', onResize);
window.removeEventListener('orientationchange', onResize);
if (raf) cancelAnimationFrame(raf);
};
}, []);
return { w, isPhone: w < 640, isTablet: w >= 640 && w < 1024, isMobile: w < 1024, isDesktop: w >= 1024 };
}
// ---------------- Scroll reveal ----------------
// Fires once when an element scrolls into view; respects reduced-motion.
function useInView(opts) {
const o = opts || {};
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduced) { setInView(true); return; }
const margin = o.margin != null ? o.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 - margin && 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: o.threshold != null ? o.threshold : 0.14, rootMargin: o.rootMargin || '0px 0px -8% 0px' });
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];
}
// Inline-style generator for a fade + rise reveal.
function revealStyle(inView, delay, y, dur) {
const d = delay || 0;
const dist = y != null ? y : 26;
const ms = dur || 680;
return {
opacity: inView ? 1 : 0,
transform: inView ? 'none' : `translateY(${dist}px)`,
transition: `opacity ${ms}ms cubic-bezier(.16,.84,.34,1) ${d}ms, transform ${ms}ms cubic-bezier(.16,.84,.34,1) ${d}ms`,
willChange: 'opacity, transform'
};
}
// ---------------- Count-up number ----------------
// Animates an integer from `start` to `value` once it (or its trigger) is active.
function CountUp({ value, start = 0, suffix = '', prefix = '', duration = 1300, active = true, group = true, style }) {
const [n, setN] = useState(() => {
const reduced = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
return reduced ? value : start;
});
const ran = useRef(false);
useEffect(() => {
if (!active || ran.current) return;
const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduced) { setN(value); return; }
ran.current = true;
let rafId = null;
const t0 = performance.now();
const tick = (now) => {
const p = Math.min((now - t0) / duration, 1);
const eased = 1 - Math.pow(1 - p, 3); // easeOutCubic
setN(Math.round(start + (value - start) * eased));
if (p < 1) rafId = requestAnimationFrame(tick);
};
rafId = requestAnimationFrame(tick);
return () => { if (rafId) cancelAnimationFrame(rafId); };
}, [active, value]);
return {prefix}{group ? n.toLocaleString('en-US') : n}{suffix};
}
// ---------------- Mark (interlocking squares) ----------------
function Mark({ size = 28, accent = 'var(--bci-green-500)', primary = 'var(--bci-navy)', stroke = 8 }) {
return (
);
}
// ---------------- Icon (lucide-style) ----------------
function Icon({ name, size = 18, stroke = 'currentColor', strokeWidth = 1.5 }) {
const paths = {
'arrow-right': <>,
'chevron-right': ,
'download': <>,
'shield-check': <>,
'droplets': <>,
'flask': <>,
'factory': <>,
'globe': <>,
'phone': ,
'mail': <>,
'message': ,
'map-pin': <>,
'linkedin': <>,
'youtube': <>,
'instagram': <>,
'x-twitter': ,
'facebook': ,
'whatsapp': <>,
'check': ,
'plus': <>,
'palm': <>,
'layers': <>,
'package': <>,
'grid': <>,
'layout-grid': <>,
'trowel': <>,
'minus-square': <>,
'file-text': <>,
'book': <>,
'clipboard': <>,
'award': <>,
'briefcase': <>,
'users': <>,
'arrow-up-right': <>,
'clock': <>,
'search': <>,
'filter': ,
'building': <>,
'send': <>,
'chevron-down': ,
'external-link': <>,
'heart': ,
'menu': <>,
'x': <>,
};
return (
);
}
// ---------------- Badge ----------------
function Badge({ variant = 'outline', children, icon }) {
const base = {
display: 'inline-flex', alignItems: 'center', gap: 6,
padding: '7px 12px', borderRadius: 2,
fontFamily: 'var(--ff-mono)', fontSize: 11,
letterSpacing: '0.12em', textTransform: 'uppercase',
fontWeight: 500,
};
const styles = {
filled: { ...base, background: 'var(--bci-green-500)', color: '#fff', border: '1px solid var(--bci-green-500)' },
outline: { ...base, background: 'transparent', color: 'var(--bci-navy)', border: '1px solid var(--bci-navy)' },
'outline-light': { ...base, background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,.5)' },
'green-soft': { ...base, background: 'var(--bci-green-50)', color: 'var(--bci-green-700)', border: '1px solid var(--bci-green-200)' },
'navy-soft': { ...base, background: 'var(--bci-navy-50)', color: 'var(--bci-navy)', border: '1px solid var(--bci-navy-100)' },
};
return {icon}{children};
}
// ---------------- ERP form submit ----------------
// The Contact/Career forms feed ERPNext's built-in *guest* web forms — no API
// key lives anywhere, and nothing is hosted in between. The ERP sends no CORS
// headers, but a `no-cors` urlencoded POST is a "simple request" the browser
// still delivers (we just can't read the response — so success is optimistic
// and we rely on the form's client-side `required` validation). Override the
// ERP origin with window.BCI_ERP_BASE if it ever changes.
const ERP_BASE = (typeof window !== 'undefined' && window.BCI_ERP_BASE) || 'https://apcv14.lynx.sa';
// webForm: the ERP Web Form *name* (e.g. 'contact-bci', 'job-application').
// data: { doctype, ...fields } keyed by the web form's field names.
async function submitErpWebForm(webForm, data) {
const body = new URLSearchParams({ web_form: webForm, data: JSON.stringify(data) });
await fetch(`${ERP_BASE}/api/method/frappe.website.doctype.web_form.web_form.accept`, {
method: 'POST',
mode: 'no-cors',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body,
});
}
if (typeof window !== 'undefined') window.submitErpWebForm = submitErpWebForm;
// ---------------- Arrow that flips in RTL ----------------
function Arrow({ size = 16 }) {
return ;
}
function Chev({ size = 14 }) {
return ;
}
Object.assign(window, { LangContext, useLang, useViewport, useInView, revealStyle, CountUp, t, Mark, Icon, Badge, Arrow, Chev });