{/* Top bar */}

{/* Hero — "leaving on the table" */}

{/* Decorative gold beam */}

Your Delta Report

For your {state.year} {state.make} {state.model}

{delta.gap < 500 ? ( /* ── Fair offer — celebrate ── */ <>

🎉

ICBC's offer looks fair!

Based on {delta.prices.length} comparable{delta.prices.length !== 1 ? "s" : ""} in BC, your offer is{" "} within $500 of market value. {" "}That's a fair settlement — no dispute needed.

✓ You're in good hands — accept with confidence

) : ( /* ── Real gap — show the money ── */ <>

{delta.gap > 0 ? "You're leaving on the table" : "ICBC's offer is at or above market"}

Your offer is{" "} {Math.abs(delta.gapPct).toFixed(1)}% {delta.gap > 0 ? "below" : "above"} {" "} the BC market average from your {delta.prices.length} comparable{delta.prices.length !== 1 ? "s" : ""}. {delta.gap > 0 ? <>
You have technical grounds for a successful dispute. : <>
We found limited comparables — consider trying a broader trim or year range. }

)} {/* Comparison bars */}

{/* Comparable evidence */}

· Evidence ·

Your comparables — what justifies the gap

avg: {fmt(delta.marketAvg)}

{sorted.map((c, i) => { const diff = c.price - delta.offer; const pct = ((c.price - delta.marketAvg) / delta.marketAvg) * 100; return (

{ e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "0 12px 28px -10px rgba(14,42,71,0.15)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 2px 8px rgba(14,42,71,0.04)"; }}>

{c.source || detectSource(c.url)} 0 ? C.good : C.steel, padding: "3px 8px", borderRadius: 4, background: pct > 0 ? C.goodSoft : C.surface, }}> {pct > 0 ? "+" : ""}{pct.toFixed(1)}% vs avg

{/* ── Verified Link badge ───────────────────────────────── */} {c.verified === true && (

Verified Link · HTTP 200

)} {c.verified === false && (

≈ Estimated

)} {/* Dealer name — clickable link to listing */} {c.url ? ( e.currentTarget.style.color = C.navy} onMouseLeave={(e) => e.currentTarget.style.color = C.accent}> {c.dealer || detectSource(c.url)} {Icon.link(11, C.accent)} ) : ( {c.dealer || detectSource(c.url)} )} {/* Price (km-adjusted) */}

{fmt(c.price)}

{/* Km badge + adjustment */} {c.km && (

{Number(c.km).toLocaleString("en-CA")} km

)}

{Icon.arrow(11, C.good)} +{fmt(diff)} above offer

{/* View listing button — always visible at the bottom */} {c.url && ( { e.currentTarget.style.background = C.navy; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = C.navy; }} onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = C.navy; e.currentTarget.style.borderColor = C.line; }}> {Icon.link(12, "currentColor")} Ver vehículo en {c.source || detectSource(c.url)} )}

); })}

{/* CTA */}

· Generate the letter ·

Your dispute letter — based on real BC market data.

A 2-page technical letter citing the Insurance (Vehicle) Act §152, your comparables, and a formal request for revised settlement.

{Icon.check(12, C.gold)} PDF + Word {Icon.check(12, C.gold)} Cited & formatted {Icon.check(12, C.gold)} No sign-up required

{paid ? ( // Already paid — just show the action button, no price <>

{Icon.check(11, C.good)} Letter unlocked

View my letter {Icon.arrow(14, "#fff")} ) : ( // First time — show price and trigger CHECKOUT (never go directly to letter) <>

${price} USD · one-time

Generate my letter {Icon.arrow(14, "#fff")} {Icon.lock(11, C.steelLight)} Secured by Stripe )}

{steps.map((s, i) => { const n = i + 1; const done = n < current; const active = n === current; return (

{done ? Icon.check(12, "#fff") : n}

{!isMobile && ( {s} )}

{i < steps.length - 1 && (

)} ); })}

); } // Animated count-up for the big number function BigNumber({ n, device }) { const isNeg = (n || 0) < 0; const target = Math.round(Math.abs(n || 0)); const [v, setV] = useState(0); useEffect(() => { let raf; const start = performance.now(); const dur = 1100; const tick = (t) => { const p = Math.min(1, (t - start) / dur); const eased = 1 - Math.pow(1 - p, 3); setV(Math.round(target * eased)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [target]); return (

{isNeg ? "−" : "+"} {fmt(v)}

); } function CompareBars({ offer, marketAvg }) { const max = Math.max(offer, marketAvg); const offerPct = (offer / max) * 100; const marketPct = (marketAvg / max) * 100; return (

); } function BarRow({ label, value, pct, color, emphasis }) { return (

{label} {fmt(value)}

); } // ───────────────────────────────────────────────────────────── // CHECKOUT MODAL (Phase 3a) — warmer // ───────────────────────────────────────────────────────────── function Checkout({ price, onClose, onPaid, state, delta }) { const [card, setCard] = useState("4242 4242 4242 4242"); const [exp, setExp] = useState("12/27"); const [cvc, setCvc] = useState("123"); const [email, setEmail] = useState(""); const [busy, setBusy] = useState(false); const submit = (e) => { e?.preventDefault(); setBusy(true); setTimeout(() => onPaid(), 800); }; return (

