// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
/**
 * /stats/marche — la mesure à l'épreuve du marché actif.
 * Compare l'estimation Vrai-Prix au prix demandé de ~49 000 annonces
 * réelles (copie de la base Immo-Ka, merge table vp_eval), et montre —
 * démarche — ce que l'écart mesure vraiment : l'erreur du
 * modèle PLUS la stratégie d'affichage du vendeur.
 */
"use client";
import { locNum } from "./MetricViz";
import { useLang } from "./LangContext";

/* ---------------------------------- types --------------------------------- */
interface Slice {
  key: string;
  n: number;
  medianRatio: number | null;
  mdape: number | null;
  within10: number | null;
  within20: number | null;
  askAbove: number | null;
  inP10P90: number | null;
  medianAsk: number | null;
  medianEst: number | null;
  medianDiff: number | null;
  medianDiffPct: number | null;
  p25Diff: number | null;
  p75Diff: number | null;
}
interface MethodRow {
  key: string;
  main: boolean;
  n: number;
  coverage: number | null;
  medianRatio: number | null;
  mdape: number | null;
  within10: number | null;
  within20: number | null;
  medianDiff: number | null;
}
export interface MarcheStats {
  generated: string;
  source: {
    app: string;
    copiedAt: string;
    totalListings: number;
    geolocated: number;
    evaluated: number;
    valid: number;
    matchMedianM: number | null;
  };
  global: Omit<Slice, "key">;
  methods: MethodRow[];
  byConfidence: Slice[];
  byType: Slice[];
  byRegion: Slice[];
  byCity: Slice[];
  byBracket: Slice[];
  histogram: { below: number; above: number; bins: { lo: number; hi: number; n: number }[] };
  scatter: { p: number; e: number; l: string }[];
}

/* -------------------------------- helpers -------------------------------- */
const money = (v: number | null, lang: string) =>
  v == null
    ? "—"
    : new Intl.NumberFormat(lang === "fr" ? "fr-CA" : "en-CA", {
        style: "currency",
        currency: "CAD",
        maximumFractionDigits: 0,
      }).format(v);
const pct = (v: number | null, lang: string, frac = 1) =>
  v == null ? "—" : `${(v * 100).toLocaleString(lang === "fr" ? "fr-CA" : "en-CA", { maximumFractionDigits: frac })} %`;

function SectionTitle({ kicker, title }: { kicker: string; title: string }) {
  return (
    <div className="mb-4 mt-12">
      <span className="kicker">{kicker}</span>
      <h2 className="vp-display mt-2 text-[22px] font-bold uppercase tracking-[-0.02em]">{title}</h2>
    </div>
  );
}

function Kpi({ label, value, hint }: { label: string; value: string; hint?: string }) {
  return (
    <div className="vp-card p-4">
      <div className="text-[11px] uppercase tracking-[0.08em] text-ink-3">{label}</div>
      <div className="vp-display mt-1 text-[26px] font-bold leading-none">{value}</div>
      {hint ? <div className="mt-2 text-[12px] leading-snug text-ink-2">{hint}</div> : null}
    </div>
  );
}

