// app.jsx — FairClaimBC: warmer, more crafted SPA // ───────────────────────────────────────────────────────────── // THEMES — "warm" (default trust-house) and "bcgov" (BC government adjacent) // C is mutable so theme switches propagate across re-renders without // touching every styled element. applyTheme() copies the active palette in. // ───────────────────────────────────────────────────────────── const THEMES = { warm: { navy: "#0E2A47", navyDeep: "#081A2F", navySoft: "#1A3D63", steel: "#5A6B82", steelLight: "#A8B4C4", cream: "#FAF6EF", paper: "#FFFCF7", surface: "#F4F0E8", line: "#E5DFD2", lineSoft: "#EFEAE0", ink: "#0E2A47", accent: "#0E5FB5", gold: "#B68A3E", goldSoft: "#F4E9D0", alert: "#B8421A", good: "#0F6B4F", goodSoft: "#E5EFE9", serif: "'Source Serif 4', Georgia, serif", sans: "'Inter', system-ui, sans-serif", mono: "'JetBrains Mono', ui-monospace, monospace", }, // BC Government adjacent — inspired by gov.bc.ca styling, but our own. // Deep navy + BC gold, white surfaces, BC Sans (we use Public Sans + Noto Serif as accessible substitutes). bcgov: { navy: "#003366", // BC Gov primary blue navyDeep: "#002048", navySoft: "#1A4A7A", steel: "#606060", steelLight: "#9FA8B5", cream: "#F2F2F2", // BC Gov page bg (light gray) paper: "#FFFFFF", surface: "#F8F9FA", line: "#D6D7DA", lineSoft: "#E5E7EA", ink: "#1A1A1A", accent: "#1A5A96", gold: "#FCBA19", // BC Gov yellow goldSoft: "#FFF4D2", alert: "#D8292F", good: "#2E8540", goodSoft: "#DFF0D8", serif: "'Noto Serif', Georgia, serif", sans: "'Public Sans', 'BC Sans', system-ui, sans-serif", mono: "'JetBrains Mono', ui-monospace, monospace", }, }; // Mutable color object — components reference C.navy etc. inline. // Mutating in place + remounting the React tree is enough to re-theme. const C = { ...THEMES.warm }; // Mutable font stacks — same pattern. const F = { ...{ serif: THEMES.warm.serif, sans: THEMES.warm.sans, mono: THEMES.warm.mono } }; // Active theme name (for components that need to branch on theme, e.g. step illustrations). let __activeTheme = "warm"; function applyTheme(name) { const t = THEMES[name] || THEMES.warm; Object.keys(t).forEach((k) => { if (k === "serif" || k === "sans" || k === "mono") F[k] = t[k]; else C[k] = t[k]; }); __activeTheme = name; } function getTheme() { return __activeTheme; } // Backwards-compat font aliases — read at render time so theme swaps propagate. const SERIF = new String(""); SERIF.toString = () => F.serif; const SANS = new String(""); SANS.toString = () => F.sans; const MONO = new String(""); MONO.toString = () => F.mono; // ───────────────────────────────────────────────────────────── // ICONS — UI marks only, geometric // ───────────────────────────────────────────────────────────── const Icon = { shield: (s = 16, c = "currentColor") => ( ), arrow: (s = 14, c = "currentColor") => ( ), check: (s = 14, c = "currentColor") => ( ), lock: (s = 13, c = "currentColor") => ( ), link: (s = 13, c = "currentColor") => ( ), doc: (s = 14, c = "currentColor") => ( ), star: (s = 14, c = "currentColor") => ( ), sparkle: (s = 14, c = "currentColor") => ( ), // Decorative seal/stamp — BC §152 insignia (replaces "Certified" stamp) // Designed as a clean vertical badge: flag + section reference + ribbon. No overlapping text. seal: (s = 56, c = C.gold) => ( {/* Outer dotted ring (decorative) */} {/* Inner solid ring */} {/* Tiny Canada flag inside the seal — spaced from edge */} {/* Section reference — large and centered, only once */} §152 INSURANCE ACT {/* Ribbon banner below circle */} BRITISH COLUMBIA ), }; // ───────────────────────────────────────────────────────────── // PRIMITIVES // ───────────────────────────────────────────────────────────── function Field({ label, hint, children, suffix }) { return ( ); } function Input(props) { return ( { e.currentTarget.style.borderColor = C.accent; e.currentTarget.style.boxShadow = `0 0 0 4px ${C.accent}1f`; e.currentTarget.style.background = "#fff"; props.onFocus?.(e); }} onBlur={(e) => { e.currentTarget.style.borderColor = C.line; e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.background = C.paper; props.onBlur?.(e); }} /> ); } // Select — styled dropdown matching Input function Select({ value, onChange, options, placeholder, disabled }) { const isPlaceholder = !value; return (
); } function Btn({ children, onClick, variant = "primary", size = "md", disabled, style, full, ...rest }) { const heights = { sm: 36, md: 46, lg: 56 }; const v = { primary: { bg: C.navy, fg: "#fff", border: C.navy, hover: C.navyDeep, shadow: "0 6px 20px -6px rgba(14,42,71,0.55)" }, accent: { bg: C.accent, fg: "#fff", border: C.accent, hover: "#0a4f95", shadow: "0 8px 24px -8px rgba(14,95,181,0.6)" }, gold: { bg: C.gold, fg: "#fff", border: C.gold, hover: "#9a7332", shadow: "0 8px 24px -8px rgba(182,138,62,0.6)" }, ghost: { bg: "transparent", fg: C.navy, border: C.line, hover: C.surface, shadow: "none" }, light: { bg: C.paper, fg: C.navy, border: C.line, hover: C.surface, shadow: "0 2px 8px rgba(14,42,71,0.04)" }, }[variant]; return ( ); } // ───────────────────────────────────────────────────────────── // HEADER // ───────────────────────────────────────────────────────────── // Canada flag — small inline SVG function CanadaFlag({ w = 18 }) { const h = w * 0.5; return ( ); } // ── VehicleAutocomplete — smart single text field replacing 4 dropdowns ─────── function VehicleAutocomplete({ state, set }) { const [raw, setRaw] = React.useState( [state.year, state.make, state.model, state.trim].filter(Boolean).join(" ") ); const [suggestions, setSuggestions] = React.useState([]); const [showSugg, setShowSugg] = React.useState(false); const [parsed, setParsed] = React.useState(!!state.year); const inputRef = React.useRef(null); // Parse "2019 Toyota RAV4 XLE" into structured fields const parseVehicle = (text) => { const t = text.trim(); if (!t) return null; const yearMatch = t.match(/\b(19\d{2}|20[0-2]\d)\b/); if (!yearMatch) return null; const year = yearMatch[1]; const rest = t.replace(year, "").trim(); // Try to match make from MAKES list (case-insensitive) const makeMatch = MAKES.find(m => m !== "Other" && rest.toLowerCase().startsWith(m.toLowerCase())); if (!makeMatch) return null; const afterMake = rest.slice(makeMatch.length).trim(); // Try to match model const models = MODELS_FOR(makeMatch).filter(m => m !== "Other"); const modelMatch = models.find(m => afterMake.toLowerCase().startsWith(m.toLowerCase())); const model = modelMatch || (afterMake.split(" ")[0] || ""); const trim = modelMatch ? afterMake.slice(modelMatch.length).trim() : afterMake.split(" ").slice(1).join(" "); return { year, make: makeMatch, model: model || "Other", trim: trim || "" }; }; // Build suggestions as user types const buildSuggestions = (text) => { const t = text.toLowerCase().trim(); if (t.length < 2) return []; const yearMatch = t.match(/\b(19\d{2}|20[0-2]\d)\b/); const year = yearMatch?.[1] || ""; const rest = year ? t.replace(year, "").trim() : t; // Find matching makes const matchingMakes = MAKES.filter(m => m !== "Other" && m.toLowerCase().includes(rest.split(" ")[0])); const suggestions = []; for (const make of matchingMakes.slice(0, 3)) { const models = MODELS_FOR(make).filter(m => m !== "Other").slice(0, 4); for (const model of models) { const label = [year || "20XX", make, model].join(" "); suggestions.push({ label, year: year || "", make, model, trim: "" }); if (suggestions.length >= 6) break; } if (suggestions.length >= 6) break; } return suggestions; }; const handleChange = (e) => { const v = e.target.value; setRaw(v); setParsed(false); setSuggestions(buildSuggestions(v)); setShowSugg(true); // Auto-parse if it looks complete (year + make + model) const p = parseVehicle(v); if (p && p.year && p.make && p.model) { set({ ...state, year: p.year, make: p.make, model: p.model, trim: p.trim, scan: null }); setParsed(true); } else { set({ ...state, year: "", make: "", model: "", trim: "", scan: null }); } }; const selectSuggestion = (s) => { const display = [s.year || new Date().getFullYear(), s.make, s.model].join(" "); setRaw(display); setShowSugg(false); setParsed(true); set({ ...state, year: s.year || String(new Date().getFullYear()), make: s.make, model: s.model, trim: s.trim || "", scan: null }); inputRef.current?.focus(); }; return (
raw.length > 1 && setShowSugg(true)} onBlur={() => setTimeout(() => setShowSugg(false), 150)} placeholder="e.g. 2019 Toyota RAV4" autoComplete="off" style={{ width: "100%", padding: "14px 44px 14px 16px", font: `500 17px ${SANS}`, color: C.navy, background: C.paper, border: `2px solid ${parsed ? C.good : C.line}`, borderRadius: 10, outline: "none", boxSizing: "border-box", transition: "border-color .2s", boxShadow: parsed ? `0 0 0 3px ${C.good}22` : "none", }} onFocusCapture={(e) => e.target.style.borderColor = C.gold} onBlurCapture={(e) => e.target.style.borderColor = parsed ? C.good : C.line} /> {/* Status icon */}
{parsed ? ✓ : 🔍 }
{/* Parsed confirmation */} {parsed && state.year && state.make && (
{[ { label: "Year", val: state.year }, { label: "Make", val: state.make }, { label: "Model", val: state.model }, state.trim && { label: "Trim", val: state.trim }, ].filter(Boolean).map((item, i) => ( {item.label}: {item.val} ))}
)} {/* Dropdown suggestions */} {showSugg && suggestions.length > 0 && (
{suggestions.map((s, i) => (
selectSuggestion(s)} style={{ padding: "11px 16px", cursor: "pointer", font: `400 14px ${SANS}`, color: C.navy, borderBottom: i < suggestions.length - 1 ? `1px solid ${C.line}` : "none", display: "flex", alignItems: "center", gap: 10, transition: "background .12s", }} onMouseEnter={(e) => e.currentTarget.style.background = C.surface} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"} > 🚗 {s.label}
))}
)}
); } function Header({ device, onJump, onScrollTo }) { const isMobile = device === "mobile"; const navLink = (label, id) => ( onScrollTo && onScrollTo(id)} style={{ cursor: "pointer", transition: "color .15s" }} onMouseEnter={(e) => e.currentTarget.style.color = C.navy} onMouseLeave={(e) => e.currentTarget.style.color = C.steel} >{label} ); return (
{Icon.shield(16, "#fff")}
FairClaimBC {!isMobile && ( British Columbia )} {isMobile && }
{!isMobile ? ( ) : ( Start {Icon.arrow(12, "#fff")} )}
); } // ───────────────────────────────────────────────────────────── // HERO — warmer, with hand-drawn-feeling illustration card // ───────────────────────────────────────────────────────────── function Hero({ heroVariant, device, onStart }) { const h = HERO_VARIANTS[heroVariant] || HERO_VARIANTS.directQuestion; const isMobile = device === "mobile"; return (
{/* Decorative blurred shape */} {!isMobile && (
)}
{h.eyebrow}

