// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
/**
 * ResultView — le « rapport de valeur » : l'écran central du produit.
 * Composition éditoriale v2 : masthead de rapport, estimation en très grands
 * chiffres, sections numérotées à filets (registre, calcul, marché, historique,
 * comparables), zéro carte — la hiérarchie vient de la typographie et des filets.
 */
"use client";
import { useState } from "react";
import Link from "next/link";
import { useLang } from "./LangContext";
import LeadForm from "./LeadForm";
import RadarMap from "./RadarMap";
import FavButton from "./FavButton";
import {
  BuildingGlyph,
  ConfidenceDial,
  CountUp,
  EraLine,
  locNum,
  LotDiagram,
  MarketIndexChart,
  PercentileBar,
  RangeBar,
  ValueSplit,
} from "./MetricViz";
import type { EstimateResult } from "@/lib/engine";
import type { UnitEstimate } from "@/lib/estimator";
import type { TKey } from "@/lib/i18n";

const fmt = (v: number | null | undefined, lang: string) =>
  v == null
    ? "—"
    : new Intl.NumberFormat(lang === "fr" ? "fr-CA" : "en-CA", {
        style: "currency",
        currency: "CAD",
        maximumFractionDigits: 0,
      }).format(v);

const signed = (v: number, lang: string) =>
  `${v >= 0 ? "+" : "−"}${fmt(Math.abs(Math.round(v)), lang)}`;

function Chip({ k, v }: { k: string; v: string | number }) {
  return (
    <div className="kv-cell">
      <p className="k">{k}</p>
      <p className="v break-words">{v}</p>
    </div>
  );
}

/** En-tête de section du rapport : filet fort + numéro mono rouge. */
function Sect({ num, kicker, title }: { num: string; kicker: string; title: string }) {
  return (
    <header className="sec">
      <span className="sec-num">
        {num} — {kicker}
      </span>
      <h2 className="vp-display mt-2 text-[clamp(20px,3vw,28px)] font-bold uppercase leading-[1.05] tracking-[-0.025em]">
        {title}
      </h2>
    </header>
  );
}

