// Shared small components. const { useState, useEffect, useRef, useMemo, useCallback } = React; function fmt(n) { return "$" + Math.round(n).toLocaleString("en-US"); } function fmtAr(n) { // Arabic-Indic digits return "$" + Math.round(n).toLocaleString("ar-EG"); } function useReveal() { useEffect(() => { const els = document.querySelectorAll("[data-reveal]:not(.in)"); if (!("IntersectionObserver" in window)) { els.forEach((e) => e.classList.add("in")); return; } const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.2, rootMargin: "0px 0px -10% 0px" } ); els.forEach((e) => io.observe(e)); return () => io.disconnect(); }); } // Counter that animates 0 → target on viewport entry, once. function useCounter(target, { duration = 1200, decimals = 0 } = {}) { const ref = useRef(null); const [val, setVal] = useState(0); const [done, setDone] = useState(false); useEffect(() => { if (!ref.current || done) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (!e.isIntersecting) return; io.disconnect(); const start = performance.now(); const ease = (t) => 1 - Math.pow(1 - t, 3); const tick = (now) => { const p = Math.min(1, (now - start) / duration); setVal(target * ease(p)); if (p < 1) requestAnimationFrame(tick); else setDone(true); }; requestAnimationFrame(tick); }); }, { threshold: 0.4 } ); io.observe(ref.current); return () => io.disconnect(); }, [target, duration, done]); return [ref, decimals ? val.toFixed(decimals) : Math.round(val)]; } // Counter for arbitrary text with leading number — preserves formatting like "20–35%" / "1,000+" function AnimatedStat({ text, duration = 1200, prefix = "" }) { // Extract first number from text const match = String(text).match(/(\d[\d,.]*)/); if (!match) return {text}; const raw = match[1]; const target = parseFloat(raw.replace(/,/g, "")); const before = text.slice(0, match.index); const after = text.slice(match.index + raw.length); const [ref, val] = useCounter(target, { duration }); const formatted = raw.includes(",") ? Math.round(val).toLocaleString("en-US") : Math.round(val); return {before}{formatted}{after}; } // Globe wordmark — recreates the brand mark inline so it scales cleanly on dark. function LogoMark({ size = 28 }) { return ( ); } // Wordmark using animated video logo function Wordmark({ small = false }) { return (
); } // Inline car silhouette — a stylized side view (placeholder until real photos) function CarSilhouette({ palette = ["#1d3aa8", "#0c1530"], variant = "sedan" }) { const [c1, c2] = palette; const id = useMemo(() => "g" + Math.random().toString(36).slice(2, 8), []); // simple sedan / suv profile const isSUV = variant.toLowerCase().includes("suv"); const isWagon = variant.toLowerCase().includes("brake"); const roofY = isSUV ? 38 : isWagon ? 40 : 44; return ( {/* ground reflection */} {/* body */} {/* windows */} {/* window divider */} {/* wheels */} {/* headlight glow */} ); } // EV silhouette with rim light, headlight bars, reflective floor — Option A function EVSilhouette() { return ( ); } // Hero backdrop — minimal: just a soft warm halo behind the car function HeroBackdrop() { return (