When I click the show more on each package nothing pops up please fix - Follow Up Deployment

index.html

@@ -118,6 +118,10 @@
             animation: bounce 0.5s;
         }
         
+        .bg-yelp-red {
+            background-color: #d32323;
+        }
+        
         @keyframes bounce {
             0%, 100% { transform: translateY(0); }
             50% { transform: translateY(-10px); }
@@ -430,8 +434,8 @@
                     <div class="stat-icon">
                         <i class="fas fa-star text-white text-2xl"></i>
                     </div>
-                    <div class="stat-number" id="five-stars">99%</div>
-                    <p class="text-gray-300 mt-2">5-Star Reviews</p>
+                    <div class="stat-number" id="five-stars">4.9★</div>
+                    <p class="text-gray-300 mt-2">Average Rating (250+ reviews)</p>
                 </div>
                 
                 <div class="stat-card p-6 text-center">
@@ -446,8 +450,8 @@
                     <div class="stat-icon">
                         <i class="fas fa-calendar-check text-white text-2xl"></i>
                     </div>
-                    <div class="stat-number" id="appointments">5000+</div>
-                    <p class="text-gray-300 mt-2">Appointments</p>
+                    <div class="stat-number" id="appointments">98%</div>
+                    <p class="text-gray-300 mt-2">Positive Feedback</p>
                 </div>
             </div>
         </div>
@@ -493,9 +497,14 @@
                                 Window cleaning inside & out
                             </li>
                         </ul>
-                        <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
-                            Learn More <i class="fas fa-arrow-right ml-2"></i>
-                        </button>
+                        <div class="flex gap-2">
+                            <a href="https://book.squareup.com/appointments/pzfva2vycwfzv7/location/LC0M9APDNYE44/services?show_locations=true" target="_blank" class="flex-1 bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
+                                Book Now <i class="fas fa-arrow-right ml-2"></i>
+                            </a>
+                            <button onclick="showDetails('basic')" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-full transition duration-300">
+                                <i class="fas fa-info-circle"></i>
+                            </button>
+                        </div>
                     </div>
                 </div>
                 
@@ -528,9 +537,14 @@
                                 3-month paint protection
                             </li>
                         </ul>
-                        <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
-                            Learn More <i class="fas fa-arrow-right ml-2"></i>
-                        </button>
+                        <div class="flex gap-2">
+                            <a href="https://book.squareup.com/appointments/pzfva2vycwfzv7/location/LC0M9APDNYE44/services?show_locations=true" target="_blank" class="flex-1 bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
+                                Book Now <i class="fas fa-arrow-right ml-2"></i>
+                            </a>
+                            <button onclick="showDetails('luxury')" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-full transition duration-300">
+                                <i class="fas fa-info-circle"></i>
+                            </button>
+                        </div>
                     </div>
                 </div>
                 
@@ -563,8 +577,8 @@
                                 Hydrophobic SiO₂ infused graphene sealant (6-month protection)
                             </li>
                         </ul>
-                        <button class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
-                            Learn More <i class="fas fa-arrow-right ml-2"></i>
+                        <button onclick="showDetails('max')" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
+                            Show More <i class="fas fa-info-circle ml-2"></i>
                         </button>
                     </div>
                 </div>
@@ -1031,7 +1045,8 @@
                     </div>
                     <div class="faq-answer bg-gray-700">
                         <div class="p-5">
-                            <p>Just access to water and electricity! We bring all professional equipment, products, and supplies. We need about 10 feet of space around your vehicle to work comfortably. If you don't have access to water/power, let us know - we have solutions!</p>
+                            <p>We supply our own de-ionized water (which means spot-free results) and bring 4000W of personal power generation. All you need to do is relax and come out to a brand new showroom-shiny vehicle!</p>
+                            <p class="mt-2">We bring all professional equipment, products, and supplies. We just need about 10 feet of space around your vehicle to work comfortably.</p>
                         </div>
                     </div>
                 </div>
@@ -1217,6 +1232,77 @@
             mobileMenu.classList.toggle('hidden');
         });
         
