// Finale section — scroll-driven dramatic car animation as the page's // closing moment. Tall section: car drives from left to right as user // scrolls, with intensifying speed streaks, brightening headlight, // distant city/container skyline receding in parallax, and three // big headlines that fade in at progress milestones. const { useEffect: useEffectF, useRef: useRefF, useState: useStateF } = React; const FINALE_I18N = { en: { eyebrow: "THE LAST MILE", h1: "Your car is on its way.", h2: "From Shenzhen.", h3: "To your door.", foot: "Cleared. Registered. Ready.", }, fr: { eyebrow: "LE DERNIER KILOMÈTRE", h1: "Votre voiture est en route.", h2: "Depuis Shenzhen.", h3: "Jusqu'à votre porte.", foot: "Dédouanée. Immatriculée. Prête.", }, es: { eyebrow: "EL ÚLTIMO KILÓMETRO", h1: "Tu coche está en camino.", h2: "Desde Shenzhen.", h3: "Hasta tu puerta.", foot: "Despachado. Matriculado. Listo.", }, ar: { eyebrow: "الميل الأخير", h1: "سيارتك في الطريق.", h2: "من شنزن.", h3: "إلى بابك.", foot: "مخلَّصة. مسجَّلة. جاهزة.", }, }; function FinaleDrive({ lang = "en" }) { const ref = useRefF(null); const [p, setP] = useStateF(0); // 0 → 1 across section useEffectF(() => { const el = ref.current; if (!el) return; let raf = 0; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; const r = el.getBoundingClientRect(); const vh = window.innerHeight || 800; // Progress: 0 when section top hits bottom of viewport, 1 when section bottom hits top const total = r.height + vh; const scrolled = vh - r.top; const pp = Math.max(0, Math.min(1, scrolled / total)); setP(pp); }); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); const tx = FINALE_I18N[lang] || FINALE_I18N.en; // Eased progress for car position const ease = (x) => 1 - Math.pow(1 - x, 2.4); const ep = ease(p); const carX = -25 + ep * 145; // -25% → 120% const wheelRot = p * 2160; // 6 full spins const light = 0.35 + p * 0.65; const cityShift = -p * 60; // distant skyline pan const shipShift = -p * 35; // farther ship parallax const streakLen = 60 + p * 380; const showH1 = p > 0.10 && p < 0.65; const showH2 = p > 0.30 && p < 0.85; const showH3 = p > 0.55; const headlineOp = (start, end) => { if (p < start) return 0; if (p > end) return Math.max(0, 1 - (p - end) * 6); return Math.min(1, (p - start) * 8); }; return (

{/* Distant skyline silhouettes — parallax */}

{/* Container ship far back — parallax slower */}

{/* Reflective road surface */}

{/* Dashed lane line — animated */} {/* Speed lines layer */}

{Array.from({ length: 14 }).map((_, i) => { const y = 18 + i * 5.2 + (i % 3) * 1.2; const w = streakLen * (0.4 + ((i * 37) % 70) / 100); const op = (0.10 + (i % 5) * 0.05) * Math.max(0, p - 0.05); const col = i % 4 === 0 ? "rgba(232,115,46,0.9)" : "rgba(247,241,229,0.9)"; const left = ((i * 47) % 100); return ( ); })}

{/* Headlines layer */}

{tx.eyebrow}

{tx.h1}

{tx.h2}

{tx.h3}

{tx.foot}

{/* THE CAR */}

{/* Long headlight beam projecting forward */}

); } window.FinaleDrive = FinaleDrive;