Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import HeroOverlay from "@/components/sections/hero/HeroOverlay";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
@@ -12,9 +13,13 @@ import TestimonialCardThirteen from "@/components/sections/testimonial/Testimoni
 import FaqSplitText from "@/components/sections/faq/FaqSplitText";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterMedia from "@/components/sections/footer/FooterMedia";
-import { ShieldCheck, Wrench, DollarSign } from "lucide-react";
+import { ShieldCheck, Wrench, DollarSign, X } from "lucide-react";
 
 export default function HvacPage() {
+  const [showForm, setShowForm] = useState(false);
+
+  const handleBooking = () => setShowForm(true);
+
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -28,6 +33,23 @@ export default function HvacPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="semibold"
     >
+      {showForm && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
+          <div className="bg-white p-8 rounded-2xl w-full max-w-lg relative">
+            <button onClick={() => setShowForm(false)} className="absolute top-4 right-4 text-gray-400 hover:text-black">
+              <X className="w-6 h-6" />
+            </button>
+            <h2 className="text-2xl font-bold mb-4">Book Your Appointment</h2>
+            <form className="space-y-4">
+              <input type="text" placeholder="Full Name" className="w-full p-3 border border-gray-300 rounded-lg" />
+              <input type="email" placeholder="Email Address" className="w-full p-3 border border-gray-300 rounded-lg" />
+              <input type="tel" placeholder="Phone Number" className="w-full p-3 border border-gray-300 rounded-lg" />
+              <textarea placeholder="Details about your service needs" className="w-full p-3 border border-gray-300 rounded-lg min-h-[100px]" />
+              <button type="submit" className="w-full py-3 bg-blue-600 text-white rounded-lg font-semibold">Confirm My Priority Appointment</button>
+            </form>
+          </div>
+        </div>
+      )}
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingInline
@@ -38,7 +60,7 @@ export default function HvacPage() {
               { name: "Testimonials", id: "testimonials" },
               { name: "Contact", id: "contact" },
             ]}
-            button={{ text: "Book Now", href: "#contact" }}
+            button={{ text: "Confirm My Priority Appointment", onClick: handleBooking }}
             animateOnLoad={false}
           />
         </div>
@@ -48,7 +70,7 @@ export default function HvacPage() {
             title="Montecito's Premier Climate Comfort"
             description="Luxury living requires a perfect environment. Sunset Air Conditioning & Heating delivers elite, same-day HVAC service, precision repairs, and seamless climate management for your Montecito estate."
             buttons={[
-              { text: "Schedule Expert Service", href: "#contact" },
+              { text: "Confirm My Priority Appointment", onClick: handleBooking },
               { text: "View Our Solutions", href: "#services" },
             ]}
             buttonAnimation="slide-up"
@@ -135,7 +157,7 @@ export default function HvacPage() {
           <FaqSplitText
             sideTitle="Frequently Asked Questions"
             sideDescription="Everything you need to know about your home's comfort."
-            buttons={[{ text: "Inquire Today", href: "#contact" }]}
+            buttons={[{ text: "Confirm My Priority Appointment", onClick: handleBooking }]}
             faqsAnimation="slide-up"
             faqs={[
               { id: "1", title: "Do you offer same-day service?", content: "Yes, we pride ourselves on being the local Montecito choice for rapid, same-day HVAC repairs and maintenance." },
@@ -151,7 +173,7 @@ export default function HvacPage() {
             tag="Inquire Now"
             title="Restore Your Home's Climate"
             description="Get in touch with the Sunset team for immediate assistance or to schedule your annual system health check."
-            buttons={[{ text: "Confirm My Priority Appointment", href: "#" }]}
+            buttons={[{ text: "Confirm My Priority Appointment", onClick: handleBooking }]}
             background={{ variant: "sparkles-gradient" }}
             useInvertedBackground={true}
           />