feat(email): wire all forms to Resend — contact, devis, candidature notifs

- Create /api/contact → sends admin notification email on audit request - Create /api/devis → sends admin notification email on macon devis request - Contact.tsx: make inputs controlled, call /api/contact on submit - MaconClient.tsx DevisForm: add controlled state + submit handler calling /api/devis, add success/error states - /api/candidature: add admin notification email alongside candidate confirmation - /api/admin/candidatures/[id]/reject: fetch candidate info + send rejection email All routes read ADMIN_EMAIL env var for admin notifications (fallback to RESEND_FROM_EMAIL). https://claude.ai/code/session_01PzA98VhLMmsHpzs7gnLHGs
2026-02-23 07:36:00 +00:00
parent d54278969a
commit 6c33406e13
6 changed files with 375 additions and 13 deletions
--- a/app/api/admin/candidatures/[id]/reject/route.ts
+++ b/app/api/admin/candidatures/[id]/reject/route.ts
@@ -17,6 +17,13 @@ export async function POST(
  const { id } = await params;
  const supabase = createAdminClient();

+  // Récupérer les infos du candidat avant de rejeter
+  const { data: candidature } = await supabase
+    .from("candidatures")
+    .select("firstname, email")
+    .eq("id", id)
+    .single() as { data: { firstname: string; email: string } | null };
+
  const { error } = await supabase
    .from("candidatures")
    .update({ status: "rejected" } as never)
@@ -26,5 +33,53 @@ export async function POST(
    return NextResponse.json({ error: error.message }, { status: 500 });
  }

+  // Email de rejet au candidat
+  if (candidature && process.env.RESEND_API_KEY) {
+    try {
+      const { Resend } = await import("resend");
+      const resend = new Resend(process.env.RESEND_API_KEY);
+      const fromEmail =
+        process.env.RESEND_FROM_EMAIL || "HookLab <onboarding@resend.dev>";
+
+      await resend.emails.send({
+        from: fromEmail,
+        to: candidature.email,
+        subject: "Résultat de ta candidature HookLab",
+        html: `
+<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"></head>
+<body style="margin:0;padding:0;background-color:#0B0F19;font-family:Arial,Helvetica,sans-serif;">
+  <div style="max-width:600px;margin:0 auto;padding:40px 20px;">
+    <div style="text-align:center;margin-bottom:40px;">
+      <div style="display:inline-block;background:linear-gradient(135deg,#6D5EF6,#9D8FF9);width:48px;height:48px;border-radius:12px;line-height:48px;color:#fff;font-weight:800;font-size:20px;">H</div>
+      <span style="display:inline-block;vertical-align:top;margin-left:10px;line-height:48px;font-size:24px;font-weight:800;color:#ffffff;">Hook<span style="color:#6D5EF6;">Lab</span></span>
+    </div>
+    <div style="background:#1A1F2E;border:1px solid #2A2F3F;border-radius:20px;padding:40px 32px;">
+      <h1 style="color:#ffffff;font-size:22px;margin:0 0 16px 0;">Salut ${candidature.firstname},</h1>
+      <p style="color:#ffffffcc;font-size:15px;line-height:1.6;margin:0 0 16px 0;">
+        Merci d'avoir pris le temps de candidater au programme HookLab.
+      </p>
+      <p style="color:#ffffffcc;font-size:15px;line-height:1.6;margin:0 0 16px 0;">
+        Après étude de ton dossier, nous ne pouvons pas retenir ta candidature pour le moment.
+        Le programme est très sélectif et nous cherchons des profils très spécifiques.
+      </p>
+      <p style="color:#ffffffcc;font-size:15px;line-height:1.6;margin:0 0 0 0;">
+        Nous te souhaitons le meilleur dans ta progression. N'hésite pas à recandidater dans quelques mois si ta situation évolue.
+      </p>
+    </div>
+    <div style="text-align:center;margin-top:32px;">
+      <p style="color:#ffffff40;font-size:12px;margin:0;">HookLab - Programme TikTok Shop</p>
+    </div>
+  </div>
+</body>
+</html>
+        `,
+      });
+    } catch (emailError) {
+      console.error("Erreur envoi email rejet:", emailError);
+    }
+  }
+
  return NextResponse.json({ success: true, message: "Candidature rejetée." });
 }
