// Sections: Hero, How, Why, Cars, Trust, FAQ, FinalCTA, Footer const { useState: useStateS, useEffect: useEffectS } = React; function Nav({ lang, setLang, t }) { const [scrolled, setScrolled] = useStateS(false); useEffectS(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const navItems = [ { id: "how", label: t.nav.how }, { id: "cars", label: t.nav.cars }, { id: "cost", label: t.nav.cost }, { id: "trust", label: t.nav.trust }, { id: "faq", label: t.nav.faq }, ]; const shippingLabel = t.misc?.shippingLink || "Shipping & Sourcing"; const waLabel = t.misc?.wa || "WhatsApp"; return (
{ e.currentTarget.style.color = "var(--bone)"; e.currentTarget.style.borderColor = "var(--amber)"; }} onMouseLeave={(e) => { e.currentTarget.style.color = "var(--mute)"; e.currentTarget.style.borderColor = "var(--line-2)"; }}> {shippingLabel} →
{(window.LANG_ORDER || ["en","fr","es","ar"]).map((code) => ( ))}
{waLabel}
); } function Hero({ t, lang }) { return (
{t.hero.eyebrow}

{t.hero.headline_a} {t.hero.headline_b} {t.hero.headline_c}

{t.hero.sub}

{t.hero.trust}
); } function WAIcon() { return ( ); } function SectionLabel({ eyebrow, title, sub, align = "start", lang }) { return (
{eyebrow}

{title}

{sub &&

{sub}

}
); } // Animated step illustrations. function StepIcon({ n, active }) { // n = 0 (pick), 1 (lock/sign), 2 (deliver/ship) const a = active ? 1 : 0; if (n === 0) { // Three car silhouettes, one highlighted with a moving caret return ( ); } if (n === 1) { // Document with signature stroke being drawn return ( ); } // n === 2 — ship sailing across with port marker, then car arriving return ( ); } function HowItWorks({ t, lang }) { const [activeIdx, setActiveIdx] = useStateS(-1); const [progress, setProgress] = useStateS(0); // 0 → 1 const wrapRef = useRefA(null); useEffectS(() => { const el = wrapRef.current; if (!el) return; let frame = 0; const onScroll = () => { cancelAnimationFrame(frame); frame = requestAnimationFrame(() => { const rect = el.getBoundingClientRect(); const vh = window.innerHeight || 800; // 0 when section bottom enters viewport bottom; 1 when section top reaches 30% of viewport const start = vh * 0.85; const end = vh * 0.25; const top = rect.top; let p = (start - top) / (start - end); p = Math.max(0, Math.min(1, p)); setProgress(p); const which = p < 0.18 ? -1 : p < 0.5 ? 0 : p < 0.82 ? 1 : 2; setActiveIdx(which); }); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); cancelAnimationFrame(frame); }; }, []); const meta = [ t.misc?.free || "Free", t.misc?.deposit20 || "20% deposit", t.misc?.days45to60 || "45–60 days", ]; return (
{/* Connector line */}
); } function WhyDirect({ t, lang }) { return (
{t.why.items.map((it, i) => (

{it.k}

{it.v}

))}
); } function CarsGrid({ t, lang, onPickCar }) { return (
{CARS.map((c, i) => ( ))} {/* 6th tile: ask */} { e.currentTarget.style.borderColor = "var(--amber)"; e.currentTarget.style.background = "rgba(232,115,46,0.05)"; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line-2)"; e.currentTarget.style.background = "transparent"; }}> +

{t.cars.ask}

{t.cars.askCta} →
); } function TrustBlock({ t, lang }) { return (
{t.trust.stats.map((s, i) => (
{s.v}
{s.note && (
{s.note}
)}
))}
); } function FAQ({ t, lang }) { return (
{t.faq.items.map((it, i) => (
{it.q} +

{it.a}

))}
); } function FinalCTA({ t, lang }) { return (
{/* faint amber glow */}

{t.finalCta.title}

{t.finalCta.sub}

{t.finalCta.beirut} {t.finalCta.china}
); } function CrossPromo({ t, lang }) { return (
{t.crossPromo.eyebrow}

{t.crossPromo.title}

{t.crossPromo.sub}

(e.currentTarget.style.borderColor = "var(--amber)")} onMouseLeave={(e) => (e.currentTarget.style.borderColor = "rgba(232,115,46,0.4)")}> {t.crossPromo.cta} →
); } function Footer({ t, lang }) { const ql = t.footer.quickLinks; return ( ); } function StickyMobileCTA({ t, lang }) { const [show, setShow] = useStateS(false); useEffectS(() => { const onScroll = () => setShow(window.scrollY > window.innerHeight * 0.6); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
{t.finalCta.beirut}
); } function Marquee({ lang }) { const items = lang === "en" ? ["Guangzhou", "Yiwu", "Beirut", "BYD", "Zeekr", "Hongqi", "Geely", "23 years", "China–Lebanon", "Door to door"] : ["غوانغجو", "ييوو", "بيروت", "بي واي دي", "زيكر", "هونغتشي", "جيلي", "٢٣ سنة", "الصين–لبنان", "من الباب إلى الباب"]; const seq = [...items, ...items]; return (
{seq.map((w, i) => ( {w} ))}
); } window.Nav = Nav; window.Hero = Hero; window.HowItWorks = HowItWorks; window.WhyDirect = WhyDirect; window.CarsGrid = CarsGrid; window.TrustBlock = TrustBlock; window.FAQ = FAQ; window.FinalCTA = FinalCTA; window.Footer = Footer; window.CrossPromo = CrossPromo; window.StickyMobileCTA = StickyMobileCTA; window.Marquee = Marquee; window.WAIcon = WAIcon;