/* Auto Boréal Esthétique — React app (single file) */ const { useState, useEffect, useRef, useCallback, useMemo } = React; /* -------------------------------- helpers ------------------------------- */ function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { el.classList.add("in"); io.disconnect(); } }); }, { threshold: 0.12, rootMargin: "0px 0px -10% 0px" }); io.observe(el); return () => io.disconnect(); }, []); return ref; } function useScrolled(threshold = 8) { const [s, setS] = useState(false); useEffect(() => { const onScroll = () => setS(window.scrollY > threshold); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, [threshold]); return s; } function useParallax() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; let raf = 0; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { const y = window.scrollY; el.style.transform = `translate3d(0, ${y * 0.18}px, 0) scale(1.05)`; raf = 0; }); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => { window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); return ref; } /* Imagery — neutral car/detailing keywords, no recognizable branding */ const HERO_IMG = "assets/hero.jpg"; const ABOUT_IMG = "assets/about.jpg"; const GALLERY = [ { before: "assets/g1-before.jpg", after: "assets/g1-after.jpg", ratio: "4/3" }, { before: "assets/g2-before.jpg", after: "assets/g2-after.jpg", ratio: "1/1" }, { before: "assets/g3-before.jpg", after: "assets/g3-after.jpg", ratio: "3/4" }, { before: "assets/g4-before.jpg", after: "assets/g4-after.jpg", ratio: "4/3" }, { before: "assets/g5-before.jpg", after: "assets/g5-after.jpg", ratio: "4/3" }, ]; /* -------------------------------- icons --------------------------------- */ const Icon = { Spray: () => ( ), Seat: () => ( ), Buff: () => ( ), Shield: () => ( ), Arrow: () => ( ), Phone: () => ( ), Mail: () => ( ), FB: () => ( ), Insta: () => ( ), Pin: () => ( ), }; const SERVICE_ICONS = [Icon.Spray, Icon.Seat, Icon.Buff, Icon.Shield]; /* -------------------------------- Nav ----------------------------------- */ function Nav({ t, lang, setLang, onBook }) { const scrolled = useScrolled(8); return ( ); } /* -------------------------------- Hero ---------------------------------- */ function Hero({ t, onBook }) { const bg = useParallax(); return (
); } /* -------------------------------- Services ------------------------------ */ function Services({ t }) { const ref = useReveal(); return (
{t.services.eyebrow}

{t.services.title}

{t.services.lede}

{t.services.items.map((s, i) => { const I = SERVICE_ICONS[i]; return (
0{i + 1} {s.tag}

{s.title}

{s.desc}

{s.price}
); })}

// {t.services.disclaimer}

); } /* -------------------------------- Gallery ------------------------------- */ function CompareCard({ item, t }) { const wrapRef = useRef(null); const [pos, setPos] = useState(50); const dragging = useRef(false); const update = (clientX) => { const el = wrapRef.current; if (!el) return; const r = el.getBoundingClientRect(); const x = ((clientX - r.left) / r.width) * 100; setPos(Math.max(0, Math.min(100, x))); }; const onDown = (e) => { dragging.current = true; update(e.clientX ?? e.touches?.[0]?.clientX); }; const onMove = (e) => { if (!dragging.current) return; update(e.clientX ?? e.touches?.[0]?.clientX); }; const onUp = () => { dragging.current = false; }; useEffect(() => { window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); window.addEventListener("touchmove", onMove); window.addEventListener("touchend", onUp); return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); window.removeEventListener("touchmove", onMove); window.removeEventListener("touchend", onUp); }; }, []); return (
e.preventDefault()} />
e.preventDefault()} />
{t.gallery.tag_before} {t.gallery.tag_after}
); } function Gallery({ t }) { const ref = useReveal(); return ( ); } /* -------------------------------- Reviews ------------------------------- */ function Reviews({ t }) { const ref = useReveal(); return (
{t.reviews.eyebrow}

{t.reviews.title}

{t.reviews.quotes.map((q, i) => (
★★★★★
“{q.text}”
{q.author.charAt(0)}
{q.author}
{q.role}
))}
392
{t.reviews.stat_reviews}
4,3 ★
{t.reviews.stat_rating}
QC
{t.reviews.stat_city}
); } /* -------------------------------- About --------------------------------- */ function About({ t }) { const ref = useReveal(); return (
{t.about.eyebrow}

{t.about.title}

{t.about.p1}

{t.about.p2}

{t.about.stats.map((s, i) => (
{s.v}
{s.l}
))}
{t.about.caption}
); } /* -------------------------------- Location ------------------------------ */ function Location({ t }) { const ref = useReveal(); const mapsQ = "2500+Boulevard+Industriel,+Saint-J%C3%A9r%C3%B4me,+QC+J7Y+5G2"; return (
{t.location.eyebrow}

{t.location.title}

{t.location.address_label}
{t.location.address}
{t.location.directions}
{t.location.phone_label}
(450) 555-0000
{t.location.email_label}
bonjour@autoboreal-demo.ca
{t.location.hours_label}
{t.location.hours.map((h, i) => ( ))}
{h.d}{h.h}
// {t.location.hours_note}
{t.location.social_label}
); } /* -------------------------------- CTA ----------------------------------- */ function FinalCTA({ t }) { const ref = useReveal(); return (

{t.cta.title} {t.cta.title_accent}

{t.cta.sub}

{t.cta.call} {t.cta.email}
); } /* -------------------------------- Footer -------------------------------- */ function Footer({ t }) { return ( ); } /* -------------------------------- Booking modal ------------------------- */ function Booking({ open, onClose, t, lang }) { const [step, setStep] = useState(0); const [form, setForm] = useState({ name: "", phone: "", service: t.services.items[0].title, date: "", note: "" }); useEffect(() => { if (open) setStep(0); }, [open]); useEffect(() => { setForm((f) => ({ ...f, service: t.services.items[0].title })); }, [lang]); useEffect(() => { const onKey = (e) => { if (e.key === "Escape" && open) onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open]); const labels = lang === "fr" ? { title: "Réserver un rendez-vous", sub: "Laissez-nous vos coordonnées — on vous rappelle dans la journée.", name: "Nom", phone: "Téléphone", service: "Service souhaité", date: "Date préférée", note: "Notes", submit: "Envoyer la demande", cancel: "Annuler", thanks: "Demande envoyée !", thanksSub: "Nous vous rappelons rapidement au numéro indiqué." } : { title: "Book an appointment", sub: "Drop your details — we'll call you back the same day.", name: "Name", phone: "Phone", service: "Service", date: "Preferred date", note: "Notes", submit: "Send request", cancel: "Cancel", thanks: "Request sent!", thanksSub: "We'll call you back at the number provided." }; return (
e.stopPropagation()} style={{ position: "relative" }}> {step === 0 ? (
{ e.preventDefault(); setStep(1); }}>

{labels.title}

{labels.sub}

setForm({ ...form, name: e.target.value })} placeholder="Jean Tremblay" /> setForm({ ...form, phone: e.target.value })} placeholder="(450) 555-0000" /> setForm({ ...form, date: e.target.value })} />