Update May 12 by Elvis

app/contact/page.tsx

@@ -6,6 +6,8 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { useLanguage } from "@/contexts/LanguageContext";
+import { submitContact } from "@/lib/api/contact";
+import { ApiError } from "@/lib/api";
 import { MapPin, Phone, Mail } from "lucide-react";
 import { toast } from "sonner";
 
@@ -14,13 +16,23 @@ export default function Contact() {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    toast.success("Nous vous répondrons dans les plus brefs délais.");
-    setName("");
-    setEmail("");
-    setMessage("");
+    setLoading(true);
+    try {
+      await submitContact(name, email, message);
+      toast.success(t("contact.success"));
+      setName("");
+      setEmail("");
+      setMessage("");
+    } catch (err) {
+      const msg = err instanceof ApiError ? err.message : t("contact.error");
+      toast.error(msg);
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
@@ -29,11 +41,8 @@ export default function Contact() {
         <h1 className="font-serif text-3xl lg:text-5xl text-center mb-12">{t("contact.title")}</h1>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-          {/* Info */}
           <div className="space-y-8">
-            <p className="text-muted-foreground leading-relaxed">
-              Une question sur nos produits, un conseil personnalisé ou une demande de rendez-vous ? N'hésitez pas à nous contacter.
-            </p>
+            <p className="text-muted-foreground leading-relaxed">{t("contact.description")}</p>
             <div className="space-y-4">
               <div className="flex items-center gap-3">
                 <MapPin className="h-5 w-5 text-primary" />
@@ -50,33 +59,52 @@ export default function Contact() {
             </div>
 
             <div className="text-sm text-muted-foreground">
-              <h3 className="font-medium text-foreground mb-2">Horaires d'ouverture</h3>
-              <p>Lundi - Vendredi : 9h - 18h</p>
-              <p>Samedi : 10h - 16h</p>
-              <p>Dimanche : Fermé</p>
+              <h3 className="font-medium text-foreground mb-2">{t("contact.hours_title")}</h3>
+              <p>{t("contact.hours_weekdays")}</p>
+              <p>{t("contact.hours_saturday")}</p>
+              <p>{t("contact.hours_sunday")}</p>
             </div>
           </div>
 
-          {/* Form */}
           <form onSubmit={handleSubmit} className="space-y-4">
             <div>
               <Label htmlFor="name">{t("auth.name")}</Label>
-              <Input id="name" value={name} onChange={(e) => setName(e.target.value)} className="mt-1" required />
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="mt-1"
+                required
+              />
             </div>
             <div>
               <Label htmlFor="email">{t("auth.email")}</Label>
-              <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="mt-1" required />
+              <Input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="mt-1"
+                required
+              />
             </div>
             <div>
               <Label htmlFor="message">{t("contact.message")}</Label>
-              <Textarea id="message" rows={5} value={message} onChange={(e) => setMessage(e.target.value)} className="mt-1" required />
+              <Textarea
+                id="message"
+                rows={5}
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                className="mt-1"
+                required
+              />
             </div>
-            <Button type="submit" className="w-full" size="lg">
-              {t("contact.send")}
+            <Button type="submit" className="w-full" size="lg" disabled={loading}>
+              {loading ? t("contact.sending") : t("contact.send")}
             </Button>
           </form>
         </div>
       </div>
     </div>
   );
-};
+}