<nav class="bg-white dark:bg-black shadow-sm dark:shadow-gray-900 sticky top-0 z-50 transition-colors duration-300">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <a href="/" class="text-2xl font-bold gradient-text"><%= t('nav.brand') %></a>
            </div>

            <!-- Desktop Menu -->
            <div class="hidden md:flex items-center space-x-8">
                <% menuItems.forEach(item=> { %>
                    <a href="<%= item.path %>"
                        class="<%= path === item.path ? 'text-blue-600 font-semibold' : 'text-gray-600 hover:text-blue-500' %> transition-colors">
                        <%= menuLabel(item) %>
                    </a>
                    <% }) %>
                        <% if (user) { %>
                            <a href="/admin/dashboard"
                                class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"><%= t('nav.dashboard') %></a>
                            <% } else { %>
                                <a href="/admin/login" class="text-gray-600 hover:text-blue-500"><i
                                        class="fas fa-user-lock"></i></a>
                                <% } %>

                                    <button id="theme-toggle"
                                        class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">
                                        <i class="fas fa-moon dark:hidden"></i>
                                        <i class="fas fa-sun hidden dark:block"></i>
                                    </button>
                                    <div class="flex items-center gap-2 text-sm font-bold">
                                        <a href="<%= langUrl('en') %>"
                                            class="<%= lang === 'en' ? 'text-blue-600' : 'text-gray-500 dark:text-gray-400' %> hover:text-blue-500 transition-colors">EN</a>
                                        <span class="text-gray-300 dark:text-gray-600">|</span>
                                        <a href="<%= langUrl('ne') %>"
                                            class="<%= lang === 'ne' ? 'text-blue-600' : 'text-gray-500 dark:text-gray-400' %> hover:text-blue-500 transition-colors">ने</a>
                                    </div>
            </div>

            <!-- Mobile menu button -->
            <div class="md:hidden flex items-center gap-4">
                <button id="theme-toggle-mobile-header"
                    class="text-gray-600 dark:text-gray-300 hover:text-blue-500 transition-colors">
                    <i class="fas fa-moon dark:hidden text-xl"></i>
                    <i class="fas fa-sun hidden dark:block text-xl"></i>
                </button>
                <button type="button" onclick="toggleMobileMenu()"
                    class="text-gray-600 hover:text-blue-500 focus:outline-none">
                    <i class="fas fa-bars text-2xl" id="menu-icon"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile Menu -->
    <div id="mobile-menu"
        class="hidden md:hidden bg-white dark:bg-black border-t border-gray-100 dark:border-gray-900 py-4 px-4 space-y-4 transition-colors duration-300">
        <% menuItems.forEach(item=> { %>
            <a href="<%= item.path %>"
                class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 <%= path === item.path ? 'text-blue-600 font-semibold' : '' %>">
                <%= menuLabel(item) %>
            </a>
            <% }) %>
                <div class="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-gray-800">
                    <% if (user) { %>
                        <a href="/admin/dashboard"
                            class="bg-blue-600 text-white px-4 py-2 rounded-lg text-center flex-grow mr-4"><%= t('nav.dashboard') %></a>
                        <% } else { %>
                            <a href="/admin/login"
                                class="text-gray-600 dark:text-gray-400 hover:text-blue-500 font-medium">
                                <i class="fas fa-user-lock mr-2"></i> <%= t('nav.adminLogin') %>
                            </a>
                            <% } %>

                                <button id="theme-toggle-mobile"
                                    class="text-gray-600 dark:text-gray-400 hover:text-blue-500 p-2">
                                    <i class="fas fa-moon dark:hidden"></i>
                                    <i class="fas fa-sun hidden dark:block"></i>
                                </button>
                </div>
                <div class="flex items-center justify-center gap-3 pt-3">
                    <a href="<%= langUrl('en') %>"
                        class="<%= lang === 'en' ? 'text-blue-600' : 'text-gray-500 dark:text-gray-400' %> font-bold hover:text-blue-500 transition-colors">EN</a>
                    <span class="text-gray-300 dark:text-gray-600">|</span>
                    <a href="<%= langUrl('ne') %>"
                        class="<%= lang === 'ne' ? 'text-blue-600' : 'text-gray-500 dark:text-gray-400' %> font-bold hover:text-blue-500 transition-colors">ने</a>
                </div>
    </div>
</nav>

<script>
    function toggleMobileMenu() {
        const menu = document.getElementById('mobile-menu');
        const icon = document.getElementById('menu-icon');
        menu.classList.toggle('hidden');
        if (menu.classList.contains('hidden')) {
            icon.classList.remove('fa-times');
            icon.classList.add('fa-bars');
        } else {
            icon.classList.remove('fa-bars');
            icon.classList.add('fa-times');
        }
    }
</script>
