Why is show more details buttons not working when I click it! Fix it now - Follow Up Deployment

index.html

@@ -1115,11 +1115,180 @@
             <button class="close-btn absolute top-4 right-4 bg-purple-600 text-white w-10 h-10 rounded-full flex items-center justify-center text-xl transition duration-300 hover:bg-purple-700" onclick="closeModal()">
                 ×
             </button>
-            <div id="modalContent" class="prose max-w-none text-gray-300"></div>
+            <div id="modalContent" class="text-gray-300"></div>
         </div>
     </div>
 
     <script>
+        // Service details data
+        const serviceDetails = {
+            basic: {
+                title: "Jay's Basic Package",
+                price: "Small Car: $70 | SUV: $80",
+                description: "Our essential detailing package that brings back your car's shine with professional hand washing and interior cleaning.",
+                ideal: "Regular maintenance between full details or for those looking for a thorough clean without advanced protection.",
+                steps: [
+                    {
+                        title: "Exterior Wash",
+                        description: "Two-step hand wash using pH-neutral shampoo and microfiber mitts",
+                        benefit: "Removes dirt without stripping wax or damaging paint"
+                    },
+                    {
+                        title: "Wheel Cleaning",
+                        description: "Deep cleaning with ceramic-infused wheel cleaner",
+                        benefit: "Removes brake dust and protects wheels from corrosion"
+                    },
+                    {
+                        title: "Interior Wipe-down",
+                        description: "Cleaning of all surfaces with premium interior cleaner",
+                        benefit: "Removes dust, fingerprints and light stains"
+                    },
+                    {
+                        title: "Vacuuming",
+                        description: "Complete vacuum of seats, carpets and trunk",
+                        benefit: "Removes dirt, debris and pet hair from all areas"
+                    },
+                    {
+                        title: "Window Cleaning",
+                        description: "Streak-free cleaning inside and out",
+                        benefit: "Crystal clear visibility with no residue"
+                    }
+                ],
+                features: [
+                    {
+                        title: "Exterior Features",
+                        items: [
+                            "Hand wash with pH-neutral shampoo",
+                            "Wheel cleaning with ceramic SiO₂",
+                            "Tire dressing application",
+                            "Door jambs cleaned",
+                            "Exterior glass cleaned"
+                        ]
+                    },
+                    {
+                        title: "Interior Features",
+                        items: [
+                            "Dashboard and console cleaned",
+                            "Cup holders and storage areas cleaned",
+                            "Door panels cleaned",
+                            "Vacuum seats and carpets",
+                            "Trunk vacuumed"
+                        ]
+                    }
+                ]
+            },
+            luxury: {
+                title: "Jay's Luxury Package",
+                price: "Small Car: $130 | SUV: $140",
+                description: "Our most popular package that includes advanced protection with ceramic spray wax and interior SiO₂ treatment.",
+                ideal: "Those wanting long-lasting protection and enhanced shine between full details.",
+                steps: [
+                    {
+                        title: "Basic Package Plus",
+                        description: "Includes all Basic package services",
+                        benefit: "Complete cleaning foundation"
+                    },
+                    {
+                        title: "Ceramic Spray Wax",
+                        description: "Application of premium ceramic spray wax",
+                        benefit: "3 months of paint protection and hydrophobic effect"
+                    },
+                    {
+                        title: "Interior Protection",
+                        description: "SiO₂ interior treatment on all surfaces",
+                        benefit: "Repels dust and makes future cleaning easier"
+                    },
+                    {
+                        title: "Trim Restoration",
+                        description: "Application of trim restorer",
+                        benefit: "Revives faded plastic and rubber trim"
+                    },
+                    {
+                        title: "Enhanced Protection",
+                        description: "Door jambs and hinges treated",
+                        benefit: "Complete protection from top to bottom"
+                    }
+                ],
+                features: [
+                    {
+                        title: "Exterior Features",
+                        items: [
+                            "All Basic exterior services",
+                            "Ceramic spray wax application",
+                            "Trim restoration",
+                            "Enhanced door jamb cleaning",
+                            "3-month paint protection"
+                        ]
+                    },
+                    {
+                        title: "Interior Features",
+                        items: [
+                            "All Basic interior services",
+                            "SiO₂ interior protection",
+                            "Vinyl/leather conditioning",
+                            "Vent cleaning",
+                            "Enhanced cup holder cleaning"
+                        ]
+                    }
+                ]
+            },
+            max: {
+                title: "Jay's Max Package",
+                price: "Small Car: $200 | SUV: $210",
+                description: "Our most comprehensive package featuring advanced ceramic hyper wax and interior steam cleaning for showroom-quality results.",
+                ideal: "Enthusiasts and those preparing their vehicle for special events or long-term protection.",
+                steps: [
+                    {
+                        title: "Luxury Package Plus",
+                        description: "Includes all Luxury package services",
+                        benefit: "Premium cleaning and protection base"
+                    },
+                    {
+                        title: "Hyper Wax Application",
+                        description: "Advanced ceramic hyper wax with graphene",
+                        benefit: "6 months of extreme protection and gloss"
+                    },
+                    {
+                        title: "Steam Cleaning",
+                        description: "Interior steam cleaning of all surfaces",
+                        benefit: "Sanitizes and deep cleans without chemicals"
+                    },
+                    {
+                        title: "Clay Bar Treatment",
+                        description: "Paint decontamination with clay bar",
+                        benefit: "Removes embedded contaminants for glass-smooth finish"
+                    },
+                    {
+                        title: "Final Protection",
+                        description: "Hydrophobic SiO₂ infused graphene sealant",
+                        benefit: "Maximum water beading and dirt resistance"
+                    }
+                ],
+                features: [
+                    {
+                        title: "Exterior Features",
+                        items: [
+                            "All Luxury exterior services",
+                            "Clay bar decontamination",
+                            "Hyper ceramic wax with graphene",
+                            "Enhanced wheel well cleaning",
+                            "6-month paint protection"
+                        ]
+                    },
+                    {
+                        title: "Interior Features",
+                        items: [
+                            "All Luxury interior services",
+                            "Steam cleaning of all surfaces",
+                            "Enhanced leather/vinyl treatment",
+                            "Headliner cleaning",
+                            "Complete odor elimination"
+                        ]
+                    }
+                ]
+            }
+        };
+
         // Mobile menu toggle
         const mobileMenuButton = document.getElementById('mobile-menu-button');
         const mobileMenu = document.getElementById('mobile-menu');
