// Finale section — ported from the Claude Design handoff // (Finale Section.html). A 220vh-tall pinned scroll-driven sequence: // - Full-bleed aero-wheel SVG dominates the landing view // - Wheel shrinks (scale 1.0 → 0.35) as the user scrolls // - Headline / sub / CTA fade in at staggered scroll thresholds // - Four telemetry callouts orbit the wheel and fade in too // - A featured "LIVE PRICING · Guangzhou showroom" callout grows // more prominent as the user scrolls toward the footer // - Near the end, the wheel enters a "charged" state (amber glow, // full LED ring) and a vignette darkens the transition out // // Two mechanical adaptations from the design source: // - React hooks aliased to F-prefixed names (the SPA loads all babel // files into one shared scope; useState/useEffect would collide) // - The standalone HTML's filler section and footer are NOT ported — // the SPA already has sections leading up to the finale and its // own Footer component. Only the finale itself. // // The "Start a build" CTA opens WhatsApp with a bilingual prefilled // message and fires a lead in Odoo via window.fireAutoLead. const { useState: useStateF, useEffect: useEffectF, useRef: useRefF, } = React; // Resolve the WhatsApp deeplinks for the two finale CTAs. Uses the // numbers + prefilled messages defined in copy.jsx (window.WA), with // UTM tracking appended so the team can attribute conversions from the // finale section in WhatsApp Business / Odoo analytics. function withUtm(url) { if (!url) return "#"; var utm = "utm_source=site&utm_medium=button&utm_campaign=auto-finale"; return url + (url.indexOf("?") === -1 ? "?" : "&") + utm; } function getWaUrls() { // Both targets resolve to the same +961 76 512 841 number now — // see copy.jsx WA_NUMBER. Kept as two keys so the existing button // markup (renderCTA below) doesn't need to change. var fallback = "https://wa.me/96176512841?text=" + encodeURIComponent("Hi China Bridge Auto, I'm interested in vehicle sourcing from China."); var WA = (typeof window !== "undefined" && window.WA) || {}; var beirut = withUtm(WA.beirut || fallback); var china = withUtm(WA.china || fallback); return { beirut: beirut, china: china }; } function FinaleSection() { const sectionRef = useRefF(null); const stickyRef = useRefF(null); const wheelStageRef = useRefF(null); const vignetteRef = useRefF(null); const ctaRef = useRefF(null); const subRef = useRefF(null); const lineRef = useRefF(null); const t1Ref = useRefF(null); const t2Ref = useRefF(null); const t3Ref = useRefF(null); const t4Ref = useRefF(null); const waUrls = useRefF(getWaUrls()).current; // Add `.finale-in` once the section enters the viewport (drives the // eyebrow fade-in that doesn't need scroll-tied interpolation). useEffectF(() => { if (!sectionRef.current || !stickyRef.current) return; const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && stickyRef.current) { stickyRef.current.classList.add("finale-in"); } }); }, { threshold: 0.05 }); obs.observe(sectionRef.current); return () => obs.disconnect(); }, []); // Scroll-tied animation: spin speed, wheel scale, copy reveals, // telemetry reveals, vignette, and the "charged" end-state. useEffectF(() => { const reveals = [ { get: () => lineRef.current, s: 0.18, e: 0.32 }, { get: () => subRef.current, s: 0.26, e: 0.42 }, { get: () => ctaRef.current, s: 0.36, e: 0.50 }, ]; const telemReveals = [ { get: () => t1Ref.current, s: 0.42 }, { get: () => t2Ref.current, s: 0.50 }, { get: () => t3Ref.current, s: 0.30 }, // Featured "LIVE PRICING" reveals earliest { get: () => t4Ref.current, s: 0.58 }, ]; let ticking = false; function onScroll() { if (ticking) return; ticking = true; requestAnimationFrame(() => { ticking = false; const section = sectionRef.current; if (!section) return; const rect = section.getBoundingClientRect(); const vh = window.innerHeight; const travel = section.offsetHeight - vh; if (travel <= 0) return; const scrolled = Math.max(0, -rect.top); const p = Math.max(0, Math.min(1, scrolled / travel)); // Spin speed: fastest at mid-progress (sine peak), slowest at edges. const speed = Math.sin(Math.max(0, Math.min(1, p)) * Math.PI); const dur = (6 - speed * 4.5).toFixed(2); document.documentElement.style.setProperty("--wheel-dur", dur + "s"); // Wheel scale: huge on landing, ~35% by end of scroll. const scale = (1.0 - p * 0.65).toFixed(3); document.documentElement.style.setProperty("--wheel-scale", scale); // Featured showroom-pricing callout grows toward end. const featuredScale = (1.0 + p * 0.20).toFixed(3); document.documentElement.style.setProperty("--featured-scale", featuredScale); // Copy reveals (interpolated opacity + translateY). for (const r of reveals) { const el = r.get(); if (!el) continue; const t = Math.max(0, Math.min(1, (p - r.s) / (r.e - r.s))); el.style.opacity = t.toFixed(3); el.style.transform = "translateY(" + ((1 - t) * 24).toFixed(1) + "px)"; } // Telemetry reveals (binary at threshold). for (const tr of telemReveals) { const el = tr.get(); if (!el) continue; if (p > tr.s) el.classList.add("in"); else el.classList.remove("in"); } // Vignette fades in at the end for footer transition. if (vignetteRef.current) { const vAmount = p > 0.86 ? Math.min(1, (p - 0.86) / 0.14) : 0; vignetteRef.current.style.opacity = vAmount.toFixed(3); } // Charged state near end of scroll. if (wheelStageRef.current) { if (p > 0.78) wheelStageRef.current.classList.add("charged"); else wheelStageRef.current.classList.remove("charged"); } }); } window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); onScroll(); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, []); // Fire-and-forget lead capture for each desk. Keeps the existing // auto_finalcta_* inquiry_source values so the team's CRM filters // and historical lead grouping continue to work after the standalone // FinalCTA section was removed. const onBeirutClick = () => { if (typeof window !== "undefined" && window.fireAutoLead) { window.fireAutoLead({ inquiry_source: "auto_finalcta_beirut", request_kind: "WhatsApp interest", subject: "finale section · Beirut desk", whatsapp: waUrls.beirut, }); } }; const onChinaClick = () => { if (typeof window !== "undefined" && window.fireAutoLead) { window.fireAutoLead({ inquiry_source: "auto_finalcta_china", request_kind: "WhatsApp interest", subject: "finale section · China desk", whatsapp: waUrls.china, }); } }; return (
{/* Background layers — radial glow + grid + concentric rings */}
); }