src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState } from "react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
@@ -14,8 +15,13 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar
 import { Calendar, Clock, Smile, Star, UserPlus, Users } from "lucide-react";
 
 export default function LandingPage() {
-  const handleAppointmentClick = () => {
-    window.location.href = "sms:4808933256";
+  const [showAppointmentModal, setShowAppointmentModal] = useState(false);
+  const [formData, setFormData] = useState({ service: "", time: "" });
+
+  const handleSendAppointment = () => {
+    const message = `Appointment Request: ${formData.service} at ${formData.time}`;
+    window.location.href = `sms:4808933256?body=${encodeURIComponent(message)}`;
+    setShowAppointmentModal(false);
   };
 
   return (
@@ -51,7 +57,7 @@ export default function LandingPage() {
       logoText="Ahwatukee Barbers"
       description="Family-run, friendly neighborhood barbershop in Phoenix, AZ. Quality cuts, classic shaves, and grooming for all ages."
       buttons={[
-        { text: "Book Appointment", onClick: handleAppointmentClick },
+        { text: "Book Appointment", onClick: () => setShowAppointmentModal(true) },
         { text: "Get Directions", href: "https://maps.google.com" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/high-angle-cane-antique-store_23-2149640760.jpg"
@@ -59,6 +65,25 @@ export default function LandingPage() {
     />
   </div>
 
+  {showAppointmentModal && (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+      <div className="bg-white p-8 rounded-2xl w-full max-w-sm shadow-xl">
+        <h2 className="text-xl font-bold mb-4">Select Appointment</h2>
+        <select className="w-full p-3 mb-4 border rounded" onChange={(e) => setFormData({...formData, service: e.target.value})}>
+          <option value="">Choose Service</option>
+          <option value="Basic Haircut">Basic Haircut</option>
+          <option value="Shave">Shave</option>
+          <option value="Haircut and Beard Trim">Haircut & Beard Trim</option>
+        </select>
+        <input type="text" placeholder="Time (e.g. 10:00 AM)" className="w-full p-3 mb-4 border rounded" onChange={(e) => setFormData({...formData, time: e.target.value})} />
+        <div className="flex gap-2">
+          <button onClick={() => setShowAppointmentModal(false)} className="flex-1 py-2 border rounded">Cancel</button>
+          <button onClick={handleSendAppointment} className="flex-1 py-2 bg-blue-600 text-white rounded">Text Shop</button>
+        </div>
+      </div>
+    </div>
+  )}
+
   <div id="about" data-section="about">
       <AboutMetric
       useInvertedBackground={true}