Update src/app/booking/page.tsx

src/app/booking/page.tsx

@@ -2,19 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ContactForm from '@/components/form/ContactForm';
-import ContactText from '@/components/sections/contact/ContactText';
+import { useState } from 'react';
+import { Calendar, Clock, Users, Palette, Phone, Mail } from 'lucide-react';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Calendar } from 'lucide-react';
 
 export default function BookingPage() {
   const navItems = [
     { name: "Home", id: "home" },
     { name: "Services", id: "services" },
     { name: "Gallery", id: "/gallery" },
-    { name: "Packages", id: "packages" },
+    { name: "Packages", id: "/packages" },
     { name: "About", id: "about" },
-    { name: "Book Event", id: "/booking" },
     { name: "Contact", id: "/contact" },
   ];
 
@@ -50,12 +48,54 @@ export default function BookingPage() {
       title: "Service Areas",      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
-        { label: "Book Now", href: "/booking" },
+        { label: "Book Now", href: "/packages" },
         { label: "Get Quote", href: "/contact" },
       ],
     },
   ];
 
+  const [formData, setFormData] = useState({
+    fullName: '',
+    email: '',
+    phone: '',
+    eventType: '',
+    eventDate: '',
+    eventTime: '',
+    guestCount: '',
+    serviceType: '',
+    additionalNotes: '',
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('Form submitted:', formData);
+    setSubmitted(true);
+    setTimeout(() => {
+      setFormData({
+        fullName: '',
+        email: '',
+        phone: '',
+        eventType: '',
+        eventDate: '',
+        eventTime: '',
+        guestCount: '',
+        serviceType: '',
+        additionalNotes: '',
+      });
+      setSubmitted(false);
+    }, 3000);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -78,69 +118,201 @@ export default function BookingPage() {
         />
       </div>
 
-      <div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 py-16">
-        <div className="max-w-2xl mx-auto">
-          <ContactForm
-            title="Book Your Event"
-            description="Get started with a quick inquiry. We'll follow up with you within 24 hours with availability and pricing details tailored to your event."
-            tag="Lead Generation"
-            tagIcon={Calendar}
-            inputPlaceholder="Your email address"
-            buttonText="Get Started"
-            termsText="By submitting this form, you agree to be contacted about your event booking inquiry. We respect your privacy."
-            centered={true}
-              useInvertedBackground={false}
-            onSubmit={(email) => {
-              console.log('Booking inquiry from:', email);
-            }}
-            className="w-full"
-            titleClassName="text-4xl font-extrabold mb-4"
-            descriptionClassName="text-lg opacity-90 mb-8"
-            tagClassName="mb-4"
-            formWrapperClassName="mt-8"
-          />
+      <div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 py-20 max-w-2xl">
+        <div className="mb-12">
+          <h1 className="text-4xl font-extrabold mb-4">Book Your Event</h1>
+          <p className="text-lg opacity-90 mb-8">Complete this form to request a booking for professional face and body art services at your event. We'll get back to you within 24 hours with availability and pricing details.</p>
         </div>
-      </div>
 
-      <div id="booking-features" data-section="booking-features" className="mx-auto px-4 md:px-6 py-16">
-        <div className="max-w-4xl mx-auto">
-          <h2 className="text-3xl font-extrabold mb-12 text-center">Our Booking Process</h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div className="p-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg">
-              <div className="text-4xl font-extrabold text-blue-600 mb-4">1</div>
-              <h3 className="text-xl font-bold mb-3">Submit Inquiry</h3>
-              <p className="text-opacity-80">Fill out our quick booking form with your event details and preferred date.</p>
-            </div>
-            <div className="p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg">
-              <div className="text-4xl font-extrabold text-purple-600 mb-4">2</div>
-              <h3 className="text-xl font-bold mb-3">Get Quote</h3>
-              <p className="text-opacity-80">We'll review your event details and send you a custom quote within 24 hours.</p>
-            </div>
-            <div className="p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg">
-              <div className="text-4xl font-extrabold text-green-600 mb-4">3</div>
-              <h3 className="text-xl font-bold mb-3">Confirm Booking</h3>
-              <p className="text-opacity-80">Once confirmed, we'll send you all the details and setup information for your event.</p>
+        {submitted && (
+          <div className="mb-6 p-4 bg-green-100 border border-green-300 rounded-lg text-green-800">
+            <p className="font-semibold">Thank you! Your booking request has been submitted. We'll contact you soon to confirm details.</p>
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {/* Contact Information Section */}
+          <div className="border-b pb-6">
+            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+              <Mail className="w-5 h-5" />
+              Contact Information
+            </h2>
+            
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="fullName" className="block text-sm font-semibold mb-2">Full Name *</label>
+                <input
+                  id="fullName"
+                  type="text"
+                  name="fullName"
+                  value={formData.fullName}
+                  onChange={handleChange}
+                  required
+                  placeholder="Your full name"
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="email" className="block text-sm font-semibold mb-2">Email Address *</label>
+                <input
+                  id="email"
+                  type="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  required
+                  placeholder="your.email@example.com"
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="phone" className="block text-sm font-semibold mb-2">Phone Number *</label>
+                <input
+                  id="phone"
+                  type="tel"
+                  name="phone"
+                  value={formData.phone}
+                  onChange={handleChange}
+                  required
+                  placeholder="(555) 123-4567"
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                />
+              </div>
             </div>
           </div>
-        </div>
-      </div>
 
-      <div id="booking-contact" data-section="booking-contact" className="mx-auto px-4 md:px-6">
-        <ContactText
-          text="Prefer to discuss your event first? Contact us directly and let's create something amazing together."
-          animationType="background-highlight"
-          background={{ variant: "radial-gradient" }}
-          useInvertedBackground={false}
-          buttons={[
-            { text: "Call Us", href: "tel:+15551234567" },
-            { text: "Email Us", href: "mailto:paintasy@events.com" },
-          ]}
-          ariaLabel="Booking contact call-to-action section"
-          containerClassName="py-16"
-          contentClassName="max-w-3xl mx-auto"
-          textClassName="text-4xl font-extrabold text-center"
-          buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
-        />
+          {/* Event Details Section */}
+          <div className="border-b pb-6">
+            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+              <Calendar className="w-5 h-5" />
+              Event Details
+            </h2>
+            
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="eventType" className="block text-sm font-semibold mb-2">Event Type *</label>
+                <select
+                  id="eventType"
+                  name="eventType"
+                  value={formData.eventType}
+                  onChange={handleChange}
+                  required
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                >
+                  <option value="">Select an event type</option>
+                  <option value="birthday">Birthday Party</option>
+                  <option value="festival">Festival or Outdoor Event</option>
+                  <option value="corporate">Corporate Event</option>
+                  <option value="wedding">Wedding</option>
+                  <option value="school">School Event</option>
+                  <option value="other">Other</option>
+                </select>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="eventDate" className="block text-sm font-semibold mb-2">Event Date *</label>
+                  <input
+                    id="eventDate"
+                    type="date"
+                    name="eventDate"
+                    value={formData.eventDate}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="eventTime" className="block text-sm font-semibold mb-2 flex items-center gap-1">
+                    <Clock className="w-4 h-4" />
+                    Event Time *
+                  </label>
+                  <input
+                    id="eventTime"
+                    type="time"
+                    name="eventTime"
+                    value={formData.eventTime}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="guestCount" className="block text-sm font-semibold mb-2 flex items-center gap-1">
+                  <Users className="w-4 h-4" />
+                  Expected Guest Count *
+                </label>
+                <input
+                  id="guestCount"
+                  type="number"
+                  name="guestCount"
+                  value={formData.guestCount}
+                  onChange={handleChange}
+                  required
+                  placeholder="e.g., 25"
+                  min="1"
+                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Service Selection Section */}
+          <div className="border-b pb-6">
+            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+              <Palette className="w-5 h-5" />
+              Service Selection
+            </h2>
+            
+            <div>
+              <label htmlFor="serviceType" className="block text-sm font-semibold mb-2">What service are you interested in? *</label>
+              <select
+                id="serviceType"
+                name="serviceType"
+                value={formData.serviceType}
+                onChange={handleChange}
+                required
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+              >
+                <option value="">Select a service</option>
+                <option value="face-painting">Face Painting Only</option>
+                <option value="body-painting">Body Painting</option>
+                <option value="both">Face & Body Painting</option>
+                <option value="custom">Custom Design Package</option>
+                <option value="unsure">Not sure - need consultation</option>
+              </select>
+            </div>
+          </div>
+
+          {/* Additional Notes Section */}
+          <div>
+            <label htmlFor="additionalNotes" className="block text-sm font-semibold mb-2">Additional Notes or Special Requests</label>
+            <textarea
+              id="additionalNotes"
+              name="additionalNotes"
+              value={formData.additionalNotes}
+              onChange={handleChange}
+              placeholder="Tell us about your vision, theme, any special requests, allergies, or other details that would help us serve you better."
+              rows={5}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+            />
+          </div>
+
+          <div className="pt-6">
+            <button
+              type="submit"
+              className="w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              Submit Booking Request
+            </button>
+            <p className="text-xs text-gray-600 mt-3 text-center">We'll respond to your booking request within 24 hours with availability and pricing.</p>
+          </div>
+        </form>
       </div>
 
       <div id="footer-booking" data-section="footer-booking" className="mx-auto px-4 md:px-6">