// cal-shared.jsx — brand chrome (nav, footer, sticky CTA), icons, hooks const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React; // ──────────────────────────────────────────────────────────── // Tiny icon set (lucide-flavored, hand-tuned SVGs) // ──────────────────────────────────────────────────────────── const Icon = ({ name, size = 18, stroke = 1.75, className = "", style }) => { const paths = ICONS[name]; if (!paths) return null; return ( ); }; const ICONS = { check: , "check-circle": <>, arrowRight: <>, arrowLeft: <>, chevronDown: , chevronRight: , shield: <>, lock: <>, spark: <>, phone: , mail: <>, map: <>, clock: <>, user: <>, users: <>, car: <>, truck: <>, building: <>, briefcase: <>, cash: <>, trending: <>, calc: <>, edit: <>, help: <>, info: <>, search: <>, star: , quote: <>, google: <>, menu: <>, x: <>, zap: , sliders: <>, download: <>, external: <>, fileText: <>, link: <>, }; // ──────────────────────────────────────────────────────────── // Tiny hash-based router // ──────────────────────────────────────────────────────────── const RouteCtx = createContext({ path: "/", go: () => {} }); function getHashLocation() { const h = window.location.hash || "#/"; const raw = h.replace(/^#/, "") || "/"; // Split path and inner anchor (hash-router URL shape: #/path#section) const idx = raw.indexOf("#"); if (idx === -1) return { path: raw, anchor: "" }; return { path: raw.slice(0, idx) || "/", anchor: raw.slice(idx + 1) }; } function scrollToAnchor(anchor) { if (!anchor) { window.scrollTo({ top: 0, behavior: "instant" }); return; } // The target element may not exist yet if the destination page hasn't // mounted. Retry on rAF until we find it (or give up after ~500ms). let attempts = 0; const tick = () => { const el = document.getElementById(anchor); if (el) { el.scrollIntoView({ behavior: "smooth", block: "start" }); return; } if (++attempts < 30) requestAnimationFrame(tick); }; requestAnimationFrame(tick); } function RouterRoot({ children }) { const initial = getHashLocation(); const [path, setPath] = useState(initial.path); const [anchor, setAnchor] = useState(initial.anchor); useEffect(() => { const onChange = () => { const next = getHashLocation(); setPath(next.path); setAnchor(next.anchor); scrollToAnchor(next.anchor); }; window.addEventListener("hashchange", onChange); // Initial mount: honour an anchor if the page was loaded with one if (initial.anchor) scrollToAnchor(initial.anchor); return () => window.removeEventListener("hashchange", onChange); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const go = useCallback((to) => { if (to.startsWith("#")) to = to.slice(1); window.location.hash = "#" + to; }, []); return {children}; } function useRoute() { return useContext(RouteCtx); } function Link({ to, className = "", children, onClick, ...rest }) { const { go } = useRoute(); return ( { e.preventDefault(); onClick && onClick(e); go(to); }} {...rest} > {children} ); } // ──────────────────────────────────────────────────────────── // Brand mark — CAL wordmark with custom mark // ──────────────────────────────────────────────────────────── function BrandMark({ size = "md", inverse = false, showDomain = false }) { const h = size === "lg" ? 64 : size === "sm" ? 36 : 52; return (

{showDomain && (

CanadianAuto.Loans

)}

); } // ──────────────────────────────────────────────────────────── // Nav // ──────────────────────────────────────────────────────────── function Nav({ trustPlacement = "section" }) { const { path } = useRoute(); const [open, setOpen] = useState(false); const isActive = (p) => path === p || (p !== "/" && path.startsWith(p)); return (

(613) 700-8641

Start application

{open && (

setOpen(false)}>

e.stopPropagation()}>

setOpen(false)} className="btn btn-primary btn-lg btn-block">Start application

(613) 700-8641

Mon–Fri, 10 AM – 5 PM

)}

); } // ──────────────────────────────────────────────────────────── // Footer (with mandatory dealer-status line) // ──────────────────────────────────────────────────────────── function Footer() { return ( ); } // ──────────────────────────────────────────────────────────── // Sticky mobile CTA // ──────────────────────────────────────────────────────────── function StickyMobileCTA({ enabled, hideOnApply }) { const { path, go } = useRoute(); if (!enabled) return null; if (hideOnApply && path.startsWith("/apply")) return null; return (

Free 3-minute application Soft credit check · won't affect your score

); } // ──────────────────────────────────────────────────────────── // Shared: testimonials data (real reviews per brief) // ──────────────────────────────────────────────────────────── // IMPORTANT (legal/marketing): These names are real Google reviewers but the // `text` and `short` fields are paraphrases. Replace BOTH fields verbatim with // the actual Google review text before launch — Competition Act misleading- // advertising risk if quotes attributed to named individuals aren't accurate. const TESTIMONIALS = [ { name: "Alexander G.", role: "Ottawa, ON", stars: 5, text: "Elizabeth was patient with all my questions about my credit. They got me approved when two banks turned me down. The car was delivered to my door three days later — no dealership pressure, no surprises.", short: "Approved when two banks said no. Delivered to my door three days later.", initials: "AG", tint: 0, }, { name: "Rylin F.", role: "Gatineau, QC", stars: 5, text: "I was nervous about applying because of a bankruptcy on my record. The team was upfront about what was possible and what wasn't. Got a reasonable rate and a clean SUV.", short: "Honest about my bankruptcy. Still got me a fair rate.", initials: "RF", tint: 1, }, { name: "Jacob Genereux", role: "Kingston, ON", stars: 5, text: "Mark walked me through everything before delivery. First-time buyer, no co-signer. They explained the financing setup clearly so I knew exactly how it worked.", short: "First-time buyer, no co-signer. They made the financing make sense.", initials: "JG", tint: 2, }, { name: "Dee Marie", role: "Cornwall, ON", stars: 5, text: "Honest people. Nick made sure the vehicle matched what we discussed. I'd send my sister here.", short: "Honest people. The vehicle matched what we discussed.", initials: "DM", tint: 0, }, { name: "Heather Brown", role: "Brockville, ON", stars: 5, text: "After being declined twice elsewhere, I almost didn't apply. So glad I did. They found a lender who looked at my full picture, not just a number.", short: "Declined twice elsewhere. CAL looked at the whole picture, not just a number.", initials: "HB", tint: 1, }, ]; const TINT_BG = [ "linear-gradient(135deg, oklch(0.88 0.09 25), oklch(0.8 0.12 30))", "linear-gradient(135deg, oklch(0.94 0.05 80), oklch(0.9 0.07 50))", "linear-gradient(135deg, oklch(0.93 0.05 155), oklch(0.88 0.07 175))", ]; function ReviewCard({ t, compact }) { return (

{t.initials}

{t.name}

{t.role}

★★★★★

"{t.text}"

); } // ──────────────────────────────────────────────────────────── // Shared mini components: bullet, stat, etc. // ──────────────────────────────────────────────────────────── function CheckBullet({ children, dim }) { return (

{children}

); } function Stat({ value, label, sub }) { return (

{value}

{label}{sub && · {sub}}

); } function StarRating({ value, max = 5, size = 13 }) { const rounded = Math.round(value); return ( {Array.from({ length: max }, (_, i) => ( ★ ))} ); } // ──────────────────────────────────────────────────────────── // Custom Select — listbox pattern. Replaces native