<nav id="main-nav" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
    <div class="nav-inner max-w-6xl mx-auto px-4 md:px-6 h-14 flex items-center justify-between">
        <a href="/" class="flex items-center gap-2 text-white font-semibold">
            <img src="/static/logo.svg" alt="ReadySite" width="24" height="24">
            <span>ReadySite</span>
        </a>
        <!-- Desktop links -->
        <div class="hidden md:flex items-center gap-2">
            {{if auth.IsAuthenticated}}
            <a href="/sites" class="px-4 py-2 text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">Dashboard</a>
            <a href="/billing" class="px-4 py-2 text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">Billing</a>
            <a href="/settings" class="px-4 py-2 text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">Account</a>
            <div class="dropdown dropdown-end ml-1">
                <div tabindex="0" role="button" class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium cursor-pointer" style="background: rgba(139,92,246,0.2); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3);">
                    {{upper (slice auth.CurrentUser.Email 0 1)}}
                </div>
                <ul tabindex="0" class="dropdown-content menu bg-[#1a1a1a] border border-white/10 rounded-lg z-[1] w-48 p-1 shadow-xl mt-2">
                    <li>
                        <form method="POST" action="/auth/signout">
                            <button type="submit" class="text-sm text-[#ccc] hover:text-white">Sign out</button>
                        </form>
                    </li>
                </ul>
            </div>
            {{else}}
            <a href="/about" class="px-4 py-2 text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">About</a>
            <a href="/pricing" class="px-4 py-2 text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">Pricing</a>
            <a href="/signin" class="px-4 py-2 text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">Sign in</a>
            <a href="/signup" class="px-4 py-2 bg-white text-black font-medium rounded-lg hover:bg-[#e5e5e5] transition-colors text-sm">Get Started</a>
            {{end}}
        </div>
        <!-- Mobile hamburger -->
        <button id="nav-toggle" class="md:hidden p-2 text-white/70 hover:text-white transition-colors" aria-label="Menu">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path id="nav-icon-open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                <path id="nav-icon-close" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>
    <!-- Mobile drawer -->
    <div id="nav-drawer" class="hidden md:hidden border-t border-white/10">
        <div class="max-w-6xl mx-auto px-6 py-4 flex flex-col gap-2">
            {{if auth.IsAuthenticated}}
            <a href="/sites" class="px-4 py-3 text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">Dashboard</a>
            <a href="/billing" class="px-4 py-3 text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">Billing</a>
            <a href="/settings" class="px-4 py-3 text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">Account</a>
            <form method="POST" action="/auth/signout" class="mt-1 pt-2 border-t border-white/5">
                <button type="submit" class="w-full px-4 py-3 text-left text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">Sign out</button>
            </form>
            {{else}}
            <a href="/about" class="px-4 py-3 text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">About</a>
            <a href="/pricing" class="px-4 py-3 text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">Pricing</a>
            <a href="/signin" class="px-4 py-3 text-[#888] hover:text-white hover:bg-white/10 rounded-lg transition-colors text-sm">Sign in</a>
            <a href="/signup" class="px-4 py-3 bg-white text-black font-medium rounded-lg hover:bg-[#e5e5e5] transition-colors text-sm text-center">Get Started</a>
            {{end}}
        </div>
    </div>
</nav>
<script>
(function () {
    var nav = document.getElementById('main-nav');
    var toggle = document.getElementById('nav-toggle');
    var drawer = document.getElementById('nav-drawer');
    var iconOpen = document.getElementById('nav-icon-open');
    var iconClose = document.getElementById('nav-icon-close');
    if (!nav) return;

    function updateNav() {
        if (window.scrollY > 60) {
            nav.classList.add('nav-solid');
        } else {
            nav.classList.remove('nav-solid');
        }
    }
    window.addEventListener('scroll', updateNav, { passive: true });
    updateNav();

    if (toggle && drawer) {
        toggle.addEventListener('click', function () {
            var isHidden = drawer.classList.contains('hidden');
            drawer.classList.toggle('hidden');
            nav.classList.toggle('nav-open', isHidden);
            iconOpen.classList.toggle('hidden', isHidden);
            iconClose.classList.toggle('hidden', !isHidden);
        });
    }
})();
</script>