spb/vrai-prix Public

1// Auteur : Simon-Pierre Boucher — contact@spboucher.ai2"use client";3import { useState } from "react";4import { useRouter } from "next/navigation";5import { useLang } from "./LangContext";67const TYPES = [8  "unifamilial",9  "plex",10  "condo_ou_multi",11  "chalet",12  "maison_mobile",13  "terrain",14] as const;1516export default function EstimateForm() {17  const { t } = useLang();18  const router = useRouter();19  const [municipality, setMunicipality] = useState("");20  const [typeProp, setTypeProp] = useState<string>("unifamilial");21  const [floorArea, setFloorArea] = useState("");22  const [yearBuilt, setYearBuilt] = useState("");23  const [landArea, setLandArea] = useState("");2425  const submit = (e: React.FormEvent) => {26    e.preventDefault();27    const p = new URLSearchParams({ municipality, typeProp });28    if (floorArea) p.set("floorArea", floorArea);29    if (yearBuilt) p.set("yearBuilt", yearBuilt);30    if (landArea) p.set("landArea", landArea);31    router.push(`/estimation/manuelle?${p.toString()}`);32  };3334  return (35    <form36      onSubmit={submit}37      className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4"38    >39      <label className="col-span-2 flex flex-col gap-1.5 sm:col-span-1">40        <span className="klabel pl-0.5">{t("municipality")} *</span>41        <input42          required43          value={municipality}44          onChange={(e) => setMunicipality(e.target.value)}45          className="vp-input"46          placeholder="Montréal, Québec, Lévis…"47        />48      </label>49      <label className="flex flex-col gap-1.5">50        <span className="klabel pl-0.5">{t("propertyType")} *</span>51        <select52          value={typeProp}53          onChange={(e) => setTypeProp(e.target.value)}54          className="vp-input"55        >56          {TYPES.map((ty) => (57            <option key={ty} value={ty}>58              {t(ty)}59            </option>60          ))}61        </select>62      </label>63      <label className="flex flex-col gap-1.5">64        <span className="klabel pl-0.5">{t("floorArea")}</span>65        <input66          type="number"67          min={10}68          max={5000}69          value={floorArea}70          onChange={(e) => setFloorArea(e.target.value)}71          className="vp-input"72          placeholder="120"73        />74      </label>75      <label className="flex flex-col gap-1.5">76        <span className="klabel pl-0.5">{t("yearBuilt")}</span>77        <input78          type="number"79          min={1700}80          max={2026}81          value={yearBuilt}82          onChange={(e) => setYearBuilt(e.target.value)}83          className="vp-input"84          placeholder="1985"85        />86      </label>87      <label className="flex flex-col gap-1.5">88        <span className="klabel pl-0.5">{t("landArea")}</span>89        <input90          type="number"91          min={0}92          value={landArea}93          onChange={(e) => setLandArea(e.target.value)}94          className="vp-input"95          placeholder="500"96        />97      </label>98      <div className="flex items-end">99        <button type="submit" className="btn btn-primary w-full">100          {t("estimateBtn")} →101        </button>102      </div>103    </form>104  );105}106