/* ------------------------- histogramme du ratio ------------------------- */
function RatioHistogram({ s, fr }: { s: MarcheStats; fr: boolean }) {
  const bins = [
    { lo: 0, hi: 0.5, n: s.histogram.below },
    ...s.histogram.bins,
    { lo: 1.5, hi: Infinity, n: s.histogram.above },
  ];
  const max = Math.max(...bins.map((b) => b.n));
  const W = 720;
  const H = 210;
  const pad = { l: 8, r: 8, t: 14, b: 26 };
  const bw = (W - pad.l - pad.r) / bins.length;
  // repère x du ratio 1,0 : frontière entre les bacs 0,95-1,00 et 1,00-1,05
  const oneIdx = 1 + s.histogram.bins.findIndex((b) => Math.abs(b.lo - 1) < 1e-9);
  const oneX = pad.l + oneIdx * bw;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="w-full" role="img"
      aria-label={fr ? "Distribution du ratio estimation / prix demandé" : "Distribution of estimate / asking price ratio"}>
      {bins.map((b, i) => {
        const h = max ? ((H - pad.t - pad.b) * b.n) / max : 0;
        const near1 = b.lo >= 0.9 - 1e-9 && b.hi <= 1.1 + 1e-9;
        return (
          <rect key={i} x={pad.l + i * bw + 1} y={H - pad.b - h} width={bw - 2} height={h}
            fill={near1 ? "var(--accent)" : "var(--ink-3)"} opacity={near1 ? 1 : 0.55} />
        );
      })}
      <line x1={oneX} y1={pad.t - 6} x2={oneX} y2={H - pad.b} stroke="var(--ink)" strokeDasharray="3 3" />
      <text x={oneX + 5} y={pad.t + 4} fontSize="11" fill="var(--ink)" fontFamily="var(--font-mono)">
        1,0 — {fr ? "estimation = prix demandé" : "estimate = asking price"}
      </text>
      {[0.5, 0.75, 1.0, 1.25, 1.5].map((v) => {
        const idx = 1 + (v - 0.5) / 0.05; // frontières des bacs intérieurs
        return (
          <text key={v} x={pad.l + idx * bw} y={H - 8} fontSize="10" textAnchor="middle" fill="var(--ink-3)"
            fontFamily="var(--font-mono)">
            {v.toLocaleString(fr ? "fr-CA" : "en-CA")}
          </text>
        );
      })}
    </svg>
  );
}

/* --------------------- nuage prix demandé × estimation -------------------- */
function AskScatter({ s, fr }: { s: MarcheStats; fr: boolean }) {
  const CAP = 1_500_000;
  const pts = s.scatter.filter((d) => d.p <= CAP && d.e <= CAP);
  const W = 360;
  const H = 360;
  const pad = 34;
  const sc = (v: number) => pad + ((W - 2 * pad) * v) / CAP;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="w-full max-w-[420px]" role="img"
      aria-label={fr ? "Nuage prix demandé vs estimation" : "Asking price vs estimate scatter"}>
      {[500000, 1000000, 1500000].map((v) => (
        <g key={v}>
          <line x1={sc(v)} y1={H - pad} x2={sc(v)} y2={pad} stroke="var(--line-soft)" />
          <line x1={pad} y1={H - sc(v)} x2={W - pad} y2={H - sc(v)} stroke="var(--line-soft)" />
          <text x={sc(v)} y={H - pad + 14} fontSize="9" textAnchor="middle" fill="var(--ink-3)" fontFamily="var(--font-mono)">
            {v / 1000000 >= 1 ? `${v / 1000000}M` : `${v / 1000}k`}
          </text>
          <text x={pad - 6} y={H - sc(v) + 3} fontSize="9" textAnchor="end" fill="var(--ink-3)" fontFamily="var(--font-mono)">
            {v / 1000000 >= 1 ? `${v / 1000000}M` : `${v / 1000}k`}
          </text>
        </g>
      ))}
      <line x1={sc(0)} y1={H - sc(0)} x2={sc(CAP)} y2={H - sc(CAP)} stroke="var(--ink)" strokeDasharray="4 3" />
      {pts.map((d, i) => (
        <circle key={i} cx={sc(d.p)} cy={H - sc(d.e)} r={1.6}
          fill={d.l === "A" ? "var(--accent)" : d.l === "B" ? "var(--accent-bright)" : "var(--ink-3)"} opacity={0.5} />
      ))}
      <text x={W / 2} y={H - 4} fontSize="10" textAnchor="middle" fill="var(--ink-2)">
        {fr ? "Prix demandé" : "Asking price"}
      </text>
      <text x={10} y={H / 2} fontSize="10" textAnchor="middle" fill="var(--ink-2)" transform={`rotate(-90 10 ${H / 2})`}>
        {fr ? "Estimation Vrai-Prix" : "Vrai-Prix estimate"}
      </text>
    </svg>
  );
}

