---
export interface Props {
  title?: string;
  showBackLink?: boolean;
  backLinkUrl?: string;
  backLinkText?: string;
}

const { 
  title = "Dashboard", 
  showBackLink = false, 
  backLinkUrl = "/dashboard", 
  backLinkText = "← Back" 
} = Astro.props;

// Determine if we should show theme toggle based on auth context
// Hide theme toggle on forced dark mode pages
const forceDarkModePages = ['/', '/login', '/calendar-enhanced'];
const isAuthPage = Astro.url.pathname.includes('/dashboard') || 
                   Astro.url.pathname.includes('/events') || 
                   Astro.url.pathname.includes('/scan') ||
                   Astro.url.pathname.includes('/admin') ||
                   (Astro.url.pathname.includes('/calendar') && !forceDarkModePages.includes(Astro.url.pathname)) ||
                   Astro.url.pathname.includes('/templates') ||
                   Astro.url.pathname.includes('/custom-pricing');

// Check if current page should have theme toggle hidden
const shouldHideThemeToggle = forceDarkModePages.includes(Astro.url.pathname);

import ThemeToggle from './ThemeToggle.tsx';
---

<!-- White Navigation Bar - Consistent across all pages -->
<nav id="main-nav" class="sticky top-0 z-50 transition-all duration-300 border-b bg-white shadow-sm" 
     style="border-color: rgba(0, 0, 0, 0.1);">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20 transition-all duration-300" id="nav-content">
      <div class="flex items-center space-x-8">
        <!-- Brand -->
        <a href="/dashboard" class="flex items-center space-x-3 group">
          <div class="w-8 h-8 rounded-lg flex items-center justify-center shadow-lg hover:rotate-3 hover:scale-110 transition-all duration-300 bg-blue-600 text-white">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
            </svg>
          </div>
          <div class="hidden sm:block">
            <span class="text-xl font-semibold transition-colors duration-200 group-hover:opacity-80 text-gray-900">BCT</span>
          </div>
        </a>
        
        <!-- Navigation Items -->
        <div class="hidden md:flex items-center space-x-6">
          {showBackLink && (
          <div class="flex items-center space-x-3">
            <a 
              href={backLinkUrl} 
              class="font-medium transition-colors duration-200 flex items-center space-x-1 hover:opacity-80 text-gray-700"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
              </svg>
              <span>{backLinkText.replace('← ', '')}</span>
            </a>
            <span class="text-gray-300">|</span>
          </div>
        )}
          <span class="font-semibold text-gray-900">{title}</span>
        </div>
      </div>
      <div class="flex items-center space-x-3">
        {isAuthPage && !shouldHideThemeToggle && (
          <div class="mr-1">
            <ThemeToggle client:load />
          </div>
        )}
        
        <!-- Mobile Menu Button -->
        <button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg transition-colors duration-200 hover:bg-gray-100 bg-gray-50 text-gray-700">
          <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="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
        
        <!-- Premium User Menu -->
        <div class="hidden md:flex items-center space-x-3">
          <div class="relative">
            <button
              id="user-menu-btn"
              class="flex items-center space-x-3 p-2 rounded-xl transition-all duration-200 group hover:bg-gray-50 bg-gray-50"
            >
              <div id="user-avatar" class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold shadow-lg group-hover:shadow-xl transition-all duration-200 ring-1 bg-blue-600 text-white border-blue-700"
                   data-theme-aware="true">
                T
              </div>
              <div class="flex items-center space-x-2">
                <div class="flex flex-col items-start">
                  <span id="user-name-text" class="text-sm font-semibold text-gray-900"></span>
                  <span id="admin-badge" class="hidden text-xs font-medium text-blue-600">Admin</span>
                </div>
                <svg class="w-4 h-4 transition-colors text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
              </div>
            </button>
            
            <!-- Premium Dropdown Menu -->
            <div id="user-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-2xl shadow-xl py-2 z-50 transform opacity-0 scale-95 transition-all duration-200 border border-gray-200">
              <div class="px-4 py-3 border-b border-gray-200">
                <div class="flex items-center space-x-3">
                  <div id="dropdown-avatar" class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold ring-1 transition-all duration-200 bg-blue-600 text-white border-blue-700"
                       data-theme-aware="true">
                    T
                  </div>
                  <div>
                    <p id="dropdown-name" class="text-sm font-semibold text-gray-900"></p>
                    <p id="dropdown-email" class="text-xs text-gray-600"></p>
                  </div>
                </div>
              </div>
              
              <div class="py-2">
                <a href="/dashboard" class="flex items-center px-4 py-2 text-sm transition-colors hover:bg-gray-50 text-gray-900">
                  <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2 2z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3a2 2 0 012-2h4a2 2 0 012 2v4" />
                  </svg>
                  Dashboard
                </a>
                
                <a href="/events/new" class="flex items-center px-4 py-2 text-sm transition-colors hover:bg-gray-50 text-gray-900">
                  <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                  Create Event
                </a>
                
                <a href="/calendar" class="flex items-center px-4 py-2 text-sm transition-colors hover:bg-gray-50 text-gray-900">
                  <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                  Calendar
                </a>
                
                <a href="/scan" class="flex items-center px-4 py-2 text-sm transition-colors hover:bg-gray-50 text-gray-900">
                  <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
                  </svg>
                  QR Scanner
                </a>
                
                <a href="/templates" class="flex items-center px-4 py-2 text-sm transition-colors hover:bg-gray-50 text-gray-900">
                  <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
                  </svg>
                  Page Templates
                </a>
                
                <div id="admin-menu-item" class="hidden">
                  <a href="/custom-pricing" class="flex items-center px-4 py-2 text-sm transition-colors hover:bg-gray-50 text-gray-900">
                    <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                    </svg>
                    Custom Pricing
                  </a>
                  
                  <a href="/admin/dashboard" class="flex items-center px-4 py-2 text-sm transition-colors hover:bg-gray-50 text-gray-900">
                    <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                    Admin Dashboard
                  </a>
                </div>
              </div>
              
              <div class="border-t pt-2 border-gray-200">
                <button
                  id="logout-btn"
                  class="flex items-center w-full px-4 py-2 text-sm transition-colors hover:bg-red-50 text-red-600"
                >
                  <svg class="w-4 h-4 mr-3 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                  </svg>
                  Sign Out
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Premium Mobile Menu Drawer -->
  <div id="mobile-menu" class="hidden md:hidden bg-white border-b shadow-lg border-gray-200">
    <div class="max-w-7xl mx-auto px-4 py-4 space-y-4">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center space-x-3">
          <div id="mobile-user-avatar" class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold shadow-lg ring-1 transition-all duration-200 bg-blue-600 text-white border-blue-700"
               data-theme-aware="true">
            T
          </div>
          <div>
            <p id="mobile-user-name-text" class="text-sm font-semibold text-gray-900"></p>
            <span id="mobile-admin-badge" class="hidden text-xs font-medium text-blue-600">Admin</span>
          </div>
        </div>
      </div>
      
      <div class="space-y-2">
        <a href="/dashboard" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors hover:bg-gray-50 text-gray-900 bg-gray-50">
          <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2 2z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3a2 2 0 012-2h4a2 2 0 012 2v4" />
          </svg>
          Dashboard
        </a>
        
        <a href="/events/new" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors hover:bg-gray-50 text-gray-900 bg-gray-50">
          <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          Create Event
        </a>
        
        <a href="/calendar" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors hover:bg-gray-50 text-gray-900 bg-gray-50">
          <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
          Calendar
        </a>
        
        <a href="/scan" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors hover:bg-gray-50 text-gray-900 bg-gray-50">
          <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
          </svg>
          QR Scanner
        </a>
        
        <a href="/templates" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors hover:bg-gray-50 text-gray-900 bg-gray-50">
          <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
          </svg>
          Page Templates
        </a>
        
        <div id="mobile-admin-menu-item" class="hidden">
          <a href="/custom-pricing" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors hover:bg-gray-50 text-gray-900 bg-gray-50">
            <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
            </svg>
            Custom Pricing
          </a>
          
          <a href="/admin/dashboard" class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors hover:bg-gray-50 text-gray-900 bg-gray-50">
            <svg class="w-4 h-4 mr-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
            Admin Dashboard
          </a>
        </div>
      </div>
      
      <div class="border-t pt-3 border-gray-200">
        <button
          id="mobile-logout-btn"
          class="flex items-center w-full px-3 py-2 text-sm rounded-lg transition-colors hover:bg-red-50 text-red-600 bg-gray-50"
        >
          <svg class="w-4 h-4 mr-3 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
          </svg>
          Sign Out
        </button>
      </div>
    </div>
  </div>
