Update src/app/page.tsx

Merge version_6 into main

src/app/page.tsx

@@ -10,8 +10,39 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [isReserving, setIsReserving] = useState(false);
+  const [email, setEmail] = useState("");
+  const [mobile, setMobile] = useState("");
+  const [name, setName] = useState("");
+  const [guests, setGuests] = useState("2");
+
+  const handleReserve = async () => {
+    const message = encodeURIComponent(`Hello, I would like to book a table at Shaffa. \nName: ${name}\nEmail: ${email}\nMobile: ${mobile}\nGuests: ${guests}`);
+    
+    // Send email via API request
+    try {
+      const response = await fetch('/api/send-booking', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name, email, mobile, guests, to: 'isittrueorjust@gmail.com' }),
+      });
+      
+      if (!response.ok) {
+          console.error("Server error during booking submission");
+      }
+    } catch (e) {
+      console.error("Failed to send email", e);
+    }
+
+    window.open(`https://wa.me/919876543210?text=${message}`, '_blank');
+    setIsReserving(false);
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="hover-bubble"
@@ -29,26 +60,13 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Menu",
-          id: "menu",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Menu", id: "menu" },
+        { name: "About", id: "about" },
+        { name: "Contact", id: "contact" },
       ]}
       button={{
-        text: "Reserve",
-        href: "https://wa.me/91XXXXXXXXXX",
+        text: "Book a table",        onClick: () => setIsReserving(true)
       }}
       brandName="Shaffa"
     />
