<!-- Multi-Column Light/Dark Accent Footer -->
<footer class="bg-slate-950 text-slate-300 border-t border-slate-800 py-16 text-sm relative z-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-10 pb-12 border-b border-slate-800">
            
            <!-- Column 1: Brand & Tagline -->
            <div class="lg:col-span-4 space-y-4">
                <a href="#" class="inline-block group">
                    <img src="/images/logo.png" alt="Healx Logo" class="h-12 w-auto object-contain group-hover:scale-105 transition-transform" onerror="this.onerror=null; this.src='/images/logo.jpeg'; this.onerror=function(){this.outerHTML='<div class=\'font-display text-3xl tracking-wider font-extrabold\'><span class=\'text-white\'>HEAL</span><span class=\'text-gold-gradient\'>X</span></div>';};">
                </a>
                <p class="text-xs text-slate-400 leading-relaxed max-w-sm">
                    <strong class="text-white">TRANSFORM YOUR BODY. ELEVATE YOUR MIND.</strong> Empowering strength, biomechanical agility, endurance, and 1-on-1 personal training under Coach Aryan.
                </p>

                <div class="pt-2 flex items-center gap-3">
                    <a href="https://wa.me/917065007057" target="_blank" class="w-10 h-10 rounded-full bg-slate-900 border border-slate-800 hover:bg-emerald-600 hover:border-emerald-500 text-white flex items-center justify-center transition-all shadow-xs group" title="WhatsApp Chat">
                        <i class="fa-brands fa-whatsapp text-lg group-hover:scale-110 transition-transform"></i>
                    </a>
                    <a href="tel:7065007057" class="w-10 h-10 rounded-full bg-slate-900 border border-slate-800 hover:bg-[#D4AF37] hover:text-slate-950 text-white flex items-center justify-center transition-all shadow-xs group" title="Direct Phone">
                        <i class="fa-solid fa-phone text-sm group-hover:scale-110 transition-transform"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-slate-900 border border-slate-800 hover:bg-pink-600 hover:border-pink-500 text-white flex items-center justify-center transition-all shadow-xs group" title="Instagram">
                        <i class="fa-brands fa-instagram text-lg group-hover:scale-110 transition-transform"></i>
                    </a>
                </div>
            </div>

            <!-- Column 2: Quick Links -->
            <div class="lg:col-span-2 space-y-3">
                <h4 class="text-white font-extrabold text-xs uppercase tracking-widest border-l-2 border-[#D4AF37] pl-2.5">
                    Navigation
                </h4>
                <ul class="space-y-2 text-xs font-medium">
                    <li><a href="#home" class="text-slate-400 hover:text-[#D4AF37] transition-colors flex items-center gap-1.5"><i class="fa-solid fa-chevron-right text-[9px] text-[#D4AF37]"></i> Home</a></li>
                    <li><a href="#about" class="text-slate-400 hover:text-[#D4AF37] transition-colors flex items-center gap-1.5"><i class="fa-solid fa-chevron-right text-[9px] text-[#D4AF37]"></i> About Us</a></li>
                    <li><a href="#programs" class="text-slate-400 hover:text-[#D4AF37] transition-colors flex items-center gap-1.5"><i class="fa-solid fa-chevron-right text-[9px] text-[#D4AF37]"></i> Programs & Timetable</a></li>
                    <li><a href="#trainers" class="text-slate-400 hover:text-[#D4AF37] transition-colors flex items-center gap-1.5"><i class="fa-solid fa-chevron-right text-[9px] text-[#D4AF37]"></i> Master Trainers</a></li>
                    <li><a href="#pricing" class="text-slate-400 hover:text-[#D4AF37] transition-colors flex items-center gap-1.5"><i class="fa-solid fa-chevron-right text-[9px] text-[#D4AF37]"></i> Membership Pricing</a></li>
                    <li><a href="#contact" class="text-slate-400 hover:text-[#D4AF37] transition-colors flex items-center gap-1.5"><i class="fa-solid fa-chevron-right text-[9px] text-[#D4AF37]"></i> Contact Us</a></li>
                </ul>
            </div>

            <!-- Column 3: Fitness Programs -->
            <div class="lg:col-span-3 space-y-3">
                <h4 class="text-white font-extrabold text-xs uppercase tracking-widest border-l-2 border-[#D4AF37] pl-2.5">
                    Core Programs
                </h4>
                <ul class="space-y-2 text-xs font-medium">
                    <li><a href="#programs" class="text-slate-400 hover:text-[#D4AF37] transition-colors flex items-center gap-1.5"><i class="fa-solid fa-dumbbell text-[10px] text-[#D4AF37]"></i> Hypertrophy & Muscle Building</a></li>
                    <li><a href="#programs" class="text-slate-400 hover:text-[#D4AF37] transition-colors flex items-center gap-1.5"><i class="fa-solid fa-fire text-[10px] text-[#D4AF37]"></i> HIIT Ignite Fat Burn</a></li>
                    <li><a href="#programs" class="text-slate-400 hover:text-[#D4AF37] transition-colors flex items-center gap-1.5"><i class="fa-solid fa-bolt text-[10px] text-[#D4AF37]"></i> Cross-Fit & Functional Strength</a></li>
                    <li><a href="#programs" class="text-slate-400 hover:text-[#D4AF37] transition-colors flex items-center gap-1.5"><i class="fa-solid fa-spa text-[10px] text-[#D4AF37]"></i> Yoga & Infrared Recovery</a></li>
                    <li><a href="#programs" class="text-slate-400 hover:text-[#D4AF37] transition-colors flex items-center gap-1.5"><i class="fa-solid fa-apple-whole text-[10px] text-[#D4AF37]"></i> InBody Nutrition Plan</a></li>
                </ul>
            </div>

            <!-- Column 4: Reach Coach Aryan -->
            <div class="lg:col-span-3 space-y-3">
                <h4 class="text-white font-extrabold text-xs uppercase tracking-widest border-l-2 border-[#D4AF37] pl-2.5">
                    Direct Contact
                </h4>
                <div class="space-y-3 text-xs text-slate-300">
                    <div class="flex items-start gap-2.5">
                        <i class="fa-solid fa-phone text-[#D4AF37] mt-0.5"></i>
                        <div>
                            <span class="block text-[10px] text-slate-400 uppercase font-bold">Call Coach Aryan</span>
                            <a href="tel:7065007057" class="font-bold text-white hover:text-[#D4AF37] transition-colors">+91 7065007057</a>
                        </div>
                    </div>
                    <div class="flex items-start gap-2.5">
                        <i class="fa-brands fa-whatsapp text-emerald-400 text-sm mt-0.5"></i>
                        <div>
                            <span class="block text-[10px] text-slate-400 uppercase font-bold">WhatsApp Direct</span>
                            <a href="https://wa.me/917065007057" target="_blank" class="font-bold text-emerald-400 hover:underline">Chat on WhatsApp</a>
                        </div>
                    </div>
                    <div class="flex items-start gap-2.5">
                        <i class="fa-solid fa-clock text-sky-400 mt-0.5"></i>
                        <div>
                            <span class="block text-[10px] text-slate-400 uppercase font-bold">Hours of Operation</span>
                            <span class="text-slate-200">Mon - Sat: 5:00 AM - 11:00 PM</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Sub-Footer Bar -->
        <div class="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-400">
            <div class="flex flex-wrap items-center justify-center sm:justify-start gap-2 text-center sm:text-left">
                <span>Healx Premium Fitness © 2026. All rights reserved.</span>
                <span class="hidden sm:inline">•</span>
                <span>Direct Contact: <strong class="text-white font-bold">7065007057</strong></span>
            </div>

            <div class="flex items-center gap-4">
                <a href="tel:7065007057" class="hover:text-[#D4AF37] transition-colors flex items-center gap-1 font-bold">
                    <i class="fa-solid fa-phone text-[#D4AF37]"></i> Call
                </a>
                <a href="https://wa.me/917065007057" target="_blank" class="hover:text-emerald-400 transition-colors flex items-center gap-1 font-bold">
                    <i class="fa-brands fa-whatsapp text-emerald-400"></i> WhatsApp
                </a>
                <button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="w-9 h-9 rounded-full bg-slate-900 hover:bg-[#D4AF37] hover:text-slate-950 text-white flex items-center justify-center transition-all shadow-xs ml-2 cursor-pointer" title="Back to Top">
                    <i class="fa-solid fa-arrow-up text-xs"></i>
                </button>
            </div>
        </div>
    </div>
</footer>
