Update src/app/page.tsx

src/app/page.tsx

@@ -17,6 +17,11 @@ 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);
@@ -26,14 +31,19 @@ export default function LandingPage() {
     setIsModalOpen(false);
     setPhoneNumber("");
     setServiceDescription("");
+    setSelectedService("");
   };
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    console.log("Form submitted:", { phoneNumber, serviceDescription });
+    console.log("Form submitted:", { phoneNumber, serviceDescription, selectedService });
     handleCloseModal();
   };
 
+  const handlePhoneClick = () => {
+    window.location.href = "tel:+19722728000";
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -286,7 +296,7 @@ export default function LandingPage() {
           onClick={handleCloseModal}
         >
           <div
-            className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md"
+            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">
@@ -300,6 +310,16 @@ export default function LandingPage() {
               </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
@@ -319,6 +339,28 @@ export default function LandingPage() {
                 />
               </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"