/* ------------------------------ tableau générique ------------------------------ */
function SliceTable({ rows, label, fr, keyHeader }: { rows: Slice[]; label?: string; fr: boolean; keyHeader: string }) {
  return (
    <div className="vp-card overflow-x-auto p-0">
      {label ? <div className="border-b border-[var(--line)] px-4 py-2 text-[12px] font-semibold uppercase tracking-[0.06em]">{label}</div> : null}
      <table className="w-full text-[13px]">
        <thead>
          <tr className="border-b border-[var(--line)] text-left text-[11px] uppercase tracking-[0.06em] text-ink-3">
            <th className="px-4 py-2">{keyHeader}</th>
            <th className="px-2 py-2 text-right">n</th>
            <th className="px-2 py-2 text-right">{fr ? "Ratio méd." : "Med. ratio"}</th>
            <th className="px-2 py-2 text-right">MdAPE</th>
            <th className="px-2 py-2 text-right">±20 %</th>
            <th className="px-2 py-2 text-right">{fr ? "Écart méd." : "Med. gap"}</th>
            <th className="px-4 py-2 text-right">{fr ? "Prix méd." : "Med. ask"}</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => (
            <tr key={r.key} className="border-b border-[var(--line-soft)] last:border-0">
              <td className="px-4 py-1.5 font-medium">{r.key}</td>
              <td className="px-2 py-1.5 text-right font-mono text-[12px]">{locNum(r.n, fr ? "fr" : "en", { maxFrac: 0 })}</td>
              <td className="px-2 py-1.5 text-right font-mono text-[12px]">
                {r.medianRatio == null ? "—" : r.medianRatio.toLocaleString(fr ? "fr-CA" : "en-CA", { minimumFractionDigits: 3, maximumFractionDigits: 3 })}
              </td>
              <td className="px-2 py-1.5 text-right font-mono text-[12px]">{pct(r.mdape, fr ? "fr" : "en")}</td>
              <td className="px-2 py-1.5 text-right font-mono text-[12px]">{pct(r.within20, fr ? "fr" : "en", 0)}</td>
              <td className="px-2 py-1.5 text-right font-mono text-[12px]">{money(r.medianDiff, fr ? "fr" : "en")}</td>
              <td className="px-4 py-1.5 text-right font-mono text-[12px]">{money(r.medianAsk, fr ? "fr" : "en")}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ---------------------------------- vue ---------------------------------- */
export default function MarcheView({ s }: { s: MarcheStats }) {
  const { lang } = useLang();
  const fr = lang === "fr";
  const g = s.global;
  const copied = new Date(s.source.copiedAt + "T12:00:00").toLocaleDateString(fr ? "fr-CA" : "en-CA", {
    year: "numeric", month: "long", day: "numeric",
  });

  return (
    <div className="mx-auto max-w-5xl px-4 pt-10 sm:pt-14">
      {/* ---- manchette ---- */}
      <section>
        <span className="kicker">{fr ? "Validation externe" : "External validation"}</span>
        <h1 className="vp-display mt-3 text-[clamp(26px,4.6vw,46px)] font-bold uppercase leading-[1.02] tracking-[-0.03em]">
          {fr ? "La mesure à l'épreuve du marché" : "The measure vs. the market"}
        </h1>
        <p className="mt-4 max-w-3xl text-[15px] leading-relaxed text-ink-2">
          {fr ? (
            <>
              Nous avons évalué avec le moteur Vrai-Prix{" "}
              <b>{locNum(s.source.evaluated, "fr", { maxFrac: 0 })} annonces réellement à vendre</b> au Québec
              (base de l&apos;agrégateur Immo-Ka, copiée le {copied}) et comparé chaque estimation au{" "}
              <b>prix demandé</b> par le vendeur. C&apos;est un test grandeur nature — et une leçon d&apos;évaluation :
              l&apos;écart observé mélange l&apos;erreur du modèle <i>et</i> la stratégie d&apos;affichage.
            </>
          ) : (
            <>
              We ran the Vrai-Prix engine on{" "}
              <b>{locNum(s.source.evaluated, "en", { maxFrac: 0 })} properties actually for sale</b> in Québec
              (Immo-Ka aggregator database, copied on {copied}) and compared each estimate to the seller&apos;s{" "}
              <b>asking price</b>. A full-scale test — and an appraisal lesson: the observed gap mixes model
              error <i>and</i> pricing strategy.
            </>
          )}
        </p>
        <div className="mt-8 grid grid-cols-1 gap-3 sm:grid-cols-3">
          <Kpi
            label={fr ? "Annonces évaluées" : "Listings appraised"}
            value={locNum(s.source.valid, fr ? "fr" : "en", { maxFrac: 0 })}
            hint={fr ? `sur ${locNum(s.source.totalListings, "fr", { maxFrac: 0 })} annonces actives publiées` : `of ${locNum(s.source.totalListings, "en", { maxFrac: 0 })} active published listings`}
          />
          <Kpi
            label={fr ? "Ratio médian estimation / prix demandé" : "Median estimate / asking ratio"}
            value={g.medianRatio == null ? "—" : g.medianRatio.toLocaleString(fr ? "fr-CA" : "en-CA", { minimumFractionDigits: 3 })}
            hint={
              fr
                ? `les vendeurs affichent en médiane ${pct(g.medianDiffPct, "fr")} au-dessus de notre estimation`
                : `sellers list a median ${pct(g.medianDiffPct, "en")} above our estimate`
            }
          />
          <Kpi
            label={fr ? "Prix demandés dans P10-P90" : "Asking prices within P10-P90"}
            value={pct(g.inP10P90, fr ? "fr" : "en")}
            hint={fr ? "part des prix demandés couverts par notre intervalle de confiance" : "share of asking prices covered by our confidence interval"}
          />
        </div>
      </section>

      {/* ---- avertissement ---- */}
      <div className="vp-card mt-8 border-l-4 border-l-[var(--accent)] p-4 text-[13.5px] leading-relaxed text-ink-2">
        {fr ? (
          <>
            <b className="text-ink">Prix demandé ≠ valeur marchande.</b> Le moteur est calibré sur des{" "}
            <b>transactions réelles</b> (MdAPE 11,0 % contre les prix de vente). Face aux prix <i>demandés</i>, l&apos;écart
            médian monte à {pct(g.mdape, "fr")} : la différence contient la marge de négociation, la surenchère
            d&apos;affichage et les propriétés atypiques — pas seulement l&apos;erreur du modèle.{" "}
            {pct(g.askAbove, "fr", 0)} des annonces sont affichées <b>au-dessus</b> de notre estimation, un biais
            attendu et documenté en évaluation.
          </>
        ) : (
          <>
            <b className="text-ink">Asking price ≠ market value.</b> The engine is calibrated on{" "}
            <b>real transactions</b> (11.0% MdAPE against sale prices). Against <i>asking</i> prices the median gap
            rises to {pct(g.mdape, "en")}: the difference contains negotiation margin, listing premium and atypical
            properties — not just model error. {pct(g.askAbove, "en", 0)} of listings are priced <b>above</b> our
            estimate, an expected and well-documented bias.
          </>
        )}
      </div>

      {/* ---- indicateurs ---- */}
      <SectionTitle kicker={fr ? "Indicateurs" : "Indicators"} title={fr ? "Performance globale" : "Overall performance"} />
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
        <Kpi label={fr ? "MdAPE vs prix demandé" : "MdAPE vs asking"} value={pct(g.mdape, fr ? "fr" : "en")} />
        <Kpi label={fr ? "Écart ≤ 10 %" : "Within 10%"} value={pct(g.within10, fr ? "fr" : "en")} />
        <Kpi label={fr ? "Écart ≤ 20 %" : "Within 20%"} value={pct(g.within20, fr ? "fr" : "en")} />
        <Kpi label={fr ? "Affichées au-dessus de l'estimation" : "Listed above estimate"} value={pct(g.askAbove, fr ? "fr" : "en")} />
        <Kpi label={fr ? "Prix demandé médian" : "Median asking price"} value={money(g.medianAsk, fr ? "fr" : "en")} />
        <Kpi label={fr ? "Estimation médiane" : "Median estimate"} value={money(g.medianEst, fr ? "fr" : "en")} />
      </div>

      {/* ---- l'écart en dollars ---- */}
      <SectionTitle kicker={fr ? "L'écart" : "The gap"} title={fr ? "Prix demandé − valeur estimée" : "Asking price − estimated value"} />
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
        <Kpi
          label={fr ? "Écart médian" : "Median gap"}
          value={money(g.medianDiff, fr ? "fr" : "en")}
          hint={fr ? "en médiane, le vendeur demande ce montant de plus que notre estimation" : "median amount sellers ask above our estimate"}
        />
        <Kpi
          label={fr ? "Écart médian (%)" : "Median gap (%)"}
          value={pct(g.medianDiffPct, fr ? "fr" : "en")}
          hint={fr ? "(prix demandé − estimation) / estimation" : "(asking − estimate) / estimate"}
        />
        <Kpi
          label={fr ? "Écart interquartile" : "Interquartile gap"}
          value={`${money(g.p25Diff, fr ? "fr" : "en")} … ${money(g.p75Diff, fr ? "fr" : "en")}`}
          hint={fr ? "la moitié des annonces se situe dans cette fourchette d'écart (P25-P75)" : "half of listings fall in this gap range (P25-P75)"}
        />
      </div>

      {/* ---- distribution ---- */}
      <SectionTitle kicker={fr ? "Distribution" : "Distribution"} title={fr ? "Ratio estimation / prix demandé" : "Estimate / asking price ratio"} />
      <div className="vp-card p-4">
        <RatioHistogram s={s} fr={fr} />
        <p className="mt-2 text-[12.5px] text-ink-2">
          {fr
            ? "En bleu : annonces où l'estimation est à ±10 % du prix demandé. La masse à gauche de 1,0 = vendeurs qui demandent plus que notre valeur estimée."
            : "Blue: listings where the estimate is within ±10% of asking. Mass left of 1.0 = sellers asking more than our estimated value."}
        </p>
      </div>

      {/* ---- nuage + confiance ---- */}
      <div className="mt-8 grid grid-cols-1 gap-4 lg:grid-cols-2">
        <div className="vp-card p-4">
          <div className="mb-2 text-[12px] font-semibold uppercase tracking-[0.06em]">
            {fr ? "Prix demandé × estimation (échantillon)" : "Asking × estimate (sample)"}
          </div>
          <AskScatter s={s} fr={fr} />
          <p className="mt-1 text-[12px] text-ink-2">
            {fr
              ? "Diagonale = accord parfait. Bleu foncé : confiance A · turquoise : B · gris : C-D."
              : "Diagonal = perfect agreement. Dark blue: confidence A · turquoise: B · grey: C-D."}
          </p>
        </div>
        <div>
          <SliceTable
            rows={s.byConfidence.filter((r) => r.n > 0)}
            fr={fr}
            keyHeader={fr ? "Indice de confiance" : "Confidence index"}
            label={fr ? "L'indice de confiance tient sa promesse" : "The confidence index keeps its promise"}
          />
          <p className="mt-2 px-1 text-[12.5px] leading-relaxed text-ink-2">
            {fr
              ? "Point clé : l'erreur croît exactement comme l'indice l'annonce — de "
              : "Key point: error grows exactly as the index predicts — from "}
            {pct(s.byConfidence[0]?.mdape ?? null, fr ? "fr" : "en")} (A){fr ? " à " : " to "}
            {pct(s.byConfidence[2]?.mdape ?? null, fr ? "fr" : "en")} (C).{" "}
            {fr
              ? "En confiance A, le ratio médian est de 1,000 : aucune sur- ni sous-évaluation systématique."
              : "At confidence A the median ratio is 1.000: no systematic over- or under-valuation."}
          </p>
        </div>
      </div>

      {/* ---- duel des méthodes ---- */}
      <SectionTitle kicker={fr ? "Trois méthodes" : "Three approaches"} title={fr ? "Le duel des méthodes" : "The method duel"} />
      <p className="mb-4 max-w-3xl text-[13.5px] leading-relaxed text-ink-2">
        {fr
          ? "Chaque annonce est aussi évaluée par les méthodes classiques de l'évaluation : la méthode du coût (terrain au marché + coût unitaire net du bâtiment, calibrés sur les ventes des 18 derniers mois grâce à la composition de chaque immeuble au rôle — aire d'étages, terrain, année, valeurs terrain/bâtiment) et le rôle indexé (étude de ratios de vente, IAAO). La mesure officielle Vrai-Prix reste l'hybride 65/35 — les autres servent de contre-expertise."
          : "Each listing is also appraised with the classic appraisal methods: the cost approach (market land + net unit building cost, calibrated on the last 18 months of sales using each building's composition in the roll — floor area, lot, year, land/building values) and the indexed roll (sales-ratio study, IAAO). The official Vrai-Prix measure remains the 65/35 hybrid — the others serve as cross-checks."}
      </p>
      <div className="vp-card overflow-x-auto p-0">
        <table className="w-full text-[13px]">
          <thead>
            <tr className="border-b border-[var(--line)] text-left text-[11px] uppercase tracking-[0.06em] text-ink-3">
              <th className="px-4 py-2">{fr ? "Méthode" : "Method"}</th>
              <th className="px-2 py-2 text-right">n</th>
              <th className="px-2 py-2 text-right">{fr ? "Ratio méd." : "Med. ratio"}</th>
              <th className="px-2 py-2 text-right">MdAPE</th>
              <th className="px-2 py-2 text-right">±10 %</th>
              <th className="px-2 py-2 text-right">±20 %</th>
              <th className="px-4 py-2 text-right">{fr ? "Écart méd." : "Med. gap"}</th>
            </tr>
          </thead>
          <tbody>
            {s.methods.map((m) => {
              const labels: Record<string, [string, string]> = {
                hybride: ["Hybride 65/35 — la mesure Vrai-Prix", "65/35 hybrid — the Vrai-Prix measure"],
                hedonique: ["Modèle hédonique seul (LightGBM)", "Hedonic model alone (LightGBM)"],
                comparables: ["Comparables ajustés seuls", "Adjusted comparables alone"],
                cout: ["Méthode du coût (calibrée marché)", "Cost approach (market-calibrated)"],
                role_indexe: ["Rôle indexé (ratios de vente IAAO)", "Indexed roll (IAAO sales ratios)"],
                ensemble: ["Ensemble — médiane hybride·coût·rôle", "Ensemble — median of hybrid·cost·roll"],
              };
              const lbl = labels[m.key]?.[fr ? 0 : 1] ?? m.key;
              return (
                <tr key={m.key}
                  className={`border-b border-[var(--line-soft)] last:border-0 ${m.main ? "bg-[var(--accent-soft)] font-semibold" : ""}`}>
                  <td className="px-4 py-1.5">{m.main ? "★ " : ""}{lbl}</td>
                  <td className="px-2 py-1.5 text-right font-mono text-[12px]">{locNum(m.n, fr ? "fr" : "en", { maxFrac: 0 })}</td>
                  <td className="px-2 py-1.5 text-right font-mono text-[12px]">
                    {m.medianRatio == null ? "—" : m.medianRatio.toLocaleString(fr ? "fr-CA" : "en-CA", { minimumFractionDigits: 3, maximumFractionDigits: 3 })}
                  </td>
                  <td className="px-2 py-1.5 text-right font-mono text-[12px]">{pct(m.mdape, fr ? "fr" : "en")}</td>
                  <td className="px-2 py-1.5 text-right font-mono text-[12px]">{pct(m.within10, fr ? "fr" : "en", 0)}</td>
                  <td className="px-2 py-1.5 text-right font-mono text-[12px]">{pct(m.within20, fr ? "fr" : "en", 0)}</td>
                  <td className="px-4 py-1.5 text-right font-mono text-[12px]">{money(m.medianDiff, fr ? "fr" : "en")}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <p className="mt-2 max-w-3xl text-[12.5px] leading-relaxed text-ink-2">
        {fr
          ? "Leçon du duel : aucune méthode ne domine partout — le coût peine sur les condos (quote-part de terrain au rôle) et les propriétés atypiques, les comparables seuls dérapent en marché mince, et c'est la combinaison qui stabilise la mesure."
          : "Duel takeaway: no method dominates everywhere — cost struggles with condos (land share in the roll) and atypical properties, comparables alone drift in thin markets, and the combination is what stabilizes the measure."}
      </p>

      {/* ---- segments ---- */}
      <SectionTitle kicker={fr ? "Segments" : "Segments"} title={fr ? "Où la mesure excelle — et où elle peine" : "Where the measure excels — and struggles"} />
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <SliceTable rows={s.byType} fr={fr} keyHeader={fr ? "Type d'annonce" : "Listing type"} label={fr ? "Par type de propriété" : "By property type"} />
        <SliceTable rows={s.byBracket} fr={fr} keyHeader={fr ? "Tranche de prix" : "Price bracket"} label={fr ? "Par tranche de prix demandé" : "By asking price bracket"} />
        <SliceTable rows={s.byRegion} fr={fr} keyHeader={fr ? "Région" : "Region"} label={fr ? "Par région" : "By region"} />
        <SliceTable rows={s.byCity} fr={fr} keyHeader={fr ? "Ville" : "City"} label={fr ? "Principales villes" : "Top cities"} />
      </div>

      {/* ---- méthode ---- */}
      <SectionTitle kicker={fr ? "Méthode" : "Method"} title={fr ? "D'où viennent ces chiffres" : "Where these numbers come from"} />
      <div className="vp-card p-4 text-[13.5px] leading-relaxed text-ink-2">
        {fr ? (
          <>
            Copie intégrale de la base d&apos;annonces <b>Immo-Ka</b> ({copied}) :{" "}
            {locNum(s.source.totalListings, "fr", { maxFrac: 0 })} annonces actives publiées, dont{" "}
            {locNum(s.source.geolocated, "fr", { maxFrac: 0 })} géolocalisées. Chaque annonce est{" "}
            <b>jumelée par coordonnées GPS</b> à l&apos;unité du rôle d&apos;évaluation MAMH la plus proche
            (rayon 75 m puis 250 m, départage par type, superficie habitable et année — distance médiane
            de jumelage : {locNum(s.source.matchMedianM, "fr", { maxFrac: 1, unit: "m" })}) ;{" "}
            {locNum(s.source.evaluated, "fr", { maxFrac: 0 })} ont ainsi été évaluées, et l&apos;analyse retient
            les {locNum(s.source.valid, "fr", { maxFrac: 0 })} à prix demandé ≥ 50 000 $ — le même seuil que les
            ventes retenues par le moteur. Le merge complet annonce ↔ estimations (hybride, coût, rôle indexé)
            est conservé dans la table <code className="font-mono text-[12px]">vp_eval</code> et chaque annonce
            passe par <i>exactement le même calcul</i> que le formulaire public : modèle hédonique + comparables
            ajustés, pondération 65 / 35. Ratio médian et MdAPE sont des médianes — robustes aux annonces
            extrêmes.
          </>
        ) : (
          <>
            Full copy of the <b>Immo-Ka</b> listings database ({copied}):{" "}
            {locNum(s.source.totalListings, "en", { maxFrac: 0 })} active published listings,{" "}
            {locNum(s.source.geolocated, "en", { maxFrac: 0 })} geolocated. Each listing is{" "}
            <b>matched by GPS coordinates</b> to the nearest MAMH assessment-roll unit (75 m then 250 m radius,
            tie-broken by type, living area and year — median match distance:{" "}
            {locNum(s.source.matchMedianM, "en", { maxFrac: 1, unit: "m" })});{" "}
            {locNum(s.source.evaluated, "en", { maxFrac: 0 })} were appraised, and the analysis keeps the{" "}
            {locNum(s.source.valid, "en", { maxFrac: 0 })} listings asking ≥ $50,000 — the same floor as the
            sales the engine uses. The full listing ↔ estimates merge (hybrid, cost, indexed roll) lives in the{" "}
            <code className="font-mono text-[12px]">vp_eval</code> table, and every listing goes through{" "}
            <i>exactly the same computation</i> as the public form: hedonic model + adjusted comparables, 65/35
            weighting. Median ratio and MdAPE are medians — robust to extreme listings.
          </>
        )}
      </div>
      <p className="mb-4 mt-6 text-[11.5px] text-ink-3">
        {fr
          ? `Généré le ${new Date(s.generated).toLocaleDateString("fr-CA")} · données Immo-Ka + rôles MAMH · à titre indicatif.`
          : `Generated ${new Date(s.generated).toLocaleDateString("en-CA")} · Immo-Ka data + MAMH rolls · for teaching purposes.`}
      </p>
    </div>
  );
}