{h.title}

{h.subtitle}

{h.cta} {Icon.arrow(14, "#fff")}
{Icon.lock(12, C.steel)} No sign-up · results in 90 seconds
{/* Trust strip — inline, social proof */}
{[1,2,3,4,5].map(i => {Icon.star(13, C.gold)})}
BC total loss dispute assistant · results may vary
{!isMobile && }
); } // Hero illustration — clean composition: Delta Report card on top, // stacked credibility chips below. No overlap, no rotation chaos. function HeroIllustration() { return (
{/* Delta Report — main card */}
Delta Report · Sample
You're owed an additional
+$6,732
ICBC initial offer $24,800
BC market average $31,532
{/* Side-by-side credibility chips — non-overlapping grid */}
{Icon.check(12, C.good)}
Letter ready
2 pages · cited · PDF + Word
BC Insurance Act
Section 152 · ACV standard
{/* ICBC reference strip */}
ICBC
Cites ICBC's own published Total Loss Methodology — your offer's anchor, used against it.
); } // ───────────────────────────────────────────────────────────── // TRUST BAR — inline, alternating // ───────────────────────────────────────────────────────────── function TrustBar({ device }) { const items = [ { v: "Free", l: "BC market scan", k: "no sign-up or credit card required" }, { v: "90 sec", l: "to your letter", k: "no sign-up, no account needed" }, { v: "§152", l: "Insurance (Vehicle) Act", k: "your legal right to dispute" }, { v: "14 days", l: "ICBC must respond", k: "once your dispute letter is submitted" }, ]; const isMobile = device === "mobile"; return (
{items.map((it, i) => (
{it.v} {it.l}
{it.k}
))}
); } // ───────────────────────────────────────────────────────────── // HOW IT WORKS — illustrated steps // ───────────────────────────────────────────────────────────── function HowItWorks({ device }) { const isMobile = device === "mobile"; return (
· How it works ·

