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

export default function LeadForm({
  unitId,
  estimate,
}: {
  unitId: string | null;
  estimate: number;
}) {
  const { t } = useLang();
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  const [err, setErr] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErr(false);
    const res = await fetch("/api/lead", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, unitId, estimate }),
    });
    if (res.ok) setDone(true);
    else setErr(true);
  };

  if (done)
    return (
      <p className="vp-mono rounded-md border border-lime bg-[rgba(255,81,72,0.12)] px-4 py-3 text-[12px] font-bold uppercase tracking-[0.05em] text-lime">
        ✓ {t("leadOk")}
      </p>
    );
  return (
    <form onSubmit={submit} className="flex flex-col gap-2.5 sm:flex-row">
      <input
        type="email"
        required
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder={t("emailPlaceholder")}
        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)] ${
          err ? "border-danger" : "border-[rgba(245,243,238,0.35)] focus:border-lime"
        }`}
      />
      <button
        type="submit"
        className="btn min-h-[44px] border-lime bg-lime text-ink shadow-[4px_4px_0_rgba(255,81,72,0.25)] hover:bg-paper"
      >
        {t("leadBtn")} →
      </button>
    </form>
  );
}