/* global React, useLang, t, Mark, Icon, Arrow */ function SkylineBg({ overlayOpacity = 0.55 }) { // Stylized Riyadh skyline at golden hour return (
{/* Sky */}
{/* Sun haze */}
{/* Distant haze / dust */}
{/* Skyline silhouette */} {/* Navy gradient overlay for legibility */}
{/* Subtle hatch */}
); } function VideoBg({ overlayOpacity = 0.55, speed = 0.6 }) { const { isPhone } = useViewport(); const videoRef = React.useRef(null); const [playing, setPlaying] = React.useState(true); const [videoReady, setVideoReady] = React.useState(false); const reduced = React.useRef( typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches); React.useEffect(() => { const v = videoRef.current; if (!v) return; const applyRate = () => {try {v.playbackRate = speed;} catch (e) {}}; applyRate(); v.addEventListener('loadedmetadata', applyRate); const onReady = () => setVideoReady(true); v.addEventListener('playing', onReady); if (v.readyState >= 3 && !v.paused) onReady(); if (reduced.current) { v.pause(); setPlaying(false); } else { const p = v.play(); if (p && p.catch) p.catch(() => {}); } return () => { v.removeEventListener('loadedmetadata', applyRate); v.removeEventListener('playing', onReady); }; }, []); // Keep playback rate in sync when the speed tweak changes React.useEffect(() => { const v = videoRef.current; if (v) {try {v.playbackRate = speed;} catch (e) {}} }, [speed]); const toggle = () => { const v = videoRef.current; if (!v) return; if (v.paused) {v.play();setPlaying(true);} else {v.pause();setPlaying(false);} }; return (
{/* Directional scrim — dark behind the text (bottom-left), clear top-right so the footage reads */}
{/* Soft floor gradient so the stats + CTAs stay legible */}
{/* Faint top vignette under the header */}
{/* Subtle hatch tying it to the brand texture */}
{/* Play / pause control */}
); } function Hero({ overlayOpacity = 0.55, bgStyle = 'skyline', videoSpeed = 0.6 }) { const { lang } = useLang(); const { isPhone } = useViewport(); const [phase, setPhase] = React.useState('pre'); // 'pre' | 'in' | 'instant' React.useEffect(() => { const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; // Reduced motion or a tab that isn't visible: show instantly, no paused transition if (reduced || document.hidden) {setPhase('instant');return;} const raf = requestAnimationFrame(() => requestAnimationFrame(() => setPhase('in'))); const fallback = setTimeout(() => setPhase('in'), 1400); // guarantee visibility return () => {cancelAnimationFrame(raf);clearTimeout(fallback);}; }, []); const rise = phase === 'pre' ? 'hero-rise' : phase === 'instant' ? 'hero-rise in instant' : 'hero-rise in'; const stats = [ { v: '320+', num: 320, suffix: '+', l: t(lang, 'Products', 'منتج', 'Productos') }, { v: '10+', num: 10, suffix: '+', l: t(lang, 'Product Lines', 'خطوط منتجات', 'Líneas de producto') }, { v: '2021', num: 2021, group: false, l: t(lang, 'Founded', 'سنة التأسيس', 'Fundado') }, { v: t(lang, 'Saudi Made', 'صُنع في السعودية', 'Hecho en KSA'), l: t(lang, 'National manufacturer', 'مصنع وطني', 'Fabricante nacional'), alt: true }]; return (
{bgStyle === 'video' && } {bgStyle === 'skyline' && } {bgStyle === 'solid' &&
} {bgStyle === 'pattern' && <>
} {/* Top hairline above stats already provided by overlay; bottom hairline added below */}
{/* Hero content */}
{/* Overline */}
{t(lang, 'Building Chemistry Industry · Dammam, KSA', 'صناعة كيمياء البناء · الدمام، المملكة العربية السعودية', 'Industria Química de la Construcción · Dammam, KSA')}
{/* Headline — Arabic is RTL; English & Spanish share the LTR Latin layout */} {lang === 'ar' ?

كيمياء البناء
صُنعت لتدوم.

:

{lang === 'es' ? <>Química de la Construcción
Hecha para Durar : <>Construction Chemistry
Built to Last}

} {/* Subtext */}

{t(lang, 'Polyurethane. Epoxy. Polyurea. The invisible chemistry protecting the Gulf\u2019s built future.', 'بولي يوريثان. إيبوكسي. بولي يوريا. الكيمياء الخفية التي تحمي مستقبل الخليج العمراني.', 'Poliuretano. Epoxi. Poliurea. La química invisible que protege el futuro construido del Golfo.')}

{/* CTAs */}
{/* Stats row */} {isPhone ?
{stats.map((s, i) =>
{s.num != null ? : s.v}
{s.l}
)}
:
{stats. map((s, i) => { const last = i === 3; // EN: last cell hugs the right edge so the row is flush on both sides. // AR (RTL): last cell hugs the left edge. const endAlign = lang === 'ar' ? 'flex-start' : 'flex-end'; return (
{s.num != null ? : s.v}
{s.l}
); })}
}
); } function DecoMotif() { // Large decorative interlocking squares low-opacity, bottom-right return ( ); } Object.assign(window, { Hero, SkylineBg, VideoBg, DecoMotif });