@@ -1128,6 +1297,88 @@
             mobileMenu.classList.toggle('hidden');
         });
         
+        // Show service details modal
+        function showDetails(service) {
+            const details = serviceDetails[service];
+            const modal = document.getElementById('modal');
+            const modalContent = document.getElementById('modalContent');
+            
+            let html = `
+                <div class="service-details">
+                    <h2 class="text-3xl font-bold mb-4 gradient-text">${details.title}</h2>
+                    <p class="text-xl font-bold mb-6">${details.price}</p>
+                    <p class="mb-8 text-lg text-gray-300">${details.description}</p>
+                    
+                    <div class="grid md:grid-cols-2 gap-8 mb-8">
+                        <div class="bg-gray-700 p-6 rounded-xl border border-gray-600">
+                            <h3 class="text-xl font-bold mb-4 gradient-text">Step-by-Step Breakdown</h3>
+                            <ol class="space-y-4">
+                                ${details.steps.map((step, index) => `
+                                    <li class="bg-gray-800 p-4 rounded-lg border border-gray-700">
+                                        <div class="flex items-start">
+                                            <span class="bg-purple-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-white">${step.title}</h4>
+                                                <p class="text-gray-400 mt-1">${step.description}</p>
+                                                <div class="mt-2 bg-purple-900/30 p-2 rounded">
+                                                    <p class="text-sm font-medium text-purple-400 flex items-start">
+                                                        <span class="mr-1">✓</span>
+                                                        <span>${step.benefit}</span>
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </li>
+                                `).join('')}
+                            </ol>
+                        </div>
+                        
+                        <div class="bg-gray-700 p-6 rounded-xl border border-gray-600">
+                            <h3 class="text-xl font-bold mb-4 gradient-text">Ideal For</h3>
+                            <p class="text-gray-300 mb-4">${details.ideal}</p>
+                            <h3 class="text-xl font-bold mt-6 mb-4 gradient-text">Key Benefits</h3>
+                            <ul class="space-y-2">
+                                ${details.features.flatMap(section => section.items).slice(0, 5).map(item => `
+                                    <li class="flex items-start text-gray-300">
+                                        <span class="text-purple-400 mr-2">✓</span>
+                                        <span>${item}</span>
+                                    </li>
+                                `).join('')}
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-purple-900/20 p-6 rounded-xl border border-purple-800/30">
+                        <h3 class="text-xl font-bold mb-4 gradient-text">Detailed Features</h3>
+                        ${details.features.map(section => `
+                            <div class="mb-6">
+                                <h4 class="text-lg font-bold mb-2 text-white">${section.title}</h4>
+                                <ul class="space-y-2">
+                                    ${section.items.map(item => `
+                                        <li class="flex items-start text-gray-300">
+                                            <span class="text-purple-400 mr-2">•</span>
+                                            <span>${item}</span>
+                                        </li>
+                                    `).join('')}
+                                </ul>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            `;
+            
+            modalContent.innerHTML = html;
+            modal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        }
+        
+        // Close modal
+        function closeModal() {
+            const modal = document.getElementById('modal');
+            modal.classList.add('hidden');
+            document.body.style.overflow = 'auto';
+        }
+        
         // Show service details modal
         function showDetails(service) {
             const details = serviceDetails[service];