spb/valoplex Public

1// Auteur : Simon-Pierre Boucher — contact@spboucher.ai2"use client";3import { useState } from "react";4import { useLang } from "./LangContext";56export default function LeadForm({7  unitId,8  estimate,9}: {10  unitId: string | null;11  estimate: number;12}) {13  const { t } = useLang();14  const [email, setEmail] = useState("");15  const [done, setDone] = useState(false);16  const [err, setErr] = useState(false);1718  const submit = async (e: React.FormEvent) => {19    e.preventDefault();20    setErr(false);21    const res = await fetch("/api/lead", {22      method: "POST",23      headers: { "Content-Type": "application/json" },24      body: JSON.stringify({ email, unitId, estimate }),25    });26    if (res.ok) setDone(true);27    else setErr(true);28  };2930  if (done)31    return (32      <p className="vp-mono rounded-md border border-lime bg-[rgba(255,159,69,0.12)] px-4 py-3 text-[12px] font-bold uppercase tracking-[0.05em] text-lime">33        ✓ {t("leadOk")}34      </p>35    );36  return (37    <form onSubmit={submit} className="flex flex-col gap-2.5 sm:flex-row">38      <input39        type="email"40        required41        value={email}42        onChange={(e) => setEmail(e.target.value)}43        placeholder={t("emailPlaceholder")}44        className={`min-h-[44px] flex-1 rounded-md border-[1.5px] bg-[rgba(245,243,238,0.08)] px-3.5 py-2.5 text-paper placeholder-[rgba(245,243,238,0.4)] outline-none transition-shadow focus:shadow-[3px_3px_0_var(--lime)] ${45          err ? "border-danger" : "border-[rgba(245,243,238,0.35)] focus:border-lime"46        }`}47      />48      <button49        type="submit"50        className="btn min-h-[44px] border-lime bg-lime text-ink shadow-[4px_4px_0_rgba(255,159,69,0.25)] hover:bg-paper"51      >52        {t("leadBtn")} →53      </button>54    </form>55  );56}57