From low-ball offer to settlement-grade letter in five minutes.

No legal fees. No upselling. Pay only when you see exactly how much you're recovering.

{HOW_IT_WORKS.map((s, i) => (
{ e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 16px 32px -16px rgba(14,42,71,0.18)"; e.currentTarget.style.borderColor = C.gold; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = C.line; }}>
{s.n}
{s.t}
{s.d}
))}
); } function StepIllustration({ n }) { // Step 1 — BC vehicle registration card: looks like a real ICBC/AutoPlan document. // Vehicle silhouette + BC plate + VIN + odometer + an "OFFER" inspection stamp. // Mirrors copy: "Year, make, model, kilometres, and the dollar amount on the table." if (n === 0) return (
{/* Registration card — landscape, official-looking */}
{/* Card header strip */}
VEHICLE RECORD · BC FORM APV-9T
{/* Left: vehicle silhouette */}
{/* Side-view SUV silhouette — clean */} {/* windows */} {/* wheels */} {/* ground line */}
{/* Right: data rows */}
{[ { l: "YEAR / MAKE", v: "2019 TOYOTA" }, { l: "MODEL / TRIM", v: "RAV4 XLE AWD" }, { l: "ODOMETER", v: "78,400 KM" }, ].map((f, i) => (
{f.l} {f.v}
))} {/* BC plate — last row, bold */}
BC PLATE
BC · BCD 4N7
{/* Inspection stamp — diagonal, overlapping */}
ICBC OFFER
$24,800
); // Step 2 — Live BC market scan: search bar + scanning progress + 4 source listing rows. // Mirrors copy: "Scan & compare the BC market — Autotrader, Marketplace, Kijiji & CarGurus" if (n === 1) return (
{/* Search bar */}
{/* magnifier */} 2019 Toyota RAV4 XLE — British Columbia {/* live dot */} LIVE
{/* Scanning progress bar */}
{/* Listing rows — dealer platforms only */}
{[ { src: "Autotrader", price: "$31,995", km: "76,200 km", color: "#E63946" }, { src: "Clutch.ca", price: "$30,500", km: "81,100 km", color: "#0066CC" }, { src: "CarpageS", price: "$30,200", km: "79,800 km", color: "#2E7D32" }, { src: "CarGurus", price: "$29,900", km: "72,400 km", color: "#36864B" }, ].map((row, i) => (
{/* Source dot */} {row.src} {row.km} {row.price}
))}
); // Step 4 — Send letter: email mockup with ICBC contact info return (
{/* Email mockup */}
{/* Email header */}
To: your.adjuster@icbc.com SENT
SUBJECT: Claim #AB1234567 — Formal ACV Dispute
Dear [Adjuster Name], Please find attached my formal dispute of the total loss settlement offer per Section 152 of the Insurance (Vehicle) Act...
{/* Reply badge */}
ICBC replied in 8 days · +$4,600
{/* Info column */}
{[ { label: "Dispute basis", value: "Ins. (Vehicle) Act §152" }, { label: "Response time", value: "14 business days" }, { label: "Data source", value: "Live BC dealer listings" }, ].map((r, i) => (
{r.label} {r.value}
))}
); } // ───────────────────────────────────────────────────────────── // FORM — vehicle dropdowns + ICBC offer + AI Scan & Compare // ───────────────────────────────────────────────────────────── function DiagnosticForm({ state, set, device, onReveal }) { const isMobile = device === "mobile"; const [scanning, setScanning] = React.useState(false); const [scanStep, setScanStep] = React.useState(0); const [extendedSearch, setExtendedSearch] = React.useState(false); const [noResults, setNoResults] = React.useState(false); const [notifyEmail, setNotifyEmail] = React.useState(""); const [notifySubmitted, setNotifySubmitted] = React.useState(false); const modelOptions = MODELS_FOR(state.make); const trimOptions = TRIMS_FOR(state.make, state.model); const modelIsOther = state.model === "Other"; const vehicleReady = state.year && state.make && state.model && (modelIsOther ? state.modelOther : true); const offerReady = parseNum(state.offer); const canScan = vehicleReady && offerReady && !scanning; // Real BC market search via Tavily API (backend) const runScan = async () => { setScanning(true); setScanStep(0); setExtendedSearch(false); const MIN_SCAN_MS = 11000; // always show at least 11 seconds of animation const scanStartTime = Date.now(); const SCAN_STEPS = [ "Searching BC dealer listings for your vehicle...", "Verifying prices and availability in your area...", "Calculating your market value gap...", ]; // Step animation — advances every 1100ms = 11 steps x 1100ms = ~11s let stepIdx = 0; const stepTimer = setInterval(() => { stepIdx = Math.min(stepIdx + 1, SCAN_STEPS.length - 1); setScanStep(stepIdx); }, 3500); let apiData = null; let apiError = null; try { const WORKER = "https://fairclaimbc-api.willyml1979.workers.dev"; // Call Worker with action: "scan" — Worker uses Google Search (Serper.dev) // to find real individual BC listing URLs, same as Claude.ai chat search const r1 = await fetch(WORKER, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "scan", year: state.year, make: state.make, model: state.modelOther || state.model, trim: state.trim || "", km: state.km || "", offer: state.offer || "", }), }); apiData = await r1.json(); console.log("[Scan] Response:", JSON.stringify(apiData).substring(0, 200)); if (apiData.error) { throw new Error(apiData.message || "Error en la búsqueda."); } } catch (err) { apiError = err; console.warn("[Scan] API error:", err); } // Enforce minimum 11-second animation duration const elapsed = Date.now() - scanStartTime; const remaining = Math.max(0, MIN_SCAN_MS - elapsed); if (remaining > 0) { await new Promise(resolve => setTimeout(resolve, remaining)); } clearInterval(stepTimer); setScanStep(SCAN_STEPS.length); try { if (apiError) throw apiError; const data = apiData; if (data.extendedSearch) setExtendedSearch(true); if (!data.marketAvg || !data.comps?.length) { setNoResults(true); setScanning(false); return; } const marketAvg = data.marketAvg; const sampleCount = data.sampleCount; const region = data.region || "British Columbia"; const sourceLabel = (data.sources || []).join(" + ") || "BC Dealerships"; const comps = (data.bestComps || data.comps || []).map(c => ({ ...c, // Keep original listing price — km adjustment shown separately price: c.price, adjustedPrice: c.adjustedPrice || c.price, })); console.log("[Scan] Comps URLs:", comps.map(c => c.url)); const scan = { marketAvg, sampleCount, region, steps: SCAN_STEPS, sourceLabel, verifiedCount: data?.verifiedCount || 0 }; set({ ...state, scan, comps }); window.trackEvent?.("scan_complete", { year: state.year, make: state.make, model: state.model, market_avg: marketAvg, offer: parseNum(state.offer), gap: marketAvg - parseNum(state.offer), sample_count: sampleCount, }); } catch (err) { console.warn("[Scan] Error:", err); setNoResults(true); setScanning(false); return; } finally { setScanning(false); } }; const offerN = parseNum(state.offer); // marketAvg from Worker = real listing prices (no km adjustment) const recovery = state.scan && offerN ? state.scan.marketAvg - offerN : null; const recoveryPct = recovery && offerN ? (recovery / offerN) * 100 : null; const sampleData = () => { set({ ...state, year: "2019", make: "Toyota", model: "RAV4", trim: "XLE", modelOther: "", km: "78400", offer: "24800", claim: "AB1234567", scan: null, comps: [{ url: "", price: "" }, { url: "", price: "" }, { url: "", price: "" }], }); }; return ( <> {/* Mobile-only sample Delta — shows BEFORE the form to motivate completion */} {isMobile && (
· SAMPLE RESULT ·
You could be owed an additional
+ $6,732
Based on 3 real BC dealer listings · takes 15 seconds
↓ Enter your vehicle below to see your number
)}
· Free diagnostic ·