{Icon.shield(13, "#fff")}

FairClaimBC · secure checkout

One-time payment

${price}.00 USD

Dispute letter ${price}.00

{state.year} {state.make} {state.model} · est. recovery {fmt(delta.gap)}

); } // ───────────────────────────────────────────────────────────── // LETTER SCREEN (Phase 3b) — warmer // ───────────────────────────────────────────────────────────── function LetterScreen({ state, delta, device, tone, onRestart }) { const [status, setStatus] = useState("loading"); const [letterText, setLetterText] = useState(""); useEffect(() => { let cancelled = false; (async () => { const args = { vehicle: { year: state.year, make: state.make, model: state.model === "Other" && state.modelOther ? state.modelOther : [state.model, state.trim].filter(Boolean).join(" "), km: state.km }, offer: delta.offer, claim: state.claim, comps: state.comps, marketAvg: delta.marketAvg, gap: delta.gap, tone, }; const res = await generateLetter(args); if (cancelled) return; if (res.ok) { setLetterText(res.text); setStatus("ready"); } else { setLetterText(fallbackLetter(args)); setStatus("ready"); } })(); return () => { cancelled = true; }; }, []); const isMobile = device === "mobile"; return (

{Icon.check(15, C.good)}

Payment confirmed · letter ready

· Your letter ·

Your dispute letter is ready.

Two pages, cited, and ready to review. Tone: {tone === "assertive" ? "Assertive" : "Measured"}. Reply to your adjuster's email and attach the PDF.

{/* Letter preview — paper */}

{/* Watermark seal */} {status === "loading" && (

Drafting your letter…

Cross-referencing your comparables against the Insurance (Vehicle) Act §152 and ICBC Claims Manual standards.

{[0,1,2].map(i => ( ))}

)} {status === "ready" && (

{letterText}

)}

{/* Side panel */}

Download

downloadAsPdfStub(letterText)} disabled={status !== "ready"}> {Icon.doc(14, "#fff")} Download PDF downloadAsWord(letterText)} disabled={status !== "ready"}> {Icon.doc(14, C.navy)} Download .doc (Word)

Recovery target

{fmt(delta.marketAvg)}

Revised settlement at BC market avg —
+{fmt(delta.gap)} over the initial offer.

{Icon.sparkle(12, C.gold)} What to do next

Reply to your adjuster's email and attach the PDF. Include your claim number in the subject line. ICBC must respond within 14 business days.

Results are market estimates only. Individual outcomes may vary. Not legal advice.

); } function Spinner() { return (

); } // ───────────────────────────────────────────────────────────── // APP ORCHESTRATOR // ───────────────────────────────────────────────────────────── function ICBCShieldApp({ device, heroVariant, price, letterTone, showTrustBar }) { const [state, setState] = useState({ year: "", make: "", model: "", trim: "", modelOther: "", km: "", offer: "", claim: "", scan: null, comps: [{ url: "", price: "" }, { url: "", price: "" }, { url: "", price: "" }], }); const [screen, setScreen] = useState("landing"); const [showCheckout, setShowCheckout] = useState(false); const [paid, setPaid] = useState(false); // once paid, never show checkout again const [pendingDelta, setPendingDelta] = useState(null); // holds delta while checkout is open const [delta, setDelta] = useState(null); const containerRef = useRef(null); // ── URL sync — each screen gets its own path for analytics ── const SCREEN_URLS = { landing: "/", delta: "/report", letter: "/letter" }; useEffect(() => { if (containerRef.current) containerRef.current.scrollTop = 0; // Push URL change to browser history (no reload) const url = SCREEN_URLS[screen] || "/"; if (window.location.pathname !== url) { window.history.pushState({ screen }, "", url); } }, [screen]); // Handle browser back/forward buttons useEffect(() => { const onPop = (e) => { const s = e.state?.screen || "landing"; setScreen(s); if (s === "landing") { setDelta(null); setPendingDelta(null); setPaid(false); } }; window.addEventListener("popstate", onPop); return () => window.removeEventListener("popstate", onPop); }, []); const scrollToId = (id) => { const el = document.getElementById(id) || containerRef.current?.querySelector("#" + id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }; const jumpToForm = () => { // Small delay so React finishes rendering before scroll setTimeout(() => scrollToId("diagnostic"), 50); }; return (

{screen === "landing" && ( <>

{showTrustBar && } { // Show free celebration modal first setPendingDelta(d); setShowCheckout(true); }} />

); } // ───────────────────────────────────────────────────────────── // CANVAS MOUNT // ───────────────────────────────────────────────────────────── function CanvasApp() { const [t] = useTweaks(window.__TWEAKS_DEFAULTS); return (

); } function Root() { const [t] = useTweaks(window.__TWEAKS_DEFAULTS); window.applyTheme?.(t.theme || "warm"); // Detect real device size — render app directly, no canvas const isMobile = window.innerWidth < 768; const device = isMobile ? "mobile" : "desktop"; return ( ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); // v11