--- a/app/api/candidature/route.ts
+++ b/app/api/candidature/route.ts
@@ -107,14 +107,16 @@ export async function POST(request: Request) {
      );
    }

-    // Envoi email de confirmation (Resend)
+    // Envoi emails (Resend)
    if (process.env.RESEND_API_KEY && process.env.RESEND_API_KEY !== "re_your-api-key") {
-      try {
-        const { Resend } = await import("resend");
-        const resend = new Resend(process.env.RESEND_API_KEY);
+      const { Resend } = await import("resend");
+      const resend = new Resend(process.env.RESEND_API_KEY);
+      const fromEmail = process.env.RESEND_FROM_EMAIL || "HookLab <onboarding@resend.dev>";

+      // Email de confirmation au candidat
+      try {
        await resend.emails.send({
-          from: process.env.RESEND_FROM_EMAIL || "HookLab <onboarding@resend.dev>",
+          from: fromEmail,
          to: body.email,
          subject: "Candidature HookLab reçue !",
          html: `
@@ -128,7 +130,45 @@ export async function POST(request: Request) {
          `,
        });
      } catch (emailError) {
-        console.error("Erreur envoi email:", emailError);
+        console.error("Erreur envoi email candidat:", emailError);
+      }
+
+      // Notification admin
+      const adminEmail = process.env.ADMIN_EMAIL || fromEmail;
+      try {
+        await resend.emails.send({
+          from: fromEmail,
+          to: adminEmail,
+          subject: `Nouvelle candidature - ${body.firstname} (${body.persona})`,
+          html: `
+<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"></head>
+<body style="margin:0;padding:0;background:#f4f4f5;font-family:Arial,Helvetica,sans-serif;">
+  <div style="max-width:560px;margin:0 auto;padding:32px 16px;">
+    <div style="background:#ffffff;border-radius:16px;padding:32px;border:1px solid #e4e4e7;">
+      <h2 style="margin:0 0 8px 0;color:#111827;font-size:20px;">Nouvelle candidature HookLab</h2>
+      <p style="margin:0 0 24px 0;color:#6b7280;font-size:14px;">À traiter dans les 24h</p>
+      <table style="width:100%;border-collapse:collapse;">
+        <tr><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:13px;width:45%;">Prénom</td><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:13px;font-weight:600;">${body.firstname}</td></tr>
+        <tr><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:13px;">Email</td><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:13px;font-weight:600;">${body.email}</td></tr>
+        <tr><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:13px;">Téléphone</td><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:13px;font-weight:600;">${body.phone}</td></tr>
+        <tr><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:13px;">Âge</td><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:13px;">${body.age} ans</td></tr>
+        <tr><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:13px;">Profil</td><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:13px;">${body.persona}</td></tr>
+        <tr><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:13px;">Expérience</td><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:13px;">${body.experience}</td></tr>
+        <tr><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:13px;">Temps / jour</td><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:13px;">${body.time_daily}</td></tr>
+        <tr><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:13px;">Objectif mensuel</td><td style="padding:8px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:13px;">${body.monthly_goal}</td></tr>
+        <tr><td style="padding:8px 0;vertical-align:top;color:#6b7280;font-size:13px;">Motivation</td><td style="padding:8px 0;color:#111827;font-size:13px;">${body.motivation}</td></tr>
+      </table>
+      <a href="${process.env.NEXT_PUBLIC_APP_URL || ""}/admin/candidatures" style="display:inline-block;margin-top:24px;background:#6D5EF6;color:#fff;padding:12px 24px;border-radius:10px;text-decoration:none;font-weight:600;font-size:14px;">Voir dans l'admin</a>
+    </div>
+  </div>
+</body>
+</html>
+          `,
+        });
+      } catch (emailError) {
+        console.error("Erreur envoi email admin:", emailError);
      }
    }

--- a/app/api/contact/route.ts
+++ b/app/api/contact/route.ts
@@ -0,0 +1,82 @@
+import { NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { name, phone, metier, ville } = body as {
+      name?: string;
+      phone?: string;
+      metier?: string;
+      ville?: string;
+    };
+
+    if (!name || !phone || !metier || !ville) {
+      return NextResponse.json(
+        { error: "Tous les champs sont requis." },
+        { status: 400 }
+      );
+    }
+
+    if (!process.env.RESEND_API_KEY) {
+      return NextResponse.json(
+        { error: "Service email non configuré." },
+        { status: 500 }
+      );
+    }
+
+    const { Resend } = await import("resend");
+    const resend = new Resend(process.env.RESEND_API_KEY);
+
+    const fromEmail =
+      process.env.RESEND_FROM_EMAIL || "HookLab <onboarding@resend.dev>";
+    const adminEmail = process.env.ADMIN_EMAIL || fromEmail;
+
+    await resend.emails.send({
+      from: fromEmail,
+      to: adminEmail,
+      subject: `Nouvelle demande d'audit - ${name} (${metier})`,
+      html: `
+<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"></head>
+<body style="margin:0;padding:0;background:#f4f4f5;font-family:Arial,Helvetica,sans-serif;">
+  <div style="max-width:560px;margin:0 auto;padding:32px 16px;">
+    <div style="background:#ffffff;border-radius:16px;padding:32px;border:1px solid #e4e4e7;">
+      <h2 style="margin:0 0 24px 0;color:#111827;font-size:20px;">Nouvelle demande d'audit gratuit</h2>
+      <table style="width:100%;border-collapse:collapse;">
+        <tr>
+          <td style="padding:10px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:14px;width:40%;">Nom</td>
+          <td style="padding:10px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:14px;font-weight:600;">${name}</td>
+        </tr>
+        <tr>
+          <td style="padding:10px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:14px;">Téléphone</td>
+          <td style="padding:10px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:14px;font-weight:600;">${phone}</td>
+        </tr>
+        <tr>
+          <td style="padding:10px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:14px;">Métier</td>
+          <td style="padding:10px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:14px;font-weight:600;">${metier}</td>
+        </tr>
+        <tr>
+          <td style="padding:10px 0;color:#6b7280;font-size:14px;">Ville / Zone</td>
+          <td style="padding:10px 0;color:#111827;font-size:14px;font-weight:600;">${ville}</td>
+        </tr>
+      </table>
+      <p style="margin:24px 0 0 0;color:#6b7280;font-size:13px;">Reçu le ${new Date().toLocaleDateString("fr-FR", { day: "2-digit", month: "long", year: "numeric", hour: "2-digit", minute: "2-digit" })}</p>
+    </div>
+  </div>
+</body>
+</html>
+      `,
+    });
+
+    return NextResponse.json({ success: true }, { status: 200 });
+  } catch (err) {
+    console.error("Erreur API contact:", err);
+    return NextResponse.json(
+      { error: "Erreur serveur. Veuillez réessayer." },
+      { status: 500 }
+    );
+  }
+}
--- a/app/api/devis/route.ts
+++ b/app/api/devis/route.ts
@@ -0,0 +1,91 @@
+import { NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { name, phone, ville, description, projectType } = body as {
+      name?: string;
+      phone?: string;
+      ville?: string;
+      description?: string;
+      projectType?: string;
+    };
+
+    if (!name || !phone || !ville || !projectType) {
+      return NextResponse.json(
+        { error: "Les champs nom, téléphone, ville et type de projet sont requis." },
+        { status: 400 }
+      );
+    }
+
+    if (!process.env.RESEND_API_KEY) {
+      return NextResponse.json(
+        { error: "Service email non configuré." },
+        { status: 500 }
+      );
+    }
+
+    const { Resend } = await import("resend");
+    const resend = new Resend(process.env.RESEND_API_KEY);
+
+    const fromEmail =
+      process.env.RESEND_FROM_EMAIL || "HookLab <onboarding@resend.dev>";
+    const adminEmail = process.env.ADMIN_EMAIL || fromEmail;
+
+    await resend.emails.send({
+      from: fromEmail,
+      to: adminEmail,
+      subject: `Nouvelle demande de devis - ${projectType} (${ville})`,
+      html: `
+<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"></head>
+<body style="margin:0;padding:0;background:#f4f4f5;font-family:Arial,Helvetica,sans-serif;">
+  <div style="max-width:560px;margin:0 auto;padding:32px 16px;">
+    <div style="background:#ffffff;border-radius:16px;padding:32px;border:1px solid #e4e4e7;">
+      <h2 style="margin:0 0 24px 0;color:#111827;font-size:20px;">Nouvelle demande de devis maçonnerie</h2>
+      <table style="width:100%;border-collapse:collapse;">
+        <tr>
+          <td style="padding:10px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:14px;width:40%;">Nom</td>
+          <td style="padding:10px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:14px;font-weight:600;">${name}</td>
+        </tr>
+        <tr>
+          <td style="padding:10px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:14px;">Téléphone</td>
+          <td style="padding:10px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:14px;font-weight:600;">${phone}</td>
+        </tr>
+        <tr>
+          <td style="padding:10px 0;border-bottom:1px solid #f3f4f6;color:#6b7280;font-size:14px;">Type de projet</td>
+          <td style="padding:10px 0;border-bottom:1px solid #f3f4f6;color:#111827;font-size:14px;font-weight:600;">${projectType}</td>
+        </tr>
+        <tr>
+          <td style="padding:10px 0;${description ? "border-bottom:1px solid #f3f4f6;" : ""}color:#6b7280;font-size:14px;">Ville</td>
+          <td style="padding:10px 0;${description ? "border-bottom:1px solid #f3f4f6;" : ""}color:#111827;font-size:14px;font-weight:600;">${ville}</td>
+        </tr>
+        ${
+          description
+            ? `<tr>
+          <td style="padding:10px 0;vertical-align:top;color:#6b7280;font-size:14px;">Description</td>
+          <td style="padding:10px 0;color:#111827;font-size:14px;">${description}</td>
+        </tr>`
+            : ""
+        }
+      </table>
+      <p style="margin:24px 0 0 0;color:#6b7280;font-size:13px;">Reçu le ${new Date().toLocaleDateString("fr-FR", { day: "2-digit", month: "long", year: "numeric", hour: "2-digit", minute: "2-digit" })}</p>
+    </div>
+  </div>
+</body>
+</html>
+      `,
+    });
+
+    return NextResponse.json({ success: true }, { status: 200 });
+  } catch (err) {
+    console.error("Erreur API devis:", err);
+    return NextResponse.json(
+      { error: "Erreur serveur. Veuillez réessayer." },
+      { status: 500 }
+    );
+  }
+}
--- a/app/macon/MaconClient.tsx
+++ b/app/macon/MaconClient.tsx
@@ -90,8 +90,50 @@ function FaqAccordion({ faqs }: { faqs: { q: string; a: string }[] }) {
   SMART DEVIS FORM
   ============================================================ */
 function DevisForm() {
-  const [step, setStep] = useState<"type" | "details">("type");
+  const [step, setStep] = useState<"type" | "details" | "done">("type");
  const [projectType, setProjectType] = useState("");
+  const [fields, setFields] = useState({ name: "", phone: "", ville: "", description: "" });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const updateField = (key: keyof typeof fields, value: string) =>
+    setFields((prev) => ({ ...prev, [key]: value }));
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/devis", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ...fields, projectType }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "Erreur lors de l'envoi");
+      }
+      setStep("done");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Erreur inattendue");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (step === "done") {
+    return (
+      <div className="bg-white rounded-2xl p-6 sm:p-8 text-center">
+        <div className="w-14 h-14 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-4">
+          <svg className="w-7 h-7 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+        <h3 className="text-navy font-bold text-lg mb-2">Demande envoyée !</h3>
+        <p className="text-text-muted text-sm">Nous vous recontactons sous 24h pour votre devis.</p>
+      </div>
+    );
+  }

  if (step === "details") {
    return (
@@ -103,12 +145,15 @@ function DevisForm() {
        <p className="text-text-muted text-sm mb-5">
          Projet : <strong className="text-navy">{projectType}</strong>
        </p>
-        <div className="space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-text mb-1.5">Votre nom</label>
            <input
              type="text"
+              required
              placeholder="Marc Dupont"
+              value={fields.name}
+              onChange={(e) => updateField("name", e.target.value)}
              className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none"
            />
          </div>
@@ -116,7 +161,10 @@ function DevisForm() {
            <label className="block text-sm font-medium text-text mb-1.5">T&eacute;l&eacute;phone</label>
            <input
              type="tel"
+              required
              placeholder="06 12 34 56 78"
+              value={fields.phone}
+              onChange={(e) => updateField("phone", e.target.value)}
              className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none"
            />
          </div>
@@ -124,7 +172,10 @@ function DevisForm() {
            <label className="block text-sm font-medium text-text mb-1.5">Ville</label>
            <input
              type="text"
+              required
              placeholder="Orchies, Cysoing, Sam&eacute;on..."
+              value={fields.ville}
+              onChange={(e) => updateField("ville", e.target.value)}
              className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none"
            />
          </div>
@@ -133,19 +184,23 @@ function DevisForm() {
            <textarea
              placeholder="Surface, type de travaux, d&eacute;lais souhait&eacute;s..."
              rows={3}
+              value={fields.description}
+              onChange={(e) => updateField("description", e.target.value)}
              className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none resize-none"
            />
          </div>
-          <Button size="lg" className="w-full">
+          {error && <p className="text-red-600 text-sm">{error}</p>}
+          <Button type="submit" size="lg" className="w-full" loading={loading}>
            Envoyer ma demande de devis
          </Button>
          <button
+            type="button"
            onClick={() => setStep("type")}
            className="w-full text-text-muted hover:text-text text-sm underline cursor-pointer"
          >
            &larr; Retour
          </button>
-        </div>
+        </form>
      </div>
    );
  }
--- a/components/marketing/Contact.tsx
+++ b/components/marketing/Contact.tsx
@@ -6,10 +6,38 @@ import ScrollReveal from "@/components/animations/ScrollReveal";

 export default function Contact() {
  const [submitted, setSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fields, setFields] = useState({
+    name: "",
+    phone: "",
+    metier: "",
+    ville: "",
+  });

-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const updateField = (key: keyof typeof fields, value: string) =>
+    setFields((prev) => ({ ...prev, [key]: value }));
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    setSubmitted(true);
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/contact", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(fields),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "Erreur lors de l'envoi");
+      }
+      setSubmitted(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Erreur inattendue");
+    } finally {
+      setLoading(false);
+    }
  };

  return (
@@ -83,6 +111,8 @@ export default function Contact() {
                        type="text"
                        required
                        placeholder="Marc Dupont"
+                        value={fields.name}
+                        onChange={(e) => updateField("name", e.target.value)}
                        className="w-full px-4 py-3 bg-bg border border-border rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none transition-colors"
                      />
                    </div>
@@ -95,6 +125,8 @@ export default function Contact() {
                        type="tel"
                        required
                        placeholder="06 12 34 56 78"
+                        value={fields.phone}
+                        onChange={(e) => updateField("phone", e.target.value)}
                        className="w-full px-4 py-3 bg-bg border border-border rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none transition-colors"
                      />
                    </div>
@@ -107,6 +139,8 @@ export default function Contact() {
                        type="text"
                        required
                        placeholder="Couvreur, Menuisier, Paysagiste..."
+                        value={fields.metier}
+                        onChange={(e) => updateField("metier", e.target.value)}
                        className="w-full px-4 py-3 bg-bg border border-border rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none transition-colors"
                      />
                    </div>
@@ -119,10 +153,15 @@ export default function Contact() {
                        type="text"
                        required
                        placeholder="Douai, Valenciennes, Orchies..."
+                        value={fields.ville}
+                        onChange={(e) => updateField("ville", e.target.value)}
                        className="w-full px-4 py-3 bg-bg border border-border rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none transition-colors"
                      />
                    </div>
-                    <Button type="submit" size="lg" className="w-full">
+                    {error && (
+                      <p className="text-red-600 text-sm">{error}</p>
+                    )}
+                    <Button type="submit" size="lg" className="w-full" loading={loading}>
                      R&Eacute;SERVER MON AUDIT GRATUIT
                    </Button>
                    <p className="text-text-muted text-xs text-center">