export default function ResultView({ data }: { data: UnitEstimate }) {
  const { lang, t } = useLang();
  const [activeComp, setActiveComp] = useState<string | null>(null);
  const r: EstimateResult = data.result;
  const u = data.unit;
  const ctx = data.context;
  const s = u?.specs;
  const fr = lang === "fr";
  const histMax = Math.max(...(u?.history.map((h) => h.value ?? 0) ?? [0]), 1);
  const moneyFmt = (v: number) =>
    new Intl.NumberFormat(fr ? "fr-CA" : "en-CA", {
      style: "currency",
      currency: "CAD",
      maximumFractionDigits: 0,
    }).format(Math.round(v / 100) * 100);

  return (
    <div className="space-y-12 py-8">
      {/* ================= masthead du rapport ================= */}
      <section className="rise">
        <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 border-b-2 border-ink pb-2.5">
          <nav className="vp-mono flex min-w-0 flex-wrap items-center gap-2 text-[10.5px] uppercase tracking-[0.08em] text-ink-3">
            <Link href="/" className="text-ink-2 hover:text-accent-deep">
              Vrai-Prix
            </Link>
            <span aria-hidden="true">/</span>
            <span>{fr ? "Rapport de valeur" : "Value report"}</span>
            {u && (
              <>
                <span aria-hidden="true">/</span>
                <span className="truncate">{u.id}</span>
              </>
            )}
          </nav>
          {u && (
            <FavButton
              size="lg"
              item={{
                item_id: u.id,
                title: `${u.adresse ?? u.id}${s?.apt ? ` app. ${s.apt}` : ""}`,
                subtitle: u.municipalite ?? "",
                price_label: r.estimate > 0 ? moneyFmt(r.estimate) : "",
                url: `https://www.vrai-prix.com/estimation/${encodeURIComponent(u.id)}`,
              }}
            />
          )}
        </div>

        <div className="mt-6 grid gap-x-12 gap-y-8 lg:grid-cols-[1.5fr_1fr]">
          {/* colonne principale : adresse + estimation en très grands chiffres */}
          <div className="min-w-0">
            {u && (
              <h1 className="vp-display text-[clamp(19px,2.6vw,26px)] font-bold uppercase leading-tight tracking-[-0.02em]">
                {u.adresse}
                {s?.apt ? ` app. ${s.apt}` : ""}
                {u.municipalite ? <span className="text-ink-3"> · {u.municipalite}</span> : null}
              </h1>
            )}
            <p className="klabel mt-5">{t("estimatedValue")}</p>
            <p className="vp-display mt-1 text-[clamp(52px,9vw,96px)] font-bold leading-none tracking-[-0.045em]">
              <CountUp value={r.estimate} format={moneyFmt} />
            </p>
            {/* faits rapides — ligne mono, pas de pastilles */}
            <p className="vp-mono mt-4 text-[11px] uppercase tracking-[0.06em] text-ink-2">
              {[
                u ? t(u.typeProp as TKey) : null,
                u?.aireEtagesM2 && r.estimate > 0
                  ? `${locNum(Math.round(r.estimate / u.aireEtagesM2), lang, { maxFrac: 0 })} $/m²`
                  : null,
                u?.aireEtagesM2 ? locNum(u.aireEtagesM2, lang, { unit: "m²" }) : null,
                u?.anneeConstruction ? `${fr ? "constr." : "built"} ${u.anneeConstruction}` : null,
                u?.superficieTerrainM2
                  ? `${fr ? "terrain" : "lot"} ${locNum(u.superficieTerrainM2, lang, { unit: "m²" })}`
                  : null,
              ]
                .filter((x): x is string => x != null)
                .join("  ·  ")}
            </p>
            {/* fourchette visuelle P10-P90 avec position du rôle */}
            <div className="mt-7 max-w-2xl">
              <p className="klabel mb-1">{t("range")}</p>
              <RangeBar
                low={r.low}
                estimate={r.estimate}
                high={r.high}
                role={u?.valeurRole ?? null}
                lang={lang}
              />
            </div>
            {u && (
              <div className="mt-7 flex flex-wrap gap-2.5">
                <a
                  href={`/api/report?id=${encodeURIComponent(u.id)}`}
                  className="btn btn-primary"
                  download
                >
                  {fr ? "Rapport PDF" : "PDF report"} ↓
                </a>
                <a
                  href={`/api/report/pro?id=${encodeURIComponent(u.id)}`}
                  className="btn btn-ghost"
                  download
                  title={fr ? "Structure de rapport d'évaluation — présentation bancaire" : "Appraisal-style structure — bank presentation"}
                >
                  {fr ? "Format professionnel (banque)" : "Professional format (bank)"} ↓
                </a>
              </div>
            )}
          </div>

          {/* colonne de lecture : confiance + rôle + écart, en cellules de données */}
          <aside className="lg:border-l lg:border-[var(--line)] lg:pl-10">
            <div className="flex items-start justify-between gap-6 lg:block">
              <ConfidenceDial
                pct={r.confidencePct}
                level={r.confidenceLevel}
                label={`${t("confidence")} — ${t(`conf${r.confidenceLevel}` as TKey)}`}
              />
              <dl className="grid flex-1 grid-cols-1 gap-x-6 sm:grid-cols-2 lg:mt-6 lg:grid-cols-1">
                {u?.valeurRole != null && (
                  <div className="border-t border-[var(--line)] py-3">
                    <dt className="klabel">{t("assessed")}</dt>
                    <dd className="vp-display mt-0.5 text-[22px] font-bold tracking-[-0.02em] text-ink-2">
                      {fmt(u.valeurRole, lang)}
                    </dd>
                  </div>
                )}
                {u?.valeurRole != null && u.valeurRole > 0 && r.estimate > 0 && (
                  <div className="border-t border-[var(--line)] py-3">
                    <dt className="klabel">{fr ? "Écart vs rôle" : "vs assessment"}</dt>
                    <dd
                      className={`vp-display mt-0.5 text-[22px] font-bold tracking-[-0.02em] ${
                        r.estimate >= u.valeurRole ? "text-ink" : "text-[var(--danger)]"
                      }`}
                    >
                      {r.estimate >= u.valeurRole ? "+" : ""}
                      {((r.estimate / u.valeurRole - 1) * 100).toFixed(0)} %
                    </dd>
                  </div>
                )}
              </dl>
            </div>
          </aside>
        </div>
        <p className="vp-mono mt-7 border-t border-[var(--line)] pt-3 text-[10px] uppercase tracking-[0.05em] text-ink-3">
          {t("disclaimer")}
        </p>
      </section>

      {/* ================= 01 — portrait du registre ================= */}
      {u && s && (
        <section>
          <Sect
            num="01"
            kicker={fr ? "Registre officiel" : "Official record"}
            title={fr ? "Portrait de la propriété" : "Property portrait"}
          />
          <div className="mt-6 grid gap-x-10 gap-y-8 lg:grid-cols-3 lg:divide-x lg:divide-[var(--line)]">
            {/* Bâtiment */}
            <div className="rise" style={{ animationDelay: "60ms" }}>
              <p className="klabel">{fr ? "Bâtiment" : "Building"}</p>
              <div className="flex justify-center py-2">
                <BuildingGlyph
                  floors={s.nbEtages}
                  dwellings={u.nbLogements}
                  genre={s.genreConstruction}
                  yearBuilt={u.anneeConstruction}
                  floorAreaM2={u.aireEtagesM2}
                  lang={lang}
                />
              </div>
              <EraLine year={u.anneeConstruction} lang={lang} />
              <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2">
                <Chip k={fr ? "Aire d'étages" : "Floor area"} v={u.aireEtagesM2 ? locNum(u.aireEtagesM2, lang, { unit: "m²" }) : "—"} />
                <Chip k={fr ? "Étages × logements" : "Storeys × dwellings"} v={`${s.nbEtages ?? "—"} × ${u.nbLogements ?? "—"}`} />
                <Chip k={fr ? "Genre" : "Style"} v={s.genreConstruction ?? "—"} />
                <Chip k={fr ? "Lien physique" : "Physical link"} v={s.lienPhysique ?? "—"} />
              </div>
            </div>
            {/* Terrain */}
            <div className="rise lg:pl-10" style={{ animationDelay: "140ms" }}>
              <p className="klabel">{fr ? "Terrain — à l'échelle" : "Lot — to scale"}</p>
              <div className="flex justify-center py-2">
                <LotDiagram
                  areaM2={u.superficieTerrainM2}
                  frontageM={s.frontTerrainM}
                  footprintM2={
                    u.aireEtagesM2 && s.nbEtages ? u.aireEtagesM2 / Math.max(1, s.nbEtages) : u.aireEtagesM2
                  }
                  lang={lang}
                  isCondo={!!s.apt || (u.nbLogements != null && u.nbLogements >= 1 && !u.superficieTerrainM2)}
                />
              </div>
              <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2">
                <Chip k={fr ? "Superficie" : "Area"} v={u.superficieTerrainM2 ? locNum(u.superficieTerrainM2, lang, { unit: "m²" }) : "—"} />
                <Chip k={fr ? "Frontage" : "Frontage"} v={s.frontTerrainM ? locNum(s.frontTerrainM, lang, { unit: "m" }) : "—"} />
                <Chip k="CUBF" v={s.cubf ?? "—"} />
                <Chip k={fr ? "Usage" : "Use"} v={s.cubfLibelle ?? "—"} />
              </div>
            </div>
            {/* Valeur au rôle */}
            <div className="rise lg:pl-10" style={{ animationDelay: "220ms" }}>
              <p className="klabel">{fr ? "Valeur au rôle 2026 — composition" : "2026 assessed value — split"}</p>
              <p className="vp-display py-2 text-[30px] font-bold tracking-[-0.025em]">
                {fmt(u.valeurRole, lang)}
              </p>
              <ValueSplit
                land={s.valeurTerrain}
                building={s.valeurBatiment}
                previous={s.valeurAnterieure}
                total={u.valeurRole}
                lang={lang}
                labels={{
                  land: fr ? "Terrain" : "Land",
                  building: fr ? "Bâtiment" : "Building",
                  previous: fr ? "Rôle antérieur" : "Previous roll",
                }}
              />
              <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2">
                <Chip k={fr ? "Cond. marché au" : "Market cond."} v={s.datCondMarche ?? "—"} />
                <Chip k={fr ? "Matricule" : "Roll no."} v={s.matricule ?? "—"} />
              </div>
            </div>
          </div>
          {/* registre brut complet */}
          <details className="mt-6 border-t border-[var(--line)] pt-4">
            <summary className="vp-mono cursor-pointer text-[11px] font-bold uppercase tracking-[0.08em] text-accent-deep hover:text-accent">
              ▸ {fr ? "Toutes les données du registre (brutes)" : "All registry data (raw)"}
            </summary>
            <div className="mt-4 grid grid-cols-2 gap-x-4 gap-y-2 sm:grid-cols-4">
              <Chip k={fr ? "Année construction" : "Year built"} v={u.anneeConstruction ? `${u.anneeConstruction}${s.anneeEstimee === "E" ? (fr ? " (estimée)" : " (est.)") : ""}` : "—"} />
              <Chip k={fr ? "Locaux non résid." : "Non-res. units"} v={s.nbLocauxNonResid ?? "—"} />
              <Chip k={fr ? "Chambres locatives" : "Rental rooms"} v={s.nbChambresLocatives ?? "—"} />
              <Chip k={fr ? "Unité de voisinage" : "Neighbourhood"} v={s.uniteVoisinage || "—"} />
              <Chip k={fr ? "Arrondissement" : "Borough"} v={s.arrond || "—"} />
              <Chip k={fr ? "Adresses sur l'unité" : "Addresses"} v={s.nAdresses ?? "—"} />
              <Chip k={fr ? "Valeur terrain" : "Land value"} v={fmt(s.valeurTerrain, lang)} />
              <Chip k={fr ? "Valeur bâtiment" : "Building value"} v={fmt(s.valeurBatiment, lang)} />
              <Chip k={fr ? "Rôle antérieur" : "Previous roll"} v={fmt(s.valeurAnterieure, lang)} />
              <Chip k="ID provincial" v={u.id} />
            </div>
          </details>
        </section>
      )}

      {/* ================= 02 — transparence du calcul ================= */}
      <section>
        <Sect num="02" kicker={fr ? "Transparence" : "Transparency"} title={t("whyTitle")} />
        <div className="mt-6 grid gap-x-10 gap-y-6 sm:grid-cols-2 sm:divide-x sm:divide-[var(--line)]">
          <div className="rise">
            <p className="klabel">{t("modelPart")}</p>
            <p className="vp-display mt-2 text-[clamp(30px,4vw,40px)] font-bold leading-none tracking-[-0.03em]">
              {r.modelEstimate != null ? (
                <CountUp value={r.modelEstimate} format={moneyFmt} />
              ) : (
                "—"
              )}
            </p>
            <p className="vp-mono mt-2 text-[11px] uppercase tracking-[0.06em] text-ink-2">
              {t("weightModel")} : <b className="text-ink">{(r.modelWeight * 100).toFixed(0)} %</b>
            </p>
          </div>
          <div className="rise sm:pl-10" style={{ animationDelay: "100ms" }}>
            <p className="klabel">{t("compsPart")}</p>
            <p className="vp-display mt-2 text-[clamp(30px,4vw,40px)] font-bold leading-none tracking-[-0.03em]">
              {r.compsEstimate != null ? (
                <CountUp value={r.compsEstimate} format={moneyFmt} />
              ) : (
                "—"
              )}
            </p>
            <p className="vp-mono mt-2 text-[11px] uppercase tracking-[0.06em] text-ink-2">
              {t("weightComps")} : <b className="text-ink">{((1 - r.modelWeight) * 100).toFixed(0)} %</b> · {r.nCompsUsed} comps
              {r.compsDispersionPct != null ? ` · ±${r.compsDispersionPct} %` : ""}
            </p>
          </div>
        </div>
      </section>

      {/* ================= 03 — marché local ================= */}
      {ctx && (ctx.index.length >= 6 || ctx.sector || ctx.muniPercentile != null) && (
        <section>
          <Sect
            num="03"
            kicker={fr ? "Contexte de marché" : "Market context"}
            title={fr ? "Le marché autour de cette propriété" : "The market around this property"}
          />
          <div className="mt-6 grid items-start gap-x-10 gap-y-8 lg:grid-cols-[1.4fr_1fr]">
            {/* trajectoire du marché */}
            {ctx.index.length >= 6 && (
              <div className="rise">
                <div className="flex flex-wrap items-center justify-between gap-2">
                  <p className="klabel">
                    {fr
                      ? `Indice de marché — ${t(ctx.typeProp as TKey)} (base 100 en ${ctx.index[0].month.slice(0, 4)})`
                      : `Market index — ${t(ctx.typeProp as TKey)} (base 100 in ${ctx.index[0].month.slice(0, 4)})`}
                  </p>
                  <p className="vp-mono flex gap-4 text-[11px] text-ink-2">
                    {ctx.index12mPct != null && (
                      <span>
                        12 {fr ? "mois" : "mo"}{" "}
                        <b className={ctx.index12mPct >= 0 ? "text-ink" : "text-[var(--danger)]"}>
                          {ctx.index12mPct >= 0 ? "+" : ""}
                          {ctx.index12mPct.toFixed(1)} %
                        </b>
                      </span>
                    )}
                    {ctx.indexSince2021Pct != null && (
                      <span>
                        {ctx.index[0].month.slice(0, 4)}→{" "}
                        <b className={ctx.indexSince2021Pct >= 0 ? "text-ink" : "text-[var(--danger)]"}>
                          {ctx.indexSince2021Pct >= 0 ? "+" : ""}
                          {ctx.indexSince2021Pct.toFixed(0)} %
                        </b>
                      </span>
                    )}
                  </p>
                </div>
                <div className="mt-3">
                  <MarketIndexChart series={ctx.index} lang={lang} />
                </div>
                <p className="vp-mono mt-2 text-[10px] uppercase tracking-[0.05em] text-ink-3">
                  {fr
                    ? "Indice utilisé pour l'ajustement « marché » des comparables — même donnée, même calcul."
                    : "Index used for the comparables' market adjustment — same data, same math."}
                </p>
              </div>
            )}
            <div className="flex flex-col gap-7 lg:border-l lg:border-[var(--line)] lg:pl-10">
              {/* ventes du secteur */}
              {ctx.sector && (
                <div className="rise" style={{ animationDelay: "80ms" }}>
                  <p className="klabel">
                    {fr
                      ? `Ventes réelles — rayon ${ctx.sector.radiusKm} km · 12 mois`
                      : `Real sales — ${ctx.sector.radiusKm} km radius · 12 months`}
                  </p>
                  <div className="mt-2 grid grid-cols-3 gap-x-4">
                    <div className="kv-cell">
                      <p className="k">{fr ? "Ventes" : "Sales"}</p>
                      <p className="v">{ctx.sector.nSales12m}</p>
                    </div>
                    <div className="kv-cell">
                      <p className="k">{fr ? "Prix médian" : "Median price"}</p>
                      <p className="v">{ctx.sector.medianPrice != null ? fmt(Math.round(ctx.sector.medianPrice), lang) : "—"}</p>
                    </div>
                    <div className="kv-cell">
                      <p className="k">$/m² {fr ? "médian" : "median"}</p>
                      <p className="v">
                        {ctx.sector.medianPpm2 != null
                          ? locNum(Math.round(ctx.sector.medianPpm2), lang, { maxFrac: 0 })
                          : "—"}
                      </p>
                    </div>
                  </div>
                  {ctx.sector.medianPrice != null && r.estimate > 0 && (
                    <p className="vp-mono mt-3 text-[10.5px] uppercase tracking-[0.05em] text-ink-2">
                      {fr ? "Cette propriété" : "This property"} :{" "}
                      <b className="text-ink">
                        {r.estimate >= ctx.sector.medianPrice ? "+" : "−"}
                        {Math.abs((r.estimate / ctx.sector.medianPrice - 1) * 100).toFixed(0)} %
                      </b>{" "}
                      {fr ? "vs médiane du secteur" : "vs sector median"}
                    </p>
                  )}
                </div>
              )}
              {/* position dans la municipalité */}
              {ctx.muniPercentile != null && u?.municipalite && (
                <div className="rise" style={{ animationDelay: "160ms" }}>
                  <p className="klabel">
                    {fr ? `Position dans ${u.municipalite}` : `Position in ${u.municipalite}`}
                  </p>
                  <div className="mt-3">
                    <PercentileBar pct={ctx.muniPercentile} lang={lang} />
                  </div>
                  <p className="mt-3 text-[13px] text-ink-2">
                    {fr ? (
                      <>
                        Vaut plus que{" "}
                        <b className="text-ink">{Math.round(ctx.muniPercentile)} %</b> des{" "}
                        {ctx.muniTotal != null ? locNum(ctx.muniTotal, lang, { maxFrac: 0 }) : ""}{" "}
                        propriétés estimées de la municipalité.
                      </>
                    ) : (
                      <>
                        Worth more than{" "}
                        <b className="text-ink">{Math.round(ctx.muniPercentile)} %</b> of the{" "}
                        {ctx.muniTotal != null ? locNum(ctx.muniTotal, lang, { maxFrac: 0 }) : ""}{" "}
                        estimated properties in the municipality.
                      </>
                    )}
                  </p>
                </div>
              )}
            </div>
          </div>
        </section>
      )}

      {/* ================= 04 — historique ================= */}
      {u && u.history.some((h) => h.value != null) && (
        <section>
          <Sect num="04" kicker="2021 → 2026" title={t("history")} />
          <div className="mt-6 max-w-3xl">
            <div className="flex flex-col gap-2">
              {u.history.map((h, i) => {
                const prev = i > 0 ? u.history[i - 1].value : null;
                const yoy =
                  h.value != null && prev != null && prev > 0
                    ? ((h.value / prev - 1) * 100)
                    : null;
                return (
                  <div key={h.year} className="hbar-row grid grid-cols-[44px_1fr_auto] items-center gap-2 sm:grid-cols-[52px_1fr_auto] sm:gap-3">
                    <span className="vp-mono text-[12px] font-bold">{h.year}</span>
                    <span className="hbar-track">
                      <span
                        className="hbar-fill grow-x"
                        style={{
                          width: `${((h.value ?? 0) / histMax) * 100}%`,
                          animationDelay: `${i * 90}ms`,
                          background: h.year === 2026 ? "var(--accent)" : undefined,
                        }}
                      />
                    </span>
                    <span className="vp-mono flex items-center justify-end gap-2 text-[12px] font-bold">
                      {fmt(h.value, lang)}
                      {yoy != null && (
                        <span className={`text-[10px] font-medium ${yoy >= 0 ? "text-ink-2" : "text-[var(--danger)]"}`}>
                          {yoy >= 0 ? "+" : ""}
                          {yoy.toFixed(0)} %
                        </span>
                      )}
                    </span>
                  </div>
                );
              })}
            </div>
          </div>
        </section>
      )}

      {/* ================= 05 — comparables ================= */}
      <section>
        <Sect
          num="05"
          kicker={`${r.nCompsUsed} ${fr ? "ventes réelles" : "real sales"}`}
          title={t("compsTitle")}
        />
        <div className="mt-6 grid items-start gap-x-8 gap-y-6 lg:grid-cols-[1.05fr_1fr]">
          <div className="overflow-hidden border border-[var(--line-strong)]">
            <RadarMap
              subject={{
                lat: u?.lat ?? r.comps[0]?.lat ?? 46.81,
                lng: u?.lng ?? r.comps[0]?.lng ?? -71.21,
                label: u?.adresse ?? (fr ? "Propriété estimée" : "Subject property"),
              }}
              comps={r.comps.map((c) => ({
                id: c.id,
                lat: c.lat,
                lng: c.lng,
                label: `${c.street ?? ""}, ${c.city ?? ""}`,
                price: fmt(c.amount, lang),
                adjusted: fmt(Math.round(c.adjustedPrice), lang),
                date: c.date,
                distanceM: c.distanceM,
                weight: c.weight,
              }))}
              highlight={activeComp}
              onHover={setActiveComp}
            />
          </div>
          <div className="src-wrap max-h-[560px] overflow-y-auto">
            <table className="src-table">
              <thead className="sticky top-0 z-10 bg-paper">
                <tr>
                  <th>#</th>
                  <th>{fr ? "Vente" : "Sale"}</th>
                  <th className="text-right">{t("adjusted")}</th>
                </tr>
              </thead>
              <tbody>
                {r.comps.map((c, i) => (
                  <tr
                    key={c.id}
                    onMouseEnter={() => setActiveComp(c.id)}
                    onMouseLeave={() => setActiveComp(null)}
                    className={activeComp === c.id ? "!bg-surface-2" : ""}
                  >
                    <td>
                      <span
                        className={`vp-mono inline-flex h-6 w-6 items-center justify-center text-[11px] font-bold ${
                          activeComp === c.id ? "bg-accent text-white" : "bg-ink text-paper"
                        }`}
                      >
                        {i + 1}
                      </span>
                    </td>
                    <td>
                      <p className="font-semibold leading-tight">
                        {c.street}, {c.city}
                      </p>
                      <p className="vp-mono mt-0.5 text-[10.5px] uppercase tracking-[0.04em] text-ink-3">
                        {c.date} · {c.distanceM < 1000 ? `${Math.round(c.distanceM)} m` : `${(c.distanceM / 1000).toFixed(1)} km`} ·{" "}
                        {t("sold")} {fmt(c.amount, lang)}
                        {c.floorArea && c.floorArea > 20
                          ? ` (${locNum(Math.round(c.amount / c.floorArea), lang, { maxFrac: 0 })} $/m²)`
                          : ""}
                      </p>
                      {(c.floorArea || c.yearBuilt) && (
                        <p className="vp-mono mt-0.5 text-[10.5px] uppercase tracking-[0.04em] text-ink-3">
                          {[
                            c.floorArea ? locNum(c.floorArea, lang, { unit: "m²" }) : null,
                            c.yearBuilt ? `${fr ? "constr." : "built"} ${c.yearBuilt}` : null,
                          ]
                            .filter(Boolean)
                            .join(" · ")}
                        </p>
                      )}
                      <p className="vp-mono mt-0.5 text-[10.5px] text-ink-2">
                        {t("adjTime")} {signed(c.adjTime, lang)} · {t("adjArea")} {signed(c.adjArea, lang)} ·{" "}
                        {t("adjAge")} {signed(c.adjAge, lang)}
                      </p>
                    </td>
                    <td className="vp-display text-right font-bold">
                      {fmt(Math.round(c.adjustedPrice), lang)}
                      <p className="vp-mono text-[10px] font-normal text-ink-3">
                        {t("weight")} {(c.weight * 100).toFixed(0)} %
                      </p>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* ================= alerte de valeur ================= */}
      <section className="bleed vp-dark">
        <div className="mx-auto max-w-6xl px-4 py-10 sm:px-6 sm:py-12">
          <span className="sec-num !text-[var(--accent-bright)]">
            06 — {fr ? "Suivi" : "Watch"}
          </span>
          <h2 className="vp-display mt-2 text-[clamp(20px,3vw,28px)] font-bold uppercase tracking-[-0.025em] text-[var(--paper-on-ink)]">
            {t("leadTitle")}
          </h2>
          <div className="mt-5 max-w-xl">
            <LeadForm unitId={u?.id ?? null} estimate={r.estimate} />
          </div>
        </div>
      </section>
    </div>
  );
}