+        // Show service details modal
+        function showDetails(service) {
+            const details = serviceDetails[service];
+            let html = `
+                <div class="service-details">
+                    <h2 class="text-3xl font-bold mb-4 text-pink-600">${details.title}</h2>
+                    <p class="text-xl font-bold mb-6">${details.price}</p>
+                    <p class="mb-8 text-lg">${details.description}</p>
+                    
+                    <div class="grid md:grid-cols-2 gap-8 mb-8">
+                        <div class="bg-gray-100 p-6 rounded-xl">
+                            <h3 class="text-xl font-bold mb-4 text-pink-600">Step-by-Step Breakdown</h3>
+                            <ol class="space-y-4">
+                                ${details.steps.map((step, index) => `
+                                    <li class="bg-white p-4 rounded-lg shadow-sm">
+                                        <div class="flex items-start">
+                                            <span class="bg-pink-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">${index + 1}</span>
+                                            <div>
+                                                <h4 class="font-bold text-gray-800">${step.title}</h4>
+                                                <p class="text-gray-600 mt-1">${step.description}</p>
+                                                <div class="mt-2 bg-pink-50 p-2 rounded">
+                                                    <p class="text-sm font-medium text-pink-700 flex items-start">
+                                                        <span class="mr-1">✓</span>
+                                                        <span>${step.benefit}</span>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </li>
+                                `).join('')}
+                            </ol>
+                        </div>
+                        
+                        <div class="bg-gray-100 p-6 rounded-xl">
+                            <h3 class="text-xl font-bold mb-4 text-pink-600">Ideal For</h3>
+                            <p class="mb-4">${details.ideal}</p>
+                            <h3 class="text-xl font-bold mt-6 mb-4 text-pink-600">Key Benefits</h3>
+                            <ul class="space-y-2">
+                                ${details.features.flatMap(section => section.items).slice(0, 5).map(item => `
+                                    <li class="flex items-start">
+                                        <span class="text-green-500 mr-2">✓</span>
+                                        <span>${item}</span>
+                                    </li>
+                                `).join('')}
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-pink-50 p-6 rounded-xl">
+                        <h3 class="text-xl font-bold mb-4 text-pink-600">Detailed Features</h3>
+                        ${details.features.map(section => `
+                            <div class="mb-6">
+                                <h4 class="text-lg font-bold mb-2">${section.title}</h4>
+                                <ul class="space-y-2">
+                                    ${section.items.map(item => `
+                                        <li class="flex items-start">
+                                            <span class="text-pink-600 mr-2">•</span>
+                                            <span>${item}</span>
+                                        </li>
+                                    `).join('')}
+                                </ul>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            `;
+            
+            document.getElementById('modalContent').innerHTML = html;
+            document.getElementById('modal').classList.remove('hidden');
+        }
+
         // Smooth scrolling for navigation
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function(e) {
@@ -1231,12 +1317,44 @@
             });
         });
         
-        // Service Details Data
+        // Enhanced Service Details Data with process breakdown
         const serviceDetails = {
             basic: {
                 title: "JAY'S BASIC - Essential Clean & Shine",
                 price: "Small Car: $70 | SUV: $80",
                 description: "Our Basic package is perfect for regular maintenance and keeping your vehicle looking fresh. This comprehensive service typically takes 1.5-2 hours and delivers professional results at an affordable price.",
+                steps: [
+                    {
+                        title: "Pre-Wash Rinse",
+                        description: "High-pressure rinse to remove loose dirt and debris",
+                        benefit: "Prevents scratching during wash by removing abrasive particles"
+                    },
+                    {
+                        title: "Two-Bucket Wash",
+                        description: "Hand wash using grit guards and premium microfiber mitts",
+                        benefit: "Eliminates swirl marks by separating clean/dirty water"
+                    },
+                    {
+                        title: "Wheel & Tire Cleaning",
+                        description: "Specialized brushes and pH-balanced cleaners",
+                        benefit: "Removes brake dust and protects alloy wheels from corrosion"
+                    },
+                    {
+                        title: "Interior Vacuuming",
+                        description: "Deep clean all carpets, seats and hard-to-reach areas",
+                        benefit: "Removes allergens and extends fabric life"
+                    },
+                    {
+                        title: "Surface Wiping",
+                        description: "Microfiber detailing of all interior surfaces",
+                        benefit: "Removes dust and applies UV protection to prevent cracking"
+                    },
+                    {
+                        title: "Window Cleaning",
+                        description: "Streak-free formula with microfiber glass towels",
+                        benefit: "Improves visibility and removes water spots"
+                    }
+                ],
                 features: [
                     {
                         title: "Exterior Services",
@@ -1276,7 +1394,38 @@
                         ]
                     }
                 ],
-                process: "We start with a thorough rinse, followed by our two-bucket wash method to prevent contamination. While the vehicle is being washed, we clean the wheels and tires with specialized tools. After drying, we move to the interior for complete vacuuming and wiping of all surfaces. The service concludes with window cleaning and a final inspection.",
+                steps: [
+                    {
+                        title: "Pre-Wash Rinse",
+                        description: "High-pressure rinse to remove loose dirt and debris",
+                        benefit: "Prevents scratching during wash by removing abrasive particles"
+                    },
+                    {
+                        title: "Two-Bucket Wash",
+                        description: "Hand wash using grit guards and premium microfiber mitts",
+                        benefit: "Eliminates swirl marks by separating clean/dirty water"
+                    },
+                    {
+                        title: "Wheel & Tire Cleaning",
+                        description: "Specialized brushes and pH-balanced cleaners",
+                        benefit: "Removes brake dust and protects alloy wheels from corrosion"
+                    },
+                    {
+                        title: "Interior Vacuuming",
+                        description: "Deep clean all carpets, seats and hard-to-reach areas",
+                        benefit: "Removes allergens and extends fabric life"
+                    },
+                    {
+                        title: "Surface Wiping",
+                        description: "Microfiber detailing of all interior surfaces",
+                        benefit: "Removes dust and applies UV protection to prevent cracking"
+                    },
+                    {
+                        title: "Window Cleaning",
+                        description: "Streak-free formula with microfiber glass towels",
+                        benefit: "Improves visibility and removes water spots"
+                    }
+                ],
                 ideal: "This package is ideal for customers who wash their car regularly (every 2-4 weeks) and want professional results without the premium add-ons. Perfect for daily drivers, family vehicles, and anyone who wants their car clean and presentable."
             },
             luxury: {