Please fix the show more buttons they don’t work. When you click they need to open a page or popup where it shows more Info on the package ! Be detailed - Follow Up Deployment

index.html

@@ -529,6 +529,658 @@
             <div class="relative">
                 <div class="flex flex-col md:flex-row justify-between items-center relative z-10 gap-4 md:gap-0">
                     <!-- Step 1 -->
-                    <div class="process-step bg-gray-700 text-white rounded-full w-24 h-24 md:w-32 md:h-32 flex flex-col items-center justify-center cursor-pointer transition duration-300 gradient-border" onclick="show
+                    <div class="process-step bg-gray-700 text-white rounded-full w-24 h-24 md:w-32 md:h-32 flex flex-col items-center justify-center cursor-pointer transition duration-300 gradient-border" onclick="showProcessDetail(1)">
+                        <div class="step-number text-3xl md:text-4xl font-bold text-purple-400">1</div>
+                        <div class="step-text text-sm md:text-base font-medium">Schedule</div>
+                    </div>
+                    
+                    <!-- Step 2 -->
+                    <div class="process-step bg-gray-700 text-white rounded-full w-24 h-24 md:w-32 md:h-32 flex flex-col items-center justify-center cursor-pointer transition duration-300 gradient-border" onclick="showProcessDetail(2)">
+                        <div class="step-number text-3xl md:text-4xl font-bold text-purple-400">2</div>
+                        <div class="step-text text-sm md:text-base font-medium">Arrival</div>
+                    </div>
+                    
+                    <!-- Step 3 -->
+                    <div class="process-step bg-gray-700 text-white rounded-full w-24 h-24 md:w-32 md:h-32 flex flex-col items-center justify-center cursor-pointer transition duration-300 gradient-border" onclick="showProcessDetail(3)">
+                        <div class="step-number text-3xl md:text-4xl font-bold text-purple-400">3</div>
+                        <div class="step-text text-sm md:text-base font-medium">Detail</div>
+                    </div>
+                    
+                    <!-- Step 4 -->
+                    <div class="process-step bg-gray-700 text-white rounded-full w-24 h-24 md:w-32 md:h-32 flex flex-col items-center justify-center cursor-pointer transition duration-300 gradient-border" onclick="showProcessDetail(4)">
+                        <div class="step-number text-3xl md:text-4xl font-bold text-purple-400">4</div>
+                        <div class="step-text text-sm md:text-base font-medium">Inspect</div>
+                    </div>
+                    
+                    <!-- Step 5 -->
+                    <div class="process-step bg-gray-700 text-white rounded-full w-24 h-24 md:w-32 md:h-32 flex flex-col items-center justify-center cursor-pointer transition duration-300 gradient-border" onclick="showProcessDetail(5)">
+                        <div class="step-number text-3xl md:text-4xl font-bold text-purple-400">5</div>
+                        <div class="step-text text-sm md:text-base font-medium">Protect</div>
+                    </div>
+                </div>
+                
+                <div class="mt-12 bg-gray-700/50 backdrop-blur-sm rounded-xl p-8 border border-gray-600">
+                    <h3 class="text-2xl font-bold mb-4 text-purple-400">Our 5-Step Process</h3>
+                    <p class="text-gray-300 mb-6">
+                        Every detail follows our proven 5-step process to ensure consistent, high-quality results. From initial consultation to final protection, we treat your vehicle with the care it deserves.
+                    </p>
+                    <div class="grid md:grid-cols-2 gap-6">
+                        <div>
+                            <h4 class="text-lg font-bold mb-2 text-white">Step 1: Schedule</h4>
+                            <p class="text-gray-400">
+                                Book your appointment online or by phone. We'll confirm your location, vehicle type, and service selection.
+                            </p>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-bold mb-2 text-white">Step 2: Arrival</h4>
+                            <p class="text-gray-400">
+                                Our team arrives on time with all necessary equipment. We'll discuss any specific concerns before starting.
+                            </p>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-bold mb-2 text-white">Step 3: Detail</h4>
+                            <p class="text-gray-400">
+                                Professional detailing using premium products and techniques tailored to your vehicle's needs.
+                            </p>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-bold mb-2 text-white">Step 4: Inspect</h4>
+                            <p class="text-gray-400">
+                                Thorough quality check to ensure every inch meets our high standards before finalizing.
+                            </p>
+                        </div>
+                        <div class="md:col-span-2">
+                            <h4 class="text-lg font-bold mb-2 text-white">Step 5: Protect</h4>
+                            <p class="text-gray-400">
+                                Application of protective coatings and final touches to maintain your vehicle's shine between details.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Stats Section -->
+    <section id="stats" class="py-16 bg-gradient-to-br from-purple-900/80 to-pink-900/80 text-white px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-12">
+                <span class="text-purple-300 font-semibold">WHY CHOOSE US</span>
+                <h2 class="text-4xl font-bold mt-2 text-white">Experience the Difference</h2>
+                <p class="text-xl mt-4 text-gray-300 max-w-3xl mx-auto">
+                    Premium service with mobile convenience
+                </p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
+                    <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-truck text-purple-300 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Mobile Convenience</h3>
+                    <p class="text-gray-300">We come to your home or office anywhere in LA & OC</p>
+                </div>
+                
+                <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
+                    <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-shield-alt text-purple-300 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Premium Protection</h3>
+                    <p class="text-gray-300">Advanced ceramic coatings for long-lasting shine</p>
+                </div>
+                
+                <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
+                    <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-leaf text-purple-300 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Eco-Friendly</h3>
+                    <p class="text-gray-300">Water-efficient techniques and biodegradable products</p>
+                </div>
+                
+                <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
+                    <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-award text-purple-300 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Certified Experts</h3>
+                    <p class="text-gray-300">Trained professionals with 10+ years of experience</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Add-ons Section -->
+    <section class="py-16 bg-gray-900 text-white px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-12">
+                <span class="text-purple-400 font-semibold">UPGRADES</span>
+                <h2 class="text-4xl font-bold mt-2 gradient-text">Premium Add-Ons</h2>
+                <p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
+                    Enhance your detail with professional upgrades
+                </p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Ceramic/Graphene Coating -->
+                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('ceramic')">
+                    <div class="flex justify-between items-start mb-2">
+                        <h4 class="text-xl font-bold text-white">Ceramic/Graphene Coating</h4>
+                        <span class="bg-purple-600 text-white text-sm font-bold px-3 py-1 rounded-full">POPULAR</span>
+                    </div>
+                    <p class="text-purple-400 text-2xl font-bold mb-3">$400-$700</p>
+                    <p class="text-gray-400 mb-4">
+                        Choose between 2-year ceramic or 5-year graphene coating with warranty
+                    </p>
+                    <button class="text-purple-400 font-medium flex items-center gap-2">
+                        Learn more <i class="fas fa-arrow-right"></i>
+                    </button>
+                </div>
+                
+                <!-- Full Polish -->
+                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('polish')">
+                    <h4 class="text-xl font-bold text-white mb-2">Full Polish</h4>
+                    <p class="text-purple-400 text-2xl font-bold mb-3">$220</p>
+                    <p class="text-gray-400 mb-4">
+                        Professional paint correction removes swirls and restores factory shine
+                    </p>
+                    <button class="text-purple-400 font-medium flex items-center gap-2">
+                        Learn more <i class="fas fa-arrow-right"></i>
+                    </button>
+                </div>
+                
+                <!-- Iron Decontamination -->
+                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('iron')">
+                    <h4 class="text-xl font-bold text-white mb-2">Iron Decontamination</h4>
+                    <p class="text-purple-400 text-2xl font-bold mb-3">Call for Price</p>
+                    <p class="text-gray-400 mb-4">
+                        Chemical treatment removes embedded brake dust and metal particles
+                    </p>
+                    <button class="text-purple-400 font-medium flex items-center gap-2">
+                        Learn more <i class="fas fa-arrow-right"></i>
+                    </button>
+                </div>
+                
+                <!-- Clay Bar Treatment -->
+                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('clay')">
+                    <h4 class="text-xl font-bold text-white mb-2">Clay Bar Treatment</h4>
+                    <p class="text-purple-400 text-2xl font-bold mb-3">Call for Price</p>
+                    <p class="text-gray-400 mb-4">
+                        Removes bonded contaminants for glass-smooth paint
+                    </p>
+                    <button class="text-purple-400 font-medium flex items-center gap-2">
+                        Learn more <i class="fas fa-arrow-right"></i>
+                    </button>
+                </div>
+                
+                <!-- Steam Cleaning -->
+                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('steam')">
+                    <h4 class="text-xl font-bold text-white mb-2">Steam Cleaning</h4>
+                    <p class="text-purple-400 text-2xl font-bold mb-3">Call for Price</p>
+                    <p class="text-gray-400 mb-4">
+                        Deep sanitization and odor removal using high-temperature steam
+                    </p>
+                    <button class="text-purple-400 font-medium flex items-center gap-2">
+                        Learn more <i class="fas fa-arrow-right"></i>
+                    </button>
+                </div>
+                
+                <!-- Engine Bay Detail -->
+                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('engine')">
+                    <h4 class="text-xl font-bold text-white mb-2">Engine Bay Detail</h4>
+                    <p class="text-purple-400 text-2xl font-bold mb-3">Call for Price</p>
+                    <p class="text-gray-400 mb-4">
+                        Complete engine bay cleaning, degreasing, and dressing
+                    </p>
+                    <button class="text-purple-400 font-medium flex items-center gap-2">
+                        Learn more <i class="fas fa-arrow-right"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Testimonials Section -->
+    <section class="py-16 bg-gray-800 text-white px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-12">
+                <span class="text-purple-400 font-semibold">TESTIMONIALS</span>
+                <h2 class="text-4xl font-bold mt-2 gradient-text">Customer Reviews</h2>
+                <p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
+                    What our clients say about us
+                </p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <!-- Testimonial 1 -->
+                <div class="bg-gray-700 p-8 rounded-2xl shadow-lg border border-gray-600">
+                    <div class="flex items-center mb-4">
+                        <div class="text-yellow-400 text-2xl mr-2">★★★★★</div>
+                        <span class="text-sm text-gray-400">2 weeks ago</span>
+                    </div>
+                    <p class="text-lg italic mb-6 leading-relaxed">
+                        "Jay transformed my car! The attention to detail is incredible. My BMW looks better than when I bought it. The convenience of mobile service is unbeatable!"
+                    </p>
+                    <div class="flex items-center">
+                        <div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-4">SM</div>
+                        <div>
+                            <p class="font-bold text-white">Sarah M.</p>
+                            <p class="text-gray-400 text-sm">Los Angeles</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Testimonial 2 -->
+                <div class="bg-gray-700 p-8 rounded-2xl shadow-lg border border-gray-600">
+                    <div class="flex items-center mb-4">
+                        <div class="text-yellow-400 text-2xl mr-2">★★★★★</div>
+                        <span class="text-sm text-gray-400">1 month ago</span>
+                    </div>
+                    <p class="text-lg italic mb-6 leading-relaxed">
+                        "Professional, punctual, and perfectionist! Jay's ceramic coating service is top-notch. My car still beads water perfectly after 6 months!"
+                    </p>
+                    <div class="flex items-center">
+                        <div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-4">MT</div>
+                        <div>
+                            <p class="font-bold text-white">Mike T.</p>
+                            <p class="text-gray-400 text-sm">Orange County</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Gallery Section -->
+    <section id="gallery" class="py-16 bg-gray-900 text-white px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-12">
+                <span class="text-purple-400 font-semibold">OUR WORK</span>
+                <h2 class="text-4xl font-bold mt-2 gradient-text">Transformation Gallery</h2>
+                <p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
+                    See the difference we make
+                </p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500 border border-gray-700">
+                    <div class="relative h-64 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
+                        <i class="fas fa-car text-gray-600 text-6xl"></i>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full">Before/After</span>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold mb-2">BMW 3 Series</h3>
+                        <p class="text-gray-400">Full exterior detail with ceramic coating</p>
+                    </div>
+                </div>
+                
+                <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500 border border-gray-700">
+                    <div class="relative h-64 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
+                        <i class="fas fa-car text-gray-600 text-6xl"></i>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full">Before/After</span>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold mb-2">Tesla Model 3</h3>
+                        <p class="text-gray-400">Interior deep cleaning and protection</p>
+                    </div>
+                </div>
+                
+                <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500 border border-gray-700">
+                    <div class="relative h-64 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
+                        <i class="fas fa-car text-gray-600 text-6xl"></i>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full">Before/After</span>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold mb-2">Ford F-150</h3>
+                        <p class="text-gray-400">Full exterior detail and paint correction</p>
+                    </div>
+                </div>
+                
+                <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500 border border-gray-700">
+                    <div class="relative h-64 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
+                        <i class="fas fa-car text-gray-600 text-6xl"></i>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full">Before/After</span>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold mb-2">Mercedes GLE</h3>
+                        <p class="text-gray-400">Interior steam cleaning and leather treatment</p>
+                    </div>
+                </div>
+                
+                <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500 border border-gray-700">
+                    <div class="relative h-64 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
+                        <i class="fas fa-car text-gray-600 text-6xl"></i>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full">Before/After</span>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold mb-2">Toyota Camry</h3>
+                        <p class="text-gray-400">Full exterior detail and headlight restoration</p>
+                    </div>
+                </div>
+                
+                <div class="gallery-item bg-gray-800 rounded-xl overflow-hidden transition duration-500 border border-gray-700">
+                    <div class="relative h-64 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
+                        <i class="fas fa-car text-gray-600 text-6xl"></i>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full">Before/After</span>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="text-xl font-bold mb-2">Honda Civic</h3>
+                        <p class="text-gray-400">Interior deep clean and odor removal</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="text-center mt-12">
+                <a href="#" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">
+                    View More Transformations
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- FAQ Section -->
+    <section id="faq" class="py-16 bg-gray-800 text-white px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-12">
+                <span class="text-purple-400 font-semibold">QUESTIONS</span>
+                <h2 class="text-4xl font-bold mt-2 gradient-text">Frequently Asked</h2>
+                <p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
+                    Everything you need to know
+                </p>
+            </div>
+            
+            <div class="max-w-4xl mx-auto">
+                <!-- FAQ Item 1 -->
+                <div class="faq-item bg-gray-700 rounded-xl overflow-hidden mb-4 border border-gray-600">
+                    <div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300" onclick="toggleFAQ(this)">
+                        <span class="text-xl font-bold">How long does each service take?</span>
+                        <span class="faq-arrow text-xl text-purple-400">▼</span>
+                    </div>
+                    <div class="faq-answer bg-gray-700/50">
+                        <div class="p-5">
+                            <p class="mb-2"><strong class="text-purple-400">Jay's Basic:</strong> 1.5-2 hours</p>
+                            <p class="mb-2"><strong class="text-purple-400">Jay's Luxury:</strong> 2.5-3 hours</p>
+                            <p class="mb-2"><strong class="text-purple-400">Jay's Max:</strong> 4-5 hours</p>
+                            <p class="mt-4">Times may vary based on vehicle size and condition. We take pride in thorough work and never rush a job!</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- FAQ Item 2 -->
+                <div class="faq-item bg-gray-700 rounded-xl overflow-hidden mb-4 border border-gray-600">
+                    <div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300" onclick="toggleFAQ(this)">
+                        <span class="text-xl font-bold">What do I need to provide?</span>
+                        <span class="faq-arrow text-xl text-purple-400">▼</span>
+                    </div>
+                    <div class="faq-answer bg-gray-700/50">
+                        <div class="p-5">
+                            <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>
+                
+                <!-- FAQ Item 3 -->
+                <div class="faq-item bg-gray-700 rounded-xl overflow-hidden mb-4 border border-gray-600">
+                    <div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300" onclick="toggleFAQ(this)">
+                        <span class="text-xl font-bold">Do you offer any guarantees?</span>
+                        <span class="faq-arrow text-xl text-purple-400">▼</span>
+                    </div>
+                    <div class="faq-answer bg-gray-700/50">
+                        <div class="p-5">
+                            <p>Absolutely! We offer a 100% satisfaction guarantee on all services. If you're not completely happy, we'll make it right. Our ceramic coatings come with a 2-year warranty, and we stand behind all our work with pride.</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- FAQ Item 4 -->
+                <div class="faq-item bg-gray-700 rounded-xl overflow-hidden mb-4 border border-gray-600">
+                    <div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300" onclick="toggleFAQ(this)">
+                        <span class="text-xl font-bold">What areas do you service?</span>
+                        <span class="faq-arrow text-xl text-purple-400">▼</span>
+                    </div>
+                    <div class="faq-answer bg-gray-700/50">
+                        <div class="p-5">
+                            <p>We provide FREE service within 30 miles of Lakewood, covering most of Los Angeles and Orange County. Beyond 30 miles, we charge $10 for every additional 10 miles. Popular areas include Long Beach, Torrance, Anaheim, Irvine, and Santa Monica.</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- FAQ Item 5 -->
+                <div class="faq-item bg-gray-700 rounded-xl overflow-hidden border border-gray-600">
+                    <div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300" onclick="toggleFAQ(this)">
+                        <span class="text-xl font-bold">What's the difference between polish and wax?</span>
+                        <span class="faq-arrow text-xl text-purple-400">▼</span>
+                    </div>
+                    <div class="faq-answer bg-gray-700/50">
+                        <div class="p-5">
+                            <p class="mb-4"><strong class="text-purple-400">Polish</strong> is corrective - it removes a thin layer of clear coat to eliminate swirls, scratches, and oxidation. Think of it as "exfoliating" your paint.</p>
+                            <p><strong class="text-purple-400">Wax</strong> is protective - it adds a layer on top of your paint to protect against UV rays, water, and contaminants. We recommend polishing first, then protecting with wax or ceramic coating.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section id="contact" class="py-16 bg-gray-900 text-white px-6">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-12">
+                <span class="text-purple-400 font-semibold">GET IN TOUCH</span>
+                <h2 class="text-4xl font-bold mt-2 gradient-text">Book Your Detail Today!</h2>
+                <p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
+                    Ready to transform your vehicle? Contact us now.
+                </p>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                <div class="bg-gray-800 rounded-2xl p-8 md:p-12 text-white shadow-xl relative overflow-hidden border border-gray-700">
+                    <div class="text-4xl md:text-5xl font-bold text-center mb-8 gradient-text">562-228-9429</div>
+                    
+                    <div class="contact-info text-center text-lg mb-10">
+                        <p class="mb-4"><strong>Business Hours:</strong></p>
+                        <p class="mb-4">Monday - Saturday: 6:00 AM - 7:00 PM<br>
+                        Sunday: 8:00 AM - 5:00 PM</p>
+                        
+                        <p><strong>Service Area:</strong> Los Angeles & Orange County</p>
+                    </div>
+                    
+                    <div class="flex flex-col md:flex-row justify-center gap-4 mb-10">
+                        <a href="tel:5622289429" class="bg-green-600 hover:bg-green-700 text-white font-bold py-4 px-8 rounded-full transition duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2">
+                            <i class="fas fa-phone"></i> Call Now
+                        </a>
+                        <a href="sms:562-228-9429?body=Hi%20Jay!%20I'd%20like%20to%20schedule%20a%20mobile%20detailing%20service." class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-full transition duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2">
+                            <i class="fas fa-comment-alt"></i> Text Us
+                        </a>
+                    </div>
+                    
+                    <div class="flex flex-col md:flex-row justify-center gap-6">
+                        <a href="https://www.instagram.com/jayswaxandwash/" target="_blank" class="border-2 border-white hover:bg-white hover:text-purple-600 py-2 px-6 rounded-full transition duration-300 flex items-center justify-center gap-2">
+                            <i class="fab fa-instagram"></i> @jayswaxandwash
+                        </a>
+                        <a href="https://m.yelp.com/biz/jay-s-mobile-wash-buena-park" target="_blank" class="border-2 border-white hover:bg-white hover:text-purple-600 py-2 px-6 rounded-full transition duration-300 flex items-center justify-center gap-2">
+                            <i class="fab fa-yelp"></i> Jay's Mobile Wash
+                        </a>
+                    </div>
+                </div>
+                
+                <!-- Appointment Form -->
+                <div class="bg-gray-800 rounded-2xl p-8 border border-gray-700">
+                    <h3 class="text-2xl font-bold mb-6 text-center text-white">Schedule Appointment</h3>
+                    <form class="space-y-4">
+                        <div>
+                            <label class="block text-gray-300 mb-2">Full Name</label>
+                            <input type="text" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500">
+                        </div>
+                        
+                        <div>
+                            <label class="block text-gray-300 mb-2">Email Address</label>
+                            <input type="email" placeholder="your@email.com" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500">
+                        </div>
+                        
+                        <div>
+                            <label class="block text-gray-300 mb-2">Phone Number</label>
+                            <input type="tel" placeholder="(123) 456-7890" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500">
+                        </div>
+                        
+                        <div>
+                            <label class="block text-gray-300 mb-2">Vehicle Type</label>
+                            <select class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500">
+                                <option>Sedan</option>
+                                <option>SUV</option>
+                                <option>Truck</option>
+                                <option>Van</option>
+                                <option>Luxury Vehicle</option>
+                            </select>
+                        </div>
+                        
+                        <div>
+                            <label class="block text-gray-300 mb-2">Preferred Service</label>
+                            <select class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500">
+                                <option>Jay's Basic</option>
+                                <option>Jay's Luxury</option>
+                                <option>Jay's Max</option>
+                                <option>Ceramic Coating</option>
+                                <option>Full Polish</option>
+                            </select>
+                        </div>
+                        
+                        <div>
+                            <label class="block text-gray-300 mb-2">Preferred Date</label>
+                            <input type="date" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500">
+                        </div>
+                        
+                        <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-8 rounded-full transition duration-300 shadow-lg">
+                            Request Appointment
+                        </button>
+                    </form>
+                </div>
+            </div>
+            
+            <!-- Service Area Map -->
+            <div class="mt-16">
+                <h3 class="text-3xl font-bold text-center mb-8 gradient-text">Our Service Area</h3>
+                <div class="bg-gray-800 rounded-xl overflow-hidden max-w-4xl mx-auto border border-gray-700">
+                    <div class="relative h-96 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center">
+                        <i class="fas fa-map-marked-alt text-gray-600 text-6xl"></i>
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <span class="text-white font-bold bg-black/50 px-4 py-2 rounded-full text-xl">Los Angeles & Orange County</span>
+                        </div>
+                    </div>
+                </div>
+                <p class="text-center mt-4 text-gray-400 max-w-2xl mx-auto">
+                    We proudly serve all of Los Angeles County and Orange County. Free service within 30 miles of Lakewood, CA. Additional charges apply beyond this radius.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12 px-6 text-center border-t border-gray-800">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex justify-center mb-8">
+                <a href="#" class="text-2xl font-bold gradient-text">JAY'S MOBILE WASH</a>
+            </div>
+            <div class="flex justify-center space-x-6 mb-8">
+                <a href="https://www.instagram.com/jayswaxandwash/" target="_blank" class="text-gray-400 hover:text-purple-400 transition duration-300">
+                    <i class="fab fa-instagram text-2xl"></i>
+                </a>
+                <a href="https://m.yelp.com/biz/jay-s-mobile-wash-buena-park" target="_blank" class="text-gray-400 hover:text-purple-400 transition duration-300">
+                    <i class="fab fa-yelp text-2xl"></i>
+                </a>
+                <a href="tel:5622289429" class="text-gray-400 hover:text-purple-400 transition duration-300">
+                    <i class="fas fa-phone text-2xl"></i>
+                </a>
+            </div>
+            <p class="mb-4">© 2025 Jay's Mobile Wash. All Rights Reserved.</p>
+            <p class="mb-4">Licensed • Insured • Satisfaction Guaranteed</p>
+            <p>Professional Mobile Detailing in Los Angeles & Orange County</p>
+        </div>
+    </footer>
+
+    <!-- Modal -->
+    <div id="modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden overflow-y-auto p-4">
+        <div class="modal-content bg-gray-800 rounded-2xl max-w-4xl mx-auto my-12 p-6 md:p-8 relative border border-gray-700">
+            <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>
+    </div>
+
+    <script>
+        // Mobile menu toggle
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        
+        mobileMenuButton.addEventListener('click', () => {
+            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 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-
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jjmandog/jaysmobilewash" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>