<!-- Top Announcement Bar -->
<div class="bg-slate-900 text-slate-200 text-xs py-2 px-4 text-center relative z-50 border-b border-slate-800">
    <div class="max-w-7xl mx-auto flex flex-wrap items-center justify-center gap-2">
        <span class="px-2.5 py-0.5 rounded-full text-[10px] font-extrabold bg-[#D4AF37] text-slate-950 uppercase tracking-wider animate-pulse">
            <i class="fa-solid fa-bolt mr-1"></i> VIP OFFER
        </span>
        <span>Claim your <strong>FREE 7-Day VIP Pass</strong> + Assessment with <strong>Coach Aryan</strong>!</span>
        <a href="https://wa.me/917065007057?text=Hi%20Aryan,%20I'd%20like%20to%20claim%20my%20Free%207-Day%20VIP%20Pass!" target="_blank" class="text-[#D4AF37] hover:underline font-bold ml-1 transition-colors">
            WhatsApp (7065007057) →
        </a>
    </div>
</div>

<!-- Sticky Header Navbar -->
<header class="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-slate-200 shadow-xs h-20 flex items-center">
    <div class="max-w-7xl mx-auto  px-4 sm:px-6 lg:px-8 w-full flex items-center justify-between">
        
        <!-- Metallic Silver "HEAL" & Gold "X" Logo Header -->
        <a href="#" class="flex items-center gap-2 group">
            <img src="/images/logo.png" alt="Healx Logo" class="h-10 sm: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-slate-800\'>HEAL</span><span class=\'text-gold-gradient\'>X</span></div>';};">
        </a>

        <!-- Desktop Navigation Links (No Calculator) -->
        <nav class="hidden lg:flex items-center gap-7 text-xs font-extrabold uppercase tracking-wider text-slate-700">
            <a href="#home" class="hover:text-[#D4AF37] transition-colors relative py-1">Home</a>
            <a href="#about" class="hover:text-[#D4AF37] transition-colors relative py-1">About Us</a>
            <a href="#programs" class="hover:text-[#D4AF37] transition-colors relative py-1">Programs</a>
            <a href="#trainers" class="hover:text-[#D4AF37] transition-colors relative py-1">Team</a>
            <a href="#pricing" class="hover:text-[#D4AF37] transition-colors relative py-1">Pricing</a>
            <a href="#contact" class="hover:text-[#D4AF37] transition-colors relative py-1">Contact Us</a>
        </nav>

        <!-- CTA Action Buttons -->
        <div class="hidden sm:flex items-center gap-3">
            <a href="tel:7065007057" class="flex items-center gap-1.5 text-xs font-bold text-slate-800 hover:text-[#D4AF37] transition-colors py-2 px-3.5 rounded-full border border-slate-200 bg-slate-50 hover:bg-slate-100">
                <i class="fa-solid fa-phone text-[#D4AF37]"></i>
                <span>7065007057</span>
            </a>
            <button onclick="openVipModal('Claim 7-Day VIP Pass')" class="bg-gold-gradient text-slate-950 font-black text-xs uppercase tracking-wider px-5 py-2.5 rounded-full shadow-md hover:scale-105 active:scale-95 transition-all cursor-pointer">
                Claim 7-Day VIP Pass
            </button>
        </div>

        <!-- Mobile Menu Toggle Button -->
        <button onclick="toggleMobileMenu()" class="lg:hidden p-2 rounded-xl border border-slate-200 text-slate-800 hover:bg-slate-100 focus:outline-none" aria-label="Toggle menu">
            <i class="fa-solid fa-bars text-lg" id="menuIcon"></i>
        </button>
    </div>

    <!-- Mobile Drawer Menu -->
    <div id="mobileMenu" class="hidden lg:hidden bg-white border-b border-slate-200 px-6 py-5 transition-all shadow-xl absolute top-20 left-0 right-0 z-50">
        <div class="flex flex-col gap-3.5 text-xs font-bold uppercase tracking-wider text-slate-800">
            <a href="#home" onclick="toggleMobileMenu()" class="hover:text-[#D4AF37]">Home</a>
            <a href="#about" onclick="toggleMobileMenu()" class="hover:text-[#D4AF37]">About Us</a>
            <a href="#programs" onclick="toggleMobileMenu()" class="hover:text-[#D4AF37]">Programs & Schedule</a>
            <a href="#trainers" onclick="toggleMobileMenu()" class="hover:text-[#D4AF37]">Team (Trainers)</a>
            <a href="#pricing" onclick="toggleMobileMenu()" class="hover:text-[#D4AF37]">Membership Pricing</a>
            <a href="#contact" onclick="toggleMobileMenu()" class="hover:text-[#D4AF37]">Contact Us</a>
            <div class="pt-3 border-t border-slate-200 flex flex-col gap-2">
                <a href="tel:7065007057" class="flex items-center justify-center gap-2 py-2.5 rounded-full border border-slate-200 text-slate-900 font-bold bg-slate-50 text-xs">
                    <i class="fa-solid fa-phone text-[#D4AF37]"></i> Call Coach Aryan: 7065007057
                </a>
                <button onclick="toggleMobileMenu(); openVipModal();" class="w-full bg-gold-gradient text-slate-950 font-black py-3 rounded-full text-center text-xs shadow-md uppercase tracking-wider">
                    Claim 7-Day VIP Pass
                </button>
            </div>
        </div>
    </div>
</header>
