update screen fix

src/components/layout/Footer.tsx

@@ -3,6 +3,7 @@
 import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import Image from "next/image";
+import emailjs from "@emailjs/browser";
 import { ScrollReveal } from "@/animations/Reveal";
 
 export default function Footer() {
@@ -45,15 +46,37 @@ export default function Footer() {
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
     setFormData((prev) => ({ ...prev, [name]: value }));
+    // Clear any stale success/error message once the user resumes editing.
+    if (formStatus === "success" || formStatus === "error") setFormStatus("idle");
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    // EmailJS is fully client-side — only the public-safe credentials are used
+    // (Service ID, Template ID, Public Key). No private/secret key, no backend route.
+    const serviceId = process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID;
+    const templateId = process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID;
+    const publicKey = process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY;
+    if (!serviceId || !templateId || !publicKey) {
+      console.error("EmailJS env vars are missing — set NEXT_PUBLIC_EMAILJS_* in .env.local");
+      setFormStatus("error");
+      return;
+    }
+
     setFormStatus("submitting");
     try {
-      // Simulate API submission
-      console.log("Footer contact form submitted:", formData);
-      await new Promise((resolve) => setTimeout(resolve, 1000));
+      await emailjs.send(
+        serviceId,
+        templateId,
+        {
+          name: formData.fullName,
+          email: formData.email,
+          subject: formData.subject,
+          message: formData.message,
+        },
+        publicKey,
+      );
       setFormStatus("success");
       setFormData({ fullName: "", email: "", subject: "", message: "" });
     } catch (err) {
@@ -285,12 +308,12 @@ export default function Footer() {
                                   </button>
                                   {formStatus === "success" && (
                                     <div style={{ color: "#4caf50", marginTop: "10px", fontSize: "14px" }}>
-                                      Message sent successfully!
+                                      Message sent successfully.
                                     </div>
                                   )}
                                   {formStatus === "error" && (
                                     <div style={{ color: "#f44336", marginTop: "10px", fontSize: "14px" }}>
-                                      Something went wrong. Please try again.
+                                      Failed to send message. Please try again.
                                     </div>
                                   )}
                                 </div>