spb/vrai-prix Public

1// Auteur : Simon-Pierre Boucher — contact@spboucher.ai2"use client";3import SearchBox from "@/components/SearchBox";4import EstimateForm from "@/components/EstimateForm";5import { useLang } from "@/components/LangContext";67export default function Home() {8  const { lang, t } = useLang();9  return (10    <div className="pb-6 pt-10 sm:pt-14">11      {/* ---- Héros ---- */}12      <section>13        <span className="kicker">14          {lang === "fr" ? "Québec · 2021-2026" : "Québec · 2021-2026"}15        </span>16        <h1 className="vp-display mt-3 max-w-4xl text-[clamp(34px,6.4vw,72px)] font-bold uppercase leading-[0.98] tracking-[-0.035em]">17          {lang === "fr" ? (18            <>19              La <span className="outline-txt">vraie</span> valeur.20              <br />21              <span className="hl">Sans boîte noire.</span>22            </>23          ) : (24            <>25              The <span className="outline-txt">true</span> value.26              <br />27              <span className="hl">No black box.</span>28            </>29          )}30        </h1>31        <p className="mt-5 max-w-xl text-[16.5px] text-ink-2">{t("sub")}</p>3233        <div className="mt-7 flex gap-2.5 overflow-x-auto pb-1.5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">34          <span className="stat-chip">35            <span className="pulse" />36            <b>3 747 008</b> {lang === "fr" ? "propriétés" : "properties"}37          </span>38          <span className="stat-chip">39            <b>745 119</b> {lang === "fr" ? "ventes réelles" : "real sales"}40          </span>41          <span className="stat-chip">42            <b>1 100</b> {lang === "fr" ? "municipalités" : "municipalities"}43          </span>44          <span className="stat-chip">45            MdAPE <b>11 %</b>46          </span>47        </div>48      </section>4950      {/* ---- Recherche ---- */}51      <section className="mt-9">52        <div className="vp-card p-4 sm:p-5">53          <p className="klabel mb-2 pl-0.5">54            {lang === "fr" ? "Adresse de la propriété" : "Property address"}55          </p>56          <SearchBox />57        </div>58        <p className="vp-mono mt-2.5 pl-1 text-[11px] uppercase tracking-[0.06em] text-ink-3">59          {t("dataNote")}60        </p>61      </section>6263      {/* ---- Formulaire manuel ---- */}64      <section className="mt-14">65        <span className="kicker">{lang === "fr" ? "Plan B" : "Plan B"}</span>66        <h2 className="vp-display mt-2 text-[22px] font-bold uppercase tracking-[-0.02em]">67          {t("manualTitle")}68        </h2>69        <div className="vp-card mt-4 p-4 sm:p-6">70          <EstimateForm />71        </div>72      </section>7374      {/* ---- Manifeste transparence ---- */}75      <section className="mt-14 grid gap-4 sm:grid-cols-3">76        {(lang === "fr"77          ? [78              ["01", "Le calcul, montré", "Chaque ajustement de chaque comparable est affiché en dollars. Pas de score magique."],79              ["02", "Fourchette honnête", "Un prix unique est un mensonge statistique. On donne P10-P90 et un indice de confiance A-D."],80              ["03", "Données réelles", "Rôles fonciers officiels (MAMH) et ventes publiées — locales et récentes en priorité."],81            ]82          : [83              ["01", "The math, shown", "Every adjustment on every comparable is displayed in dollars. No magic score."],84              ["02", "Honest range", "A single price is a statistical lie. We give P10-P90 and an A-D confidence index."],85              ["03", "Real data", "Official assessment rolls (MAMH) and published sales — local and recent first."],86            ]87        ).map(([num, title, body]) => (88          <div key={num} className="vp-card vp-card-hover p-5">89            <p className="vp-mono text-[11px] font-bold text-green">{num}</p>90            <h3 className="vp-display mt-1.5 text-[17px] font-bold uppercase tracking-[-0.01em]">91              {title}92            </h3>93            <p className="mt-2 text-[13.5px] text-ink-2">{body}</p>94          </div>95        ))}96      </section>97    </div>98  );99}100