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

export default function CartePage() {
  const { lang } = useLang();
  const fr = lang === "fr";
  return (
    <main className="mx-auto w-full max-w-5xl px-4 pb-16 pt-8 md:pt-12">
      <p className="kicker">{fr ? "Recherche par carte" : "Map search"}</p>
      <h1 className="vp-display mt-3 text-[clamp(28px,6vw,44px)] font-bold uppercase leading-[1.02] tracking-[-0.03em] text-ink">
        {fr ? "Votre quartier, " : "Your neighbourhood, "}
        <span className="hl">{fr ? "estimé" : "appraised"}</span>
      </h1>
      <p className="mt-4 max-w-2xl text-[15px] leading-relaxed text-ink-2">
        {fr
          ? "Déplacez la carte ou géolocalisez-vous : chaque point est une unité d'évaluation avec son estimation 2026. Touchez un point pour l'aperçu, puis passez à l'estimation complète."
          : "Pan the map or use your location: every dot is an assessment unit with its 2026 estimate. Tap a dot for a preview, then get the full estimate."}
      </p>
      <div className="mt-7">
        <MapSearch />
      </div>
      <p className="vp-mono mt-5 text-[10.5px] uppercase tracking-[0.06em] text-ink-3">
        {fr
          ? "Fond de carte © OpenStreetMap · Estimations statistiques à titre indicatif (OEAQ)."
          : "Basemap © OpenStreetMap · Statistical estimates for information only (OEAQ)."}
      </p>
    </main>
  );
}