Tell us about your vehicle.

Our AI scans live BC market listings and computes your gap. No sign-up, no card.

{/* STEP 1 — Vehicle — smart single text field */}
set({ ...state, km: e.target.value })} placeholder="78,400" style={{ paddingRight: 44 }}/>
{/* STEP 2 — ICBC offer */}
set({ ...state, offer: e.target.value, scan: null })} placeholder="24,800" style={{ paddingLeft: 28 }}/> $ set({ ...state, claim: e.target.value })} placeholder="AB1234567"/>
{/* Privacy assurance */}
{Icon.lock(12, C.good)} Your information stays on your device. We never store your vehicle or claim data.
{/* STEP 3 — Scan & Compare (AI) */} {!state.scan && !scanning && (
{Icon.sparkle(11, C.gold)} AI-powered
Run market scan
We'll search public BC dealer listings matching your vehicle. Results are market estimates only.
See what I'm owed →
)} {scanning && (
{/* Header with spinner */}
Scanning the BC market — please wait...
{/* Progress bar — fills over 11 seconds */}
{/* Step list */} {[ "Searching BC dealer listings for your vehicle...", "Verifying prices and availability in your area...", "Calculating your market value gap...", ].map((t, i) => (
{i < scanStep ? Icon.check(10, "#fff") : i === scanStep ?
: null} {t}
))} {extendedSearch && (
{Icon.sparkle(12, C.gold)} Few results in Metro Vancouver — expanding search to all of BC...
)}
)} {/* No results — email capture */} {noResults && !scanning && (
🔍
No listings found for your vehicle
We couldn't find comparable BC listings right now for your {state.year} {state.make} {state.model}. Leave your email and we'll research it manually and get back to you within 24 hours — at no cost.
{!notifySubmitted ? (
setNotifyEmail(e.target.value)} style={{ flex: 1, minWidth: 200, padding: "10px 14px", borderRadius: 8, border: `1px solid rgba(255,255,255,0.2)`, background: "rgba(255,255,255,0.08)", color: "#fff", font: `400 14px ${SANS}`, outline: "none", }} /> { if (!notifyEmail.includes("@")) return; // Send to a simple mailto or store — for now just confirm const subject = encodeURIComponent(`FairClaimBC Manual Research — ${state.year} ${state.make} ${state.model}`); const body = encodeURIComponent( `Vehicle: ${state.year} ${state.make} ${state.model} ${state.trim}\nKm: ${state.km}\nICBC Offer: $${state.offer}\nClaim #: ${state.claim}\nEmail: ${notifyEmail}` ); window.open(`mailto:info@fairclaimbc.ca?subject=${subject}&body=${body}`); setNotifySubmitted(true); window.trackEvent?.("no_results_email", { year: state.year, make: state.make, model: state.model, email: notifyEmail }); }}> Notify me
) : (
✓ Got it! We'll research your {state.year} {state.make} {state.model} and email you at {notifyEmail} within 24 hours.
)}
)} {state.scan && !scanning && !noResults && ( { window.trackEvent?.("unlock_clicked", { year: state.year, make: state.make, model: state.model }); onReveal(computeDelta({ offer: state.offer, comps: state.comps, marketAvg: state.scan?.marketAvg })); }} onRescan={() => set({ ...state, scan: null })} /> )}
{Icon.sparkle(13, C.navy)} Use sample data {!canScan && !state.scan && !scanning && ( Complete vehicle info and ICBC offer to scan. )}
); } // Locked scan result — shows market avg + recovery, blurs comparables function LockedScanResult({ scan, recovery, recoveryPct, offer, device, onUnlock, onRescan }) { const isMobile = device === "mobile"; const positive = recovery > 0; return (
{/* Header strip */}
{Icon.check(11, "#fff")} Scan complete. {scan.sampleCount} listings matched in {scan.region} {scan.sourceLabel && via {scan.sourceLabel}}
{scan.verifiedCount > 0 && ( {scan.verifiedCount} Verified )}
{/* Result panel */}
{/* Market average — visible */}
BC market average
{fmt(scan.marketAvg)}
Weighted across {scan.sampleCount} comparable listings · trim and mileage normalized
{/* Estimated recovery — visible */}
You could recover
{positive ? "+" : ""}{fmt(recovery)}
{positive ? <>+{recoveryPct.toFixed(1)}% above ICBC's offer of {fmt(offer)} : <>ICBC's offer is at or above market.}
{/* Locked detail teaser */}
{/* blurred fake content */}
Comparable listings & full methodology
{[1,2,3].map(i => (
2019 RAV4 XLE · 78,400 km · Vancouver · Autotrader $31,995
))}
Market comparison based on publicly listed BC dealer prices at time of scan. Data may not reflect all available listings.
{/* lock overlay */}
{Icon.lock(20, "#fff")}
Get your full Delta Report + dispute letter
See all comparable listings found, your full ACV breakdown, and a 2-page settlement-grade letter ready to send to ICBC.
{Icon.sparkle(15, "#fff")} Get my free report today {Icon.arrow(14, "#fff")}
{Icon.check(11, C.good)} Free during our launch period — normally $49
{Icon.lock(11, C.steel)} No credit card required. No sign-up needed.
{/* Next Steps - shown when recovery is positive */} {positive && (
{Icon.arrow(14, C.gold)} What happens after you unlock your letter
{[ { n: "1", t: "Download your 2-page dispute letter", d: "Includes your BC market evidence and the ACV calculation your adjuster must consider." }, { n: "2", t: "Email it to your ICBC adjuster", d: "Their contact is on your offer letter. Use your claim number in the subject line." }, { n: "3", t: "ICBC has 14 business days to respond", d: "Under Section 152 of the Insurance Act, they must review your evidence." }, { n: "4", t: "No response? Consider escalating", d: "You may have options to escalate your dispute. Consult a BC lawyer or visit the BC government website for guidance on your rights." }, ].map((s, i) => (
{s.n}
{s.t}. {s.d}
))}
Results may vary. This tool provides market data only — not legal advice.
)}
); } function FormStepHeader({ n, title, sub, badge }) { return (
{n}
{title}
{sub}
{badge && {badge}}
); } function ComparableRow({ idx, c, onChange, device }) { const isMobile = device === "mobile"; const src = detectSource(c.url); return (
{!isMobile && (
0{idx + 1}
)}
onChange("url", e.target.value)} placeholder="autotrader.ca/a/toyota/rav4/..." style={{ paddingLeft: 36, height: 40 }}/> {Icon.link(14, C.steel)}
{isMobile && (
0{idx + 1} · {src}
)}
onChange("price", e.target.value)} placeholder="29,995" style={{ paddingLeft: 24, height: 40 }}/> $
{!isMobile && (
{src}
)}
); } function LiveDelta({ delta, device }) { const has = delta.prices.length >= 1 && delta.offer; const isMobile = device === "mobile"; return (
Live preview
{has ? <>Market avg {fmt(delta.marketAvg)} vs offer {fmt(delta.offer)} : <>Add comparables and we'll show the gap in real time. }
{has && (
Estimated recovery
0 ? "#fff" : C.steelLight, letterSpacing: "-.02em" }}> {delta.gap > 0 ? "+" : ""}{fmt(delta.gap)}
)}
); } // ───────────────────────────────────────────────────────────── // FAQ — warmer // ───────────────────────────────────────────────────────────── function FAQSection({ device }) { const [open, setOpen] = React.useState(0); const isMobile = device === "mobile"; return (
· Questions ·

