spb/valoplex Public

1// Auteur : Simon-Pierre Boucher — contact@spboucher.ai2"use client";3import { useState } from "react";4import { useRouter } from "next/navigation";5import { useLang } from "./LangContext";67export default function EstimateForm() {8  const { t } = useLang();9  const router = useRouter();10  const [municipality, setMunicipality] = useState("");11  const [portes, setPortes] = useState("3");12  const [floorArea, setFloorArea] = useState("");13  const [yearBuilt, setYearBuilt] = useState("");14  const [landArea, setLandArea] = useState("");1516  const submit = (e: React.FormEvent) => {17    e.preventDefault();18    const p = new URLSearchParams({ municipality, typeProp: "plex", portes });19    if (floorArea) p.set("floorArea", floorArea);20    if (yearBuilt) p.set("yearBuilt", yearBuilt);21    if (landArea) p.set("landArea", landArea);22    router.push(`/estimation/manuelle?${p.toString()}`);23  };2425  return (26    <form27      onSubmit={submit}28      className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4"29    >30      <label className="col-span-2 flex flex-col gap-1.5 sm:col-span-1">31        <span className="klabel pl-0.5">{t("municipality")} *</span>32        <input33          required34          value={municipality}35          onChange={(e) => setMunicipality(e.target.value)}36          className="vp-input"37          placeholder="Montréal, Québec, Trois-Rivières…"38        />39      </label>40      <label className="flex flex-col gap-1.5">41        <span className="klabel pl-0.5">{t("portes")} *</span>42        <input43          type="number"44          required45          min={2}46          max={40}47          value={portes}48          onChange={(e) => setPortes(e.target.value)}49          className="vp-input"50          placeholder="3"51        />52      </label>53      <label className="flex flex-col gap-1.5">54        <span className="klabel pl-0.5">{t("floorArea")}</span>55        <input56          type="number"57          min={40}58          max={5000}59          value={floorArea}60          onChange={(e) => setFloorArea(e.target.value)}61          className="vp-input"62          placeholder="240"63        />64      </label>65      <label className="flex flex-col gap-1.5">66        <span className="klabel pl-0.5">{t("yearBuilt")}</span>67        <input68          type="number"69          min={1700}70          max={2026}71          value={yearBuilt}72          onChange={(e) => setYearBuilt(e.target.value)}73          className="vp-input"74          placeholder="1955"75        />76      </label>77      <label className="flex flex-col gap-1.5">78        <span className="klabel pl-0.5">{t("landArea")}</span>79        <input80          type="number"81          min={0}82          value={landArea}83          onChange={(e) => setLandArea(e.target.value)}84          className="vp-input"85          placeholder="350"86        />87      </label>88      <div className="flex items-end">89        <button type="submit" className="btn btn-primary w-full">90          {t("estimateBtn")} →91        </button>92      </div>93    </form>94  );95}96