</nav>

<script>
  import { supabase } from '../lib/supabase';

  // Initialize navigation functionality
  const userNameText = document.getElementById('user-name-text');
  const mobileUserNameText = document.getElementById('mobile-user-name-text');
  const userAvatar = document.getElementById('user-avatar');
  const mobileUserAvatar = document.getElementById('mobile-user-avatar');
  const dropdownAvatar = document.getElementById('dropdown-avatar');
  const dropdownName = document.getElementById('dropdown-name');
  const dropdownEmail = document.getElementById('dropdown-email');
  const logoutBtn = document.getElementById('logout-btn');
  const mobileLogoutBtn = document.getElementById('mobile-logout-btn');
  const adminBadge = document.getElementById('admin-badge');
  const mobileAdminBadge = document.getElementById('mobile-admin-badge');
  const adminMenuItem = document.getElementById('admin-menu-item');
  const mobileAdminMenuItem = document.getElementById('mobile-admin-menu-item');
  const mobileMenuBtn = document.getElementById('mobile-menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  const userMenuBtn = document.getElementById('user-menu-btn');
  const userDropdown = document.getElementById('user-dropdown');

  // Check authentication and load user info
  async function initializeNavigation() {
    let user = null;
    
    // Try to get session first
    const { data: { session }, error: sessionError } = await supabase.auth.getSession();
    
    if (!sessionError && session) {
      // Session exists, use session user
      user = session.user;
    } else {
      // Try to get user directly (handles token refresh internally)
      const { data: { user: directUser }, error: userError } = await supabase.auth.getUser();
      
      if (!userError && directUser) {
        user = directUser;
      }
    }
    
    // If we still don't have a user from Supabase, try server-side API
    if (!user) {
      console.log('[NAV] No user from Supabase client, trying server-side auth...');
      try {
        const response = await fetch('/api/auth/user');
        if (response.ok) {
          const userData = await response.json();
          console.log('[NAV] Got user data from server API:', userData);
          
          if (userData.user && userData.profile) {
            // Update UI with server data
            const userName = userData.user.user_metadata?.name || userData.user.email;
            const userEmail = userData.user.email;
            
            // Update all name displays
            if (userNameText) userNameText.textContent = userName;
            if (mobileUserNameText) mobileUserNameText.textContent = userName;
            if (dropdownName) dropdownName.textContent = userName;
            if (dropdownEmail) dropdownEmail.textContent = userEmail;
            
            // Generate user initials
            const initials = userName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
            if (userAvatar) userAvatar.textContent = initials;
            if (mobileUserAvatar) mobileUserAvatar.textContent = initials;
            if (dropdownAvatar) dropdownAvatar.textContent = initials;
            
            // Check if user is admin via server data
            if (userData.profile.role === 'admin') {
              console.log('[NAV] User is admin via server API, showing admin menu items');
              if (adminBadge) adminBadge.classList.remove('hidden');
              if (mobileAdminBadge) mobileAdminBadge.classList.remove('hidden');
              if (adminMenuItem) adminMenuItem.classList.remove('hidden');
              if (mobileAdminMenuItem) mobileAdminMenuItem.classList.remove('hidden');
            }
            return;
          }
        }
      } catch (error) {
        console.error('[NAV] Error with server-side auth:', error);
      }
      
      console.log('[NAV] No user session found, user likely not authenticated');
      return;
    }
    
    // If we have a user from Supabase client, proceed with client-side logic
    if (user) {
      
      // Use the user data we got directly
      const userName = user.user_metadata.name || user.email;
      const userEmail = user.email;
      
      // Update all name displays
      if (userNameText) userNameText.textContent = userName;
      if (mobileUserNameText) mobileUserNameText.textContent = userName;
      if (dropdownName) dropdownName.textContent = userName;
      if (dropdownEmail) dropdownEmail.textContent = userEmail;
      
      // Generate user initials
      const initials = userName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
      if (userAvatar) userAvatar.textContent = initials;
      if (mobileUserAvatar) mobileUserAvatar.textContent = initials;
      if (dropdownAvatar) dropdownAvatar.textContent = initials;
      
      // Check if user is admin and show admin badge/menu items
      try {
        // First try client-side Supabase
        const { data: userProfile, error: profileError } = await supabase
          .from('users')
          .select('role')
          .eq('id', user.id)
          .single();
        
        console.log('[NAV] User profile lookup:', { userProfile, profileError });
        
        if (profileError) {
          // If client-side fails, try server-side API
          console.log('[NAV] Client-side profile lookup failed, trying server API...');
          const response = await fetch('/api/auth/user');
          if (response.ok) {
            const userData = await response.json();
            console.log('[NAV] Server user data:', userData);
            if (userData.profile?.role === 'admin') {
              console.log('[NAV] User is admin via server API, showing admin menu items');
              if (adminBadge) adminBadge.classList.remove('hidden');
              if (mobileAdminBadge) mobileAdminBadge.classList.remove('hidden');
              if (adminMenuItem) adminMenuItem.classList.remove('hidden');
              if (mobileAdminMenuItem) mobileAdminMenuItem.classList.remove('hidden');
            }
          }
        } else if (userProfile?.role === 'admin') {
          console.log('[NAV] User is admin, showing admin menu items');
          if (adminBadge) adminBadge.classList.remove('hidden');
          if (mobileAdminBadge) mobileAdminBadge.classList.remove('hidden');
          if (adminMenuItem) adminMenuItem.classList.remove('hidden');
          if (mobileAdminMenuItem) mobileAdminMenuItem.classList.remove('hidden');
        }
      } catch (error) {
        console.error('[NAV] Error checking admin status:', error);
      }
    }
  }

  // Logout functionality
  const handleLogout = async () => {
    await supabase.auth.signOut();
    window.location.href = '/';
  };
  
  logoutBtn?.addEventListener('click', handleLogout);
  mobileLogoutBtn?.addEventListener('click', handleLogout);
  
  // User dropdown toggle
  userMenuBtn?.addEventListener('click', (e) => {
    e.stopPropagation();
    if (userDropdown) {
      const isHidden = userDropdown.classList.contains('hidden');
      if (isHidden) {
        userDropdown.classList.remove('hidden');
        setTimeout(() => {
          userDropdown.classList.remove('opacity-0', 'scale-95');
          userDropdown.classList.add('opacity-100', 'scale-100');
        }, 10);
      } else {
        userDropdown.classList.add('opacity-0', 'scale-95');
        userDropdown.classList.remove('opacity-100', 'scale-100');
        setTimeout(() => {
          userDropdown.classList.add('hidden');
        }, 200);
      }
    }
  });

  // Close dropdown when clicking outside
  document.addEventListener('click', (e) => {
    if (userDropdown && !userDropdown.contains(e.target) && !userMenuBtn?.contains(e.target)) {
      userDropdown.classList.add('opacity-0', 'scale-95');
      userDropdown.classList.remove('opacity-100', 'scale-100');
      setTimeout(() => {
        userDropdown.classList.add('hidden');
      }, 200);
    }
  });

  // Mobile menu toggle
  mobileMenuBtn?.addEventListener('click', () => {
    if (mobileMenu) {
      mobileMenu.classList.toggle('hidden');
    }
  });

  // Initialize when the page loads
  initializeNavigation();

  // No need for theme change listeners since navbar is always white

  // Scroll-shrink behavior
  const nav = document.getElementById('main-nav');
  const navContent = document.getElementById('nav-content');
  
  function handleScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    if (scrollTop > 50) {
      nav?.classList.add('nav-shrunk');
      if (navContent) navContent.style.height = '60px';
    } else {
      nav?.classList.remove('nav-shrunk');
      if (navContent) navContent.style.height = '80px';
    }
  }
  
  window.addEventListener('scroll', handleScroll, { passive: true });
</script>