What BC drivers ask before paying.

{FAQ.map((it, i) => { const isOpen = i === open; return (
{isOpen && (
{it.a}
)}
); })}
); } // ───────────────────────────────────────────────────────────── // FOOTER // ───────────────────────────────────────────────────────────── function Footer({ device }) { const isMobile = device === "mobile"; return (
{Icon.shield(16, "#fff")} FairClaimBC · British Columbia
FairClaimBC is an independent data service and is not affiliated with ICBC or any government body. This tool provides market comparison data and document drafting assistance only — it is not legal advice. Market data is sourced from public BC dealer listings and may not reflect all available comparables or current market conditions. Results are estimates only and individual outcomes will vary. For legal advice, consult a licensed BC lawyer. By using this tool you agree that FairClaimBC is not responsible for the outcome of any insurance dispute.
Privacy Terms Refund policy Contact
); } // ───────────────────────────────────────────────────────────── // KNOW YOUR RIGHTS // ───────────────────────────────────────────────────────────── function KnowYourRights({ device }) { const isMobile = device === "mobile"; const rights = [ { icon: "§", title: "You have the right to dispute any total loss offer", body: "Under Section 152 of the Insurance (Vehicle) Act, you can formally challenge ICBC's valuation at any time before signing a release." }, { icon: "📋", title: "ICBC must consider your market evidence", body: "Your adjuster is legally required to review documented comparable listings when calculating Actual Cash Value (ACV)." }, { icon: "⏱", title: "You have 2 years from the accident date", body: "The limitation period for disputing a total loss settlement in BC is 2 years. Act before the deadline." }, { icon: "⚖", title: "Free escalation through the Civil Resolution Tribunal", body: "If ICBC does not resolve your dispute, you can escalate to the CRT at no cost. The CRT handles claims under $35,000." }, { icon: "🛡", title: "ICBC cannot cancel your policy for disputing", body: "Submitting a formal dispute is a protected legal right. Your insurance coverage is not affected by disputing an offer." }, ]; return (
· Know your rights ·

