Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -11,8 +11,39 @@ import FaqSplitText from "@/components/sections/faq/FaqSplitText";
 import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import { Award, CheckCircle, Cog, Droplets, Gauge, Phone, Rotate3D, Shield, TrendingUp, Wrench, Zap } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [serviceDescription, setServiceDescription] = useState("");
+  const [selectedService, setSelectedService] = useState("");
+
+  const serviceOptions = [
+    "Oil Change",    "Oil Lube and Filter",    "Brakes",    "Brake jobs pads rotors inspections",    "Heat or A/C",    "No heat no A/C inspections",    "Battery",    "Replacement recharge starter",    "Engine and Transmission",    "Diagnosis fluids drivetrain",    "Scheduled Maintenance",    "Based on vehicle mileage",    "Diagnostics",    "Mechanical and or Electrical",    "Mobile Services",    "Mobile Diagnostics and or Repairs"
+  ];
+
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setPhoneNumber("");
+    setServiceDescription("");
+    setSelectedService("");
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Form submitted:", { phoneNumber, serviceDescription, selectedService });
+    handleCloseModal();
+  };
+
+  const handlePhoneClick = () => {
+    window.location.href = "tel:+19722728000";
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -36,7 +67,7 @@ export default function LandingPage() {
             { name: "FAQ", id: "faq" }
           ]}
           button={{
-            text: "Book Service",            href: "#contact"
+            text: "Book Service",            onClick: handleOpenModal
           }}
         />
       </div>
@@ -50,7 +81,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           background={{ variant: "radial-gradient" }}
           buttons={[
-            { text: "Book Service Now", href: "#contact" },
+            { text: "Book Service Now", onClick: handleOpenModal },
             { text: "Learn More", href: "#services" }
           ]}
           buttonAnimation="slide-up"
@@ -115,7 +146,7 @@ export default function LandingPage() {
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          buttons={[{ text: "Schedule Your Service", href: "#contact" }]}
+          buttons={[{ text: "Schedule Your Service", onClick: handleOpenModal }]}
           buttonAnimation="slide-up"
         />
       </div>
@@ -186,7 +217,7 @@ export default function LandingPage() {
         <FaqSplitText
           sideTitle="Frequently Asked Questions"
           sideDescription="Got questions about our services? We've got answers. Contact us directly if you don't find what you need."
-          buttons={[{ text: "Contact Us", href: "#contact" }]}
+          buttons={[{ text: "Contact Us", onClick: handleOpenModal }]}
           buttonAnimation="slide-up"
           faqsAnimation="slide-up"
           textPosition="left"
@@ -257,6 +288,116 @@ export default function LandingPage() {
           copyrightText="© 2024 Dallas Automotive. All rights reserved."
         />
       </div>
+
+      {/* Service Booking Modal */}
+      {isModalOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+          onClick={handleCloseModal}
+        >
+          <div
+            className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md max-h-[90vh] overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-2xl font-bold text-foreground">Book Service</h2>
+              <button
+                onClick={handleCloseModal}
+                className="text-gray-500 hover:text-gray-700 text-2xl"
+                aria-label="Close modal"
+              >
+                ×
+              </button>
+            </div>
+
+            <div className="mb-4 p-3 bg-blue-50 rounded-md border border-blue-200">
+              <p className="text-sm text-foreground font-medium mb-2">Confused? Give us a call!</p>
+              <button
+                onClick={handlePhoneClick}
+                className="text-blue-600 hover:text-blue-800 font-semibold text-lg"
+              >
+                +1 (972) 272-8000
+              </button>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label
+                  htmlFor="phone"
+                  className="block text-sm font-medium text-foreground mb-1"
+                >
+                  Phone Number
+                </label>
+                <input
+                  id="phone"
+                  type="tel"
+                  placeholder="(555) 123-4567"
+                  value={phoneNumber}
+                  onChange={(e) => setPhoneNumber(e.target.value)}
+                  required
+                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-cta text-foreground"
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="service"
+                  className="block text-sm font-medium text-foreground mb-1"
+                >
+                  Service Type (Optional)
+                </label>
+                <select
+                  id="service"
+                  value={selectedService}
+                  onChange={(e) => setSelectedService(e.target.value)}
+                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-cta text-foreground bg-white"
+                >
+                  <option value="">Select a service...</option>
+                  {serviceOptions.map((service, index) => (
+                    <option key={index} value={service}>
+                      {service}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label
+                  htmlFor="description"
+                  className="block text-sm font-medium text-foreground mb-1"
+                >
+                  Service Description
+                </label>
+                <textarea
+                  id="description"
+                  placeholder="Tell us what service you need..."
+                  value={serviceDescription}
+                  onChange={(e) => setServiceDescription(e.target.value)}
+                  required
+                  rows={4}
+                  className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-cta text-foreground"
+                />
+              </div>
+
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="button"
+                  onClick={handleCloseModal}
+                  className="flex-1 px-4 py-2 border border-gray-300 text-foreground rounded-md hover:bg-gray-50 font-medium transition"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2 bg-primary-cta text-white rounded-md hover:opacity-90 font-medium transition"
+                >
+                  Submit
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
     </ThemeProvider>
   );
 }