Enhance contact form functionality by integrating Resend API for email submissions, adding loading state to the submit button, and improving user feedback with alerts upon success or failure.

contact.html

@@ -639,6 +639,7 @@
                 ></textarea>
               </div>
 
+              
               <button
                 type="submit"
                 class="w-full bg-kh3-red text-white py-4 px-8 rounded-md hover:bg-kh3-red/90 transition-colors duration-300 flex items-center justify-center space-x-2 font-semibold"

js/contact.js

@@ -4,12 +4,71 @@
 document.addEventListener("DOMContentLoaded", () => {
   const contactForm = document.getElementById("contactForm");
   if (contactForm) {
-    contactForm.addEventListener("submit", (e) => {
+    contactForm.addEventListener("submit", async (e) => {
       e.preventDefault();
+
+      const submitButton = contactForm.querySelector('button[type="submit"]');
+      const originalText = submitButton.innerHTML;
+
+      // Show loading state
+      submitButton.innerHTML = "<span>Sending...</span>";
+      submitButton.disabled = true;
+
+      try {
+        const formData = new FormData(contactForm);
+        const name = formData.get("name");
+        const email = formData.get("email");
+        const phone = formData.get("phone");
+        const company = formData.get("company");
+        const service = formData.get("service");
+        const budget = formData.get("budget");
+        const message = formData.get("message");
+
+        // Send to Resend API
+        const response = await fetch("https://api.resend.com/emails", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: "Bearer re_YOUR_API_KEY_HERE", // Replace with your Resend API key
+          },
+          body: JSON.stringify({
+            from: "KH3 Website <noreply@yourdomain.com>", // Replace with your verified domain
+            to: ["george.fleef@gmail.com"],
+            subject: `New contact form submission from ${name}`,
+            html: `
+              <h2>New Contact Form Submission</h2>
+              <p><strong>Name:</strong> ${name}</p>
+              <p><strong>Email:</strong> ${email}</p>
+              <p><strong>Phone:</strong> ${phone || "Not provided"}</p>
+              <p><strong>Company:</strong> ${company || "Not provided"}</p>
+              <p><strong>Service Interest:</strong> ${
+                service || "Not specified"
+              }</p>
+              <p><strong>Budget:</strong> ${budget || "Not specified"}</p>
+              <p><strong>Message:</strong></p>
+              <p>${message.replace(/\n/g, "<br>")}</p>
+            `,
+          }),
+        });
+
+        if (response.ok) {
           alert(
             "Thank you for your message! We'll get back to you within 24 hours."
           );
           contactForm.reset();
+        } else {
+          throw new Error("Failed to send email");
+        }
+      } catch (error) {
+        console.error("Error:", error);
+        alert(
+          "Sorry, there was an error sending your message. Please try again or contact us directly at george.fleef@gmail.com"
+        );
+      } finally {
+        // Reset button
+        submitButton.innerHTML = originalText;
+        submitButton.disabled = false;
+      }
     });
   }