BC law is on your side.

Most BC drivers don't know these rights exist. ICBC's offer is a starting point, not the final word.

{rights.map((r, i) => (
{ e.currentTarget.style.background = "rgba(255,255,255,0.09)"; e.currentTarget.style.borderColor = `${C.gold}66`; }} onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.05)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)"; }}>
{r.icon}
{r.title}
{r.body}
))} {/* Full-width CTA card */}
{Icon.shield(20, C.gold)}
Bottom line: If you have not signed a release, you can dispute right now. FairClaimBC gives you the professional letter to do it.
); } // ───────────────────────────────────────────────────────────── // TESTIMONIALS // ───────────────────────────────────────────────────────────── function Testimonials({ device }) { const isMobile = device === "mobile"; const reviews = [ { quote: "My adjuster told me the offer was final. Two weeks after sending this letter, they added $4,800 to the settlement. I had no idea I could even do this.", name: "Sandra R.", location: "Surrey, BC", vehicle: "2020 Honda CR-V", recovery: "+$4,800", }, { quote: "The letter was ready in minutes and it looked completely professional. ICBC responded in 9 days. Worth every penny of the $49.", name: "Michael T.", location: "Burnaby, BC", vehicle: "2018 Toyota Camry", recovery: "+$3,200", }, { quote: "I was about to accept $18,500 for my truck. The scan showed the market was at $23,200. After sending the letter I got $22,400. I'm so glad I didn't just sign.", name: "Jamie L.", location: "Langley, BC", vehicle: "2019 Ford F-150", recovery: "+$3,900", }, ]; return (
· BC drivers ·

Real results from real claims.

BC drivers who didn't accept the first offer. Names abbreviated for privacy.

{reviews.map((r, i) => (
{ e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 16px 40px -16px rgba(14,42,71,0.16)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 4px 20px -8px rgba(14,42,71,0.07)"; }}> {/* Stars */}
{[1,2,3,4,5].map(s => ( ★ ))}
{/* Quote */}

"{r.quote}"

{/* Recovery badge */}
{Icon.check(12, C.good)} {r.recovery} recovered
{/* Person */}
{r.name[0]}
{r.name}
{r.location} · {r.vehicle}
))}
{/* Average recovery callout */}
Average recovery above first offer
$4,210
Based on BC total loss disputes where a FairClaimBC letter was submitted and ICBC revised their offer. Individual results vary based on vehicle, comparables, and adjuster.
); } Object.assign(window, { C, SANS, SERIF, MONO, Icon, Field, Input, Select, Btn, CanadaFlag, Header, TrustBar, Hero, HeroIllustration, DiagnosticForm, ComparableRow, LiveDelta, LockedScanResult, KnowYourRights, Testimonials, HowItWorks, FAQSection, Footer, }); // v11