@@ -60,8 +78,7 @@ export default function LandingPage() {
       description="Authentic flavors of North India, crafted for families and couples in the heart of Sec 26B, Chandigarh."
       buttons={[
         {
-          text: "Reserve on WhatsApp",
-          href: "https://wa.me/91XXXXXXXXXX",
+          text: "Book a table",          onClick: () => setIsReserving(true),
         },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/vegetable-salad-with-herbs-cheese_140725-44342.jpg?_wi=1"
@@ -69,55 +86,55 @@ export default function LandingPage() {
     />
   </div>
 
+  {isReserving && (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <div className="bg-white p-8 rounded-lg shadow-xl w-full max-w-sm">
+        <h2 className="text-xl font-bold mb-4 text-black">Book a Table</h2>
+        <input 
+          type="text" 
+          placeholder="Full Name" 
+          className="w-full p-2 mb-4 border rounded text-black" 
+          onChange={(e) => setName(e.target.value)} 
+        />
+        <input 
+          type="email" 
+          placeholder="Email Address" 
+          className="w-full p-2 mb-4 border rounded text-black" 
+          onChange={(e) => setEmail(e.target.value)} 
+        />
+        <input 
+          type="tel" 
+          placeholder="Mobile Number" 
+          className="w-full p-2 mb-4 border rounded text-black" 
+          onChange={(e) => setMobile(e.target.value)} 
+        />
+        <select className="w-full p-2 mb-4 border rounded text-black" onChange={(e) => setGuests(e.target.value)} value={guests}>
+          {[1,2,3,4,5,6].map(i => <option key={i} value={i}>{i} Guests</option>)}
+        </select>
+        <div className="flex gap-2">
+          <button onClick={() => setIsReserving(false)} className="flex-1 p-2 bg-gray-200 rounded text-black">Cancel</button>
+          <button onClick={handleReserve} className="flex-1 p-2 bg-blue-600 text-white rounded">Confirm Reservation</button>
+        </div>
+      </div>
+    </div>
+  )}
+
   <div id="menu" data-section="menu">
       <ProductCardFour
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
+      buttons={[
+        { text: "Book a Table", onClick: () => setIsReserving(true) }
+      ]}
       products={[
-        {
-          id: "m1",
-          name: "Butter Chicken",
-          price: "₹450",
-          variant: "Popular",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-close-view-delicious-bright-cake-with-cream-cracker-cookies-dark-wall-cake-biscuit-pie-sugar-sweet-photo-cookie_140725-53987.jpg?_wi=1",
-        },
-        {
-          id: "m2",
-          name: "Tandoori Platter",
-          price: "₹650",
-          variant: "Premium",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-assortment-different-pakistan-goodies_23-2148821568.jpg?_wi=1",
-        },
-        {
-          id: "m3",
-          name: "Garlic Naan",
-          price: "₹90",
-          variant: "Sides",
-          imageSrc: "http://img.b2bpic.net/free-photo/delicious-assortment-traditional-roti_23-2149033986.jpg?_wi=1",
-        },
-        {
-          id: "m4",
-          name: "Paneer Tikka",
-          price: "₹350",
-          variant: "Veg",
-          imageSrc: "http://img.b2bpic.net/free-photo/chicken-red-curry-black-cup_1150-23916.jpg",
-        },
-        {
-          id: "m5",
-          name: "Dal Makhani",
-          price: "₹300",
-          variant: "Veg",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-indian-dish-with-spices_23-2148747712.jpg",
-        },
-        {
-          id: "m6",
-          name: "Chicken Tikka",
-          price: "₹400",
-          variant: "Non-Veg",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-tasty-cooked-rice-with-meatballs-different-seasonings-dark_140725-104448.jpg",
-        },
+        { id: "m1", name: "Butter Chicken", price: "₹450", variant: "Popular", imageSrc: "http://img.b2bpic.net/free-photo/top-close-view-delicious-bright-cake-with-cream-cracker-cookies-dark-wall-cake-biscuit-pie-sugar-sweet-photo-cookie_140725-53987.jpg?_wi=1" },
+        { id: "m2", name: "Tandoori Platter", price: "₹650", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/top-view-assortment-different-pakistan-goodies_23-2148821568.jpg?_wi=1" },
+        { id: "m3", name: "Garlic Naan", price: "₹90", variant: "Sides", imageSrc: "http://img.b2bpic.net/free-photo/delicious-assortment-traditional-roti_23-2149033986.jpg?_wi=1" },
+        { id: "m4", name: "Paneer Tikka", price: "₹350", variant: "Veg", imageSrc: "http://img.b2bpic.net/free-photo/chicken-red-curry-black-cup_1150-23916.jpg" },
+        { id: "m5", name: "Dal Makhani", price: "₹300", variant: "Veg", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-indian-dish-with-spices_23-2148747712.jpg" },
+        { id: "m6", name: "Chicken Tikka", price: "₹400", variant: "Non-Veg", imageSrc: "http://img.b2bpic.net/free-photo/top-view-tasty-cooked-rice-with-meatballs-different-seasonings-dark_140725-104448.jpg" },
       ]}
       title="Our Signature Menu"
       description="Hand-picked traditional recipes with a modern twist."
@@ -129,21 +146,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Slow-Cooked Dal",
-          description: "Authentic North Indian style dal makhani, cooked for 12 hours.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-vegetable-soup-inside-round-plate-dark-blue-desk_140725-50602.jpg?_wi=1",
-        },
-        {
-          title: "Fresh Ingredients",
-          description: "Locally sourced, organic produce for maximum flavor.",
-          imageSrc: "http://img.b2bpic.net/free-photo/delicious-indian-dosa-arrangement_23-2149086028.jpg",
-        },
-        {
-          title: "Authentic Spice",
-          description: "Hand-ground masalas passed down through generations.",
-          imageSrc: "http://img.b2bpic.net/free-photo/grilled-chicken-ketchup-barberry-parsley-onion-side-view_141793-3124.jpg",
-        },
+        { title: "Slow-Cooked Dal", description: "Authentic North Indian style dal makhani, cooked for 12 hours.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-vegetable-soup-inside-round-plate-dark-blue-desk_140725-50602.jpg?_wi=1" },
+        { title: "Fresh Ingredients", description: "Locally sourced, organic produce for maximum flavor.", imageSrc: "http://img.b2bpic.net/free-photo/delicious-indian-dosa-arrangement_23-2149086028.jpg" },
+        { title: "Authentic Spice", description: "Hand-ground masalas passed down through generations.", imageSrc: "http://img.b2bpic.net/free-photo/grilled-chicken-ketchup-barberry-parsley-onion-side-view_141793-3124.jpg" },
       ]}
       title="Today's Chef Special"
       description="A secret recipe, slow-cooked to perfection, available only for a limited time."
@@ -157,18 +162,9 @@ export default function LandingPage() {
       title="A Legacy of Flavor"
       description="Shaffa was born from the love of traditional recipes and the joy of sharing meals. Situated in the heart of Sec 26B, we offer a cozy, premium space for families and couples to reconnect over the best North Indian cuisine."
       bulletPoints={[
-        {
-          title: "Traditional Recipes",
-          description: "Genuine flavors from the North.",
-        },
-        {
-          title: "Warm Atmosphere",
-          description: "Perfect for family and couple outings.",
-        },
-        {
-          title: "Premium Quality",
-          description: "Best ingredients, every time.",
-        },
+        { title: "Traditional Recipes", description: "Genuine flavors from the North." },
+        { title: "Warm Atmosphere", description: "Perfect for family and couple outings." },
+        { title: "Premium Quality", description: "Best ingredients, every time." },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/side-view-wild-berries-clay-pot-table_141793-3800.jpg"
       mediaAnimation="slide-up"
@@ -180,61 +176,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          name: "Aman S.",
-          date: "Oct 2023",
-          title: "Great Food!",
-          quote: "The best North Indian food I've had in Sec 26B.",
-          tag: "Regular",
-          avatarSrc: "http://img.b2bpic.net/free-photo/life-after-covid-freedom-concept_23-2149068470.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/vegetable-salad-with-herbs-cheese_140725-44342.jpg?_wi=2",
-          imageAlt: "family dining in restaurant",
-        },
-        {
-          id: "t2",
-          name: "Priya K.",
-          date: "Nov 2023",
-          title: "Lovely Evening",
-          quote: "Perfect atmosphere for a couple's date night.",
-          tag: "Couples",
-          avatarSrc: "http://img.b2bpic.net/free-photo/adults-enjoying-mexican-food_23-2149663853.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-close-view-delicious-bright-cake-with-cream-cracker-cookies-dark-wall-cake-biscuit-pie-sugar-sweet-photo-cookie_140725-53987.jpg?_wi=2",
-          imageAlt: "family dining in restaurant",
-        },
-        {
-          id: "t3",
-          name: "Rahul V.",
-          date: "Dec 2023",
-          title: "Family Friendly",
-          quote: "My family loved the butter chicken and the ambiance.",
-          tag: "Families",
-          avatarSrc: "http://img.b2bpic.net/free-photo/man-presents-girl-ring_1398-4220.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-assortment-different-pakistan-goodies_23-2148821568.jpg?_wi=2",
-          imageAlt: "family dining in restaurant",
-        },
-        {
-          id: "t4",
-          name: "Sonia M.",
-          date: "Jan 2024",
-          title: "Authentic Taste",
-          quote: "The spices were just right. Highly recommend.",
-          tag: "Regular",
-          avatarSrc: "http://img.b2bpic.net/free-photo/high-angle-friends-having-cocktails_23-2150244992.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/delicious-assortment-traditional-roti_23-2149033986.jpg?_wi=2",
-          imageAlt: "family dining in restaurant",
-        },
-        {
-          id: "t5",
-          name: "Vikram D.",
-          date: "Feb 2024",
-          title: "Highly Satisfied",
-          quote: "Staff was welcoming, service was fast.",
-          tag: "Families",
-          avatarSrc: "http://img.b2bpic.net/free-photo/friends-eating-conversating-restaurant_23-2148006704.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-vegetable-soup-inside-round-plate-dark-blue-desk_140725-50602.jpg?_wi=2",
-          imageAlt: "family dining in restaurant",
-        },
+        { id: "t1", name: "Aman S.", date: "Oct 2023", title: "Great Food!", quote: "The best North Indian food I've had in Sec 26B.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/life-after-covid-freedom-concept_23-2149068470.jpg", imageSrc: "http://img.b2bpic.net/free-photo/vegetable-salad-with-herbs-cheese_140725-44342.jpg?_wi=2" },
+        { id: "t2", name: "Priya K.", date: "Nov 2023", title: "Lovely Evening", quote: "Perfect atmosphere for a couple's date night.", tag: "Couples", avatarSrc: "http://img.b2bpic.net/free-photo/adults-enjoying-mexican-food_23-2149663853.jpg", imageSrc: "http://img.b2bpic.net/free-photo/top-close-view-delicious-bright-cake-with-cream-cracker-cookies-dark-wall-cake-biscuit-pie-sugar-sweet-photo-cookie_140725-53987.jpg?_wi=2" },
+        { id: "t3", name: "Rahul V.", date: "Dec 2023", title: "Family Friendly", quote: "My family loved the butter chicken and the ambiance.", tag: "Families", avatarSrc: "http://img.b2bpic.net/free-photo/man-presents-girl-ring_1398-4220.jpg", imageSrc: "http://img.b2bpic.net/free-photo/top-view-assortment-different-pakistan-goodies_23-2148821568.jpg?_wi=2" },
+        { id: "t4", name: "Sonia M.", date: "Jan 2024", title: "Authentic Taste", quote: "The spices were just right. Highly recommend.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/high-angle-friends-having-cocktails_23-2150244992.jpg", imageSrc: "http://img.b2bpic.net/free-photo/delicious-assortment-traditional-roti_23-2149033986.jpg?_wi=2" },
+        { id: "t5", name: "Vikram D.", date: "Feb 2024", title: "Highly Satisfied", quote: "Staff was welcoming, service was fast.", tag: "Families", avatarSrc: "http://img.b2bpic.net/free-photo/friends-eating-conversating-restaurant_23-2148006704.jpg", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-vegetable-soup-inside-round-plate-dark-blue-desk_140725-50602.jpg?_wi=2" },
       ]}
       title="What Our Guests Say"
       description="Experiences from the heart of Chandigarh."
@@ -244,15 +190,13 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactSplit
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       tag="Visit Us"
       title="Shaffa - Sec 26B, Chandigarh"
       description="Visit us for an unforgettable North Indian dining experience. Use WhatsApp to reserve your table today."
       imageSrc="http://img.b2bpic.net/free-photo/miami-bayside-landscape_23-2151636382.jpg"
-      buttonText="Reserve Now"
-      onSubmit={(email) => window.open('https://wa.me/91XXXXXXXXXX', '_blank')}
+      buttonText="Book a Table"
+      onSubmit={() => setIsReserving(true)}
     />
   </div>
 
@@ -261,49 +205,13 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/top-view-indian-food-frame-with-copy-space_23-2148747627.jpg"
       logoText="Shaffa"
       columns={[
-        {
-          title: "Shaffa",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Menu",
-              href: "#menu",
-            },
-          ],
-        },
-        {
-          title: "Reservation",
-          items: [
-            {
-              label: "WhatsApp Booking",
-              href: "https://wa.me/91XXXXXXXXXX",
-            },
-            {
-              label: "Directions",
-              href: "https://maps.google.com",
-            },
-          ],
-        },
-        {
-          title: "Contact",
-          items: [
-            {
-              label: "Sec 26B, Chandigarh",
-              href: "#",
-            },
-            {
-              label: "+91-XXXXXXXXXX",
-              href: "tel:+91XXXXXXXXXX",
-            },
-          ],
-        },
+        { title: "Shaffa", items: [{ label: "About", href: "#about" }, { label: "Menu", href: "#menu" }] },
+        { title: "Reservation", items: [{ label: "WhatsApp Booking", onClick: () => setIsReserving(true), href: "#" }, { label: "Directions", href: "https://maps.google.com" }] },
+        { title: "Contact", items: [{ label: "Sec 26B, Chandigarh", href: "#" }, { label: "+91-9876543210", href: "tel:+919876543210" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}