contact integration updated

src/app/api/send-email/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+import axios from 'axios';
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const res = await axios.post(
+      "https://mailserver.metatronnest.com/send",
+      body,
+      { headers: { "Content-Type": "application/json" } }
+    );
+    return NextResponse.json({ success: true, data: res.data });
+  } catch (error: any) {
+    console.error("Email send error:", error.message);
+    return NextResponse.json(
+      { success: false, error: error.message },
+      { status: 500 }
+    );
+  }
+}

src/app/contact/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import axios from "axios";
 import Image from "next/image";
 import { Phone, Mail, MapPin, Clock, UtensilsCrossed, ShoppingBag, Truck, ChefHat } from "lucide-react";
 import SubpageLayout from "@/components/SubpageLayout";
@@ -28,14 +29,33 @@ export default function ContactPage() {
   const [formData, setFormData] = useState({ name: "", email: "", phone: "", subject: "", msg: "" });
   const [submitted, setSubmitted] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (formData.name && formData.email && formData.msg) {
-      setSubmitted(true);
-      setTimeout(() => {
-        setSubmitted(false);
-        setFormData({ name: "", email: "", phone: "", subject: "", msg: "" });
-      }, 5000);
+      const emailData = {
+        name: formData.name,
+        phone: formData.phone,
+        email: formData.email,
+        subject: formData.subject || "New Contact Message",
+        message: `Name: ${formData.name}<br />Email: ${formData.email}<br />Phone: ${formData.phone}<br />Subject: ${formData.subject}<br /><br />Message: ${formData.msg}`,
+        to: "mydosaplacewaterloo@gmail.com",
+        senderName: "My Dosa Place Contact Form"
+      };
+
+      try {
+        await axios.post(
+          "/api/send-email",
+          emailData,
+          { headers: { "Content-Type": "application/json" } }
+        );
+        setSubmitted(true);
+        setTimeout(() => {
+          setSubmitted(false);
+          setFormData({ name: "", email: "", phone: "", subject: "", msg: "" });
+        }, 5000);
+      } catch (error) {
+        console.error("Failed to send message", error);
+      }
     }
   };
 

src/app/reservation/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import axios from "axios";
 import Image from "next/image";
 import { User, Mail, Phone, Calendar, Clock, Users, MapPin } from "lucide-react";
 import SubpageLayout from "@/components/SubpageLayout";
@@ -19,20 +20,40 @@ export default function ReservationPage() {
   });
   const [reserved, setReserved] = useState(false);
 
-  const handleReserve = (e: React.FormEvent) => {
+  const handleReserve = async (e: React.FormEvent) => {
     e.preventDefault();
-    setReserved(true);
-    setTimeout(() => {
-      setReserved(false);
-      setFormData({ ...formData, name: "", email: "", phone: "", date: "" });
-    }, 6000);
+
+    const emailData = {
+      name: formData.name,
+      phone: formData.phone,
+      email: formData.email,
+      subject: "New Table Reservation",
+      message: `Name: ${formData.name}<br />Email: ${formData.email}<br />Phone: ${formData.phone}<br />Guests: ${formData.guests}<br />Date: ${formData.date}<br />Time: ${formData.time}<br />Area: ${formData.area}`,
+      to: "mydosaplacewaterloo@gmail.com",
+      senderName: "My Dosa Place Reservation Form"
+    };
+
+    try {
+      await axios.post(
+        "/api/send-email",
+        emailData,
+        { headers: { "Content-Type": "application/json" } }
+      );
+      setReserved(true);
+      setTimeout(() => {
+        setReserved(false);
+        setFormData({ ...formData, name: "", email: "", phone: "", date: "" });
+      }, 6000);
+    } catch (error) {
+      console.error("Failed to send reservation", error);
+    }
   };
 
   return (
     <SubpageLayout>
       <InnerBanner pageName="Reservation" bgImage="/images/inner-banner/6.webp" />
       <div className="relative w-full bg-[#fdfaf4] overflow-hidden flex flex-col justify-center py-24">
-        
+
         {/* Full Page Background with Pots and Temple */}
         <div className="absolute inset-0 z-0 pointer-events-none select-none">
           <Image
@@ -73,7 +94,7 @@ export default function ReservationPage() {
         </div> */}
 
         <div className="relative z-20 max-w-2xl mx-auto w-full px-4 sm:px-8">
-          
+
           {/* Form Card */}
           <div className="w-full">
             <AnimatedSection variant="fadeUp" delay={0.1}>
@@ -123,11 +144,11 @@ export default function ReservationPage() {
                   </h3>
                   
                   <div className="flex items-center gap-4 mb-8 w-full justify-center">
-                     <div className="w-16 h-[1px] bg-[#bc9e65]" />
-                     <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
-                       <path d="M12 2L15 8L22 9L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9L9 8L12 2Z" />
-                     </svg>
-                     <div className="w-16 h-[1px] bg-[#bc9e65]" />
+                    <div className="w-16 h-[1px] bg-[#bc9e65]" />
+                    <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M12 2L15 8L22 9L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9L9 8L12 2Z" />
+                    </svg>
+                    <div className="w-16 h-[1px] bg-[#bc9e65]" />
                   </div>
 
                   {reserved ? (
@@ -148,7 +169,7 @@ export default function ReservationPage() {
                     </div>
                   ) : (
                     <form onSubmit={handleReserve} className="w-full space-y-5">
-                      
+
                       {/* Personal Info Row */}
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                         <div className="relative w-full">