<nav class="fixed w-full z-50 transition-all duration-300 glass-nav">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-20">
            <div class="flex-shrink-0 flex items-center cursor-pointer">
                <a href="{{ url('/') }}">
                    <img src="{{ asset('assets/images/oneqr-logo.png') }}" alt="OneQRScan"
                        class="h-12 w-auto object-contain">
                </a>
            </div>

            <div class="hidden md:flex space-x-8 items-center">
                <a href="{{ url('/about-oneqrscan') }}"
                    class="text-slate-600 hover:text-accent font-medium text-sm ">About</a>
                <a href="{{ url('/buy-smart-qr-keychains-india') }}"
                    class="text-slate-600 hover:text-accent font-medium text-sm ">Products</a>
                <a href="{{ url('/how-smart-qr-tags-work') }}"
                    class="text-slate-600 hover:text-accent font-medium text-sm ">How it
                    Works</a>
                <a href="{{ url('/qr-tag-support-and-activation-help') }}"
                    class="text-slate-600 hover:text-accent font-medium text-sm ">Support</a>
                <a href="{{ url('/buy-smart-qr-keychains-india') }}"
                    class="bg-primary hover:bg-primary-light text-white px-6 py-2.5 rounded-full font-semibold shadow-lg transition-all transform hover:-translate-y-0.5">Shop
                    Now</a>
            </div>

            <div class="md:hidden flex items-center">
                <button id="mobile-menu-btn" class="text-slate-600 p-2">
                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>

<div id="drawer-overlay"
    class="fixed inset-0 bg-primary/40 backdrop-blur-sm z-[60] hidden opacity-0 transition-opacity duration-300"></div>
<div id="mobile-drawer"
    class="fixed top-0 right-0 h-full w-[280px] bg-white z-[70] transform translate-x-full transition-transform duration-300 ease-in-out shadow-2xl overflow-y-auto no-scrollbar">
    <div class="p-6 flex flex-col h-full">
        <div class="flex justify-between items-center mb-8">
            <img src="{{ asset('assets/images/oneqr-logo.png') }}" alt="OneQRScan" class="h-10 w-auto">
            <button id="close-drawer-btn" class="text-slate-400 p-2 bg-slate-50 rounded-full">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                    </path>
                </svg>
            </button>
        </div>
        <div class="flex flex-col space-y-6">
            <a href="{{ url('/about-oneqrscan') }}" class="mobile-link text-lg font-medium text-slate-700">About Us</a>
            <a href="{{ url('/buy-smart-qr-keychains-india') }}"
                class="mobile-link text-lg font-medium text-slate-700">Products</a>
            <a href="{{ url('/how-smart-qr-tags-work') }}" class="mobile-link text-lg font-medium text-slate-700">How
                it Works</a>
            <a href="{{ url('/qr-tag-support-and-activation-help') }}"
                class="mobile-link text-lg font-medium text-slate-700">Support</a>
        </div>
        <div class="mt-auto pt-8 border-t border-slate-100">
            <a href="{{ url('/buy-smart-qr-keychains-india') }}"
                class="w-full block text-center bg-primary text-white px-6 py-4 rounded-xl font-semibold">Shop Now</a>
        </div>
    </div>
</div>
