// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
"use client";
import SearchBox from "@/components/SearchBox";
import EstimateForm from "@/components/EstimateForm";
import { useLang } from "@/components/LangContext";

export default function Home() {
  const { lang, t } = useLang();
  return (
    <div className="pb-6 pt-10 sm:pt-14">
      {/* ---- Héros ---- */}
      <section>
        <span className="kicker">
          {lang === "fr" ? "Québec · 2021-2026" : "Québec · 2021-2026"}
        </span>
        <h1 className="vp-display mt-3 max-w-4xl text-[clamp(34px,6.4vw,72px)] font-bold uppercase leading-[0.98] tracking-[-0.035em]">
          {lang === "fr" ? (
            <>
              La <span className="outline-txt">vraie</span> valeur.
              <br />
              <span className="hl">Sans boîte noire.</span>
            </>
          ) : (
            <>
              The <span className="outline-txt">true</span> value.
              <br />
              <span className="hl">No black box.</span>
            </>
          )}
        </h1>
        <p className="mt-5 max-w-xl text-[16.5px] text-ink-2">{t("sub")}</p>

        <div className="mt-7 flex gap-2.5 overflow-x-auto pb-1.5 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
          <span className="stat-chip">
            <span className="pulse" />
            <b>3 747 008</b> {lang === "fr" ? "propriétés" : "properties"}
          </span>
          <span className="stat-chip">
            <b>745 119</b> {lang === "fr" ? "ventes réelles" : "real sales"}
          </span>
          <span className="stat-chip">
            <b>1 100</b> {lang === "fr" ? "municipalités" : "municipalities"}
          </span>
          <span className="stat-chip">
            MdAPE <b>11 %</b>
          </span>
        </div>
      </section>

      {/* ---- Recherche ---- */}
      <section className="mt-9">
        <div className="vp-card p-4 sm:p-5">
          <p className="klabel mb-2 pl-0.5">
            {lang === "fr" ? "Adresse de la propriété" : "Property address"}
          </p>
          <SearchBox />
        </div>
        <p className="vp-mono mt-2.5 pl-1 text-[11px] uppercase tracking-[0.06em] text-ink-3">
          {t("dataNote")}
        </p>
      </section>

      {/* ---- Formulaire manuel ---- */}
      <section className="mt-14">
        <span className="kicker">{lang === "fr" ? "Plan B" : "Plan B"}</span>
        <h2 className="vp-display mt-2 text-[22px] font-bold uppercase tracking-[-0.02em]">
          {t("manualTitle")}
        </h2>
        <div className="vp-card mt-4 p-4 sm:p-6">
          <EstimateForm />
        </div>
      </section>

      {/* ---- Manifeste transparence ---- */}
      <section className="mt-14 grid gap-4 sm:grid-cols-3">
        {(lang === "fr"
          ? [
              ["01", "Le calcul, montré", "Chaque ajustement de chaque comparable est affiché en dollars. Pas de score magique."],
              ["02", "Fourchette honnête", "Un prix unique est un mensonge statistique. On donne P10-P90 et un indice de confiance A-D."],
              ["03", "Données réelles", "Rôles fonciers officiels (MAMH) et ventes publiées — locales et récentes en priorité."],
            ]
          : [
              ["01", "The math, shown", "Every adjustment on every comparable is displayed in dollars. No magic score."],
              ["02", "Honest range", "A single price is a statistical lie. We give P10-P90 and an A-D confidence index."],
              ["03", "Real data", "Official assessment rolls (MAMH) and published sales — local and recent first."],
            ]
        ).map(([num, title, body]) => (
          <div key={num} className="vp-card vp-card-hover p-5">
            <p className="vp-mono text-[11px] font-bold text-green">{num}</p>
            <h3 className="vp-display mt-1.5 text-[17px] font-bold uppercase tracking-[-0.01em]">
              {title}
            </h3>
            <p className="mt-2 text-[13.5px] text-ink-2">{body}</p>
          </div>
        ))}
      </section>
    </div>
  );
}