---
// Clean public header matching the minimalist design
export interface Props {
  showCalendarNav?: boolean;
}

const { showCalendarNav = false } = Astro.props;
---

<header class="absolute top-0 left-0 right-0 z-10 backdrop-blur-xl" style="background: var(--glass-bg); border-bottom: 1px solid var(--glass-border);">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20">
      <!-- Logo and Branding -->
      <div class="flex items-center space-x-8">
        <a href="/" class="flex items-center space-x-2">
          <img src="/images/logo.png" alt="Black Canyon Tickets" class="h-8 drop-shadow-lg" style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));" />
          <span class="text-xl font-light" style="color: var(--glass-text-primary);">
            <span class="font-bold">Black Canyon</span> Tickets
          </span>
        </a>

        <!-- Clean Navigation -->
        {showCalendarNav && (
          <nav class="hidden md:flex items-center space-x-6">
            <a href="/calendar" class="text-sm font-medium transition-all duration-200 hover:scale-105" style="color: var(--glass-text-primary);">
              All Events
            </a>
            <a href="/calendar?featured=true" class="text-sm font-medium transition-all duration-200 hover:scale-105" style="color: var(--glass-text-secondary);">
              Featured
            </a>
            <a href="/calendar?category=music" class="text-sm font-medium transition-all duration-200 hover:scale-105" style="color: var(--glass-text-secondary);">
              Music
            </a>
            <a href="/calendar?category=arts" class="text-sm font-medium transition-all duration-200 hover:scale-105" style="color: var(--glass-text-secondary);">
              Arts
            </a>
            <a href="/calendar?category=community" class="text-sm font-medium transition-all duration-200 hover:scale-105" style="color: var(--glass-text-secondary);">
              Community
            </a>
          </nav>
        )}
      </div>

      <!-- Right side actions -->
      <div class="flex items-center space-x-4">
        <!-- Mobile menu button -->
        {showCalendarNav && (
          <button 
            class="md:hidden p-2 rounded-md transition-all duration-200" 
            style="color: var(--glass-text-secondary); background: var(--glass-bg-button);" 
            onclick="toggleMobileMenu()"
          >
            <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"></path>
            </svg>
          </button>
        )}

        <!-- Clean Action buttons -->
        <a href="/login" class="text-sm font-medium transition-colors duration-200" style="color: var(--glass-text-secondary);">
          Login
        </a>
        <a href="/login" class="backdrop-blur-lg px-6 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200" style="background: var(--glass-bg-button); color: var(--glass-text-primary); border: 1px solid var(--glass-border);">
          Create Events
        </a>
      </div>
    </div>

    <!-- Clean Mobile Navigation -->
    {showCalendarNav && (
      <div id="mobile-menu" class="hidden md:hidden py-4" style="border-top: 1px solid var(--glass-border);">
        <div class="grid grid-cols-1 gap-3">
          <a href="/calendar" class="px-4 py-3 font-medium transition-all duration-200" style="color: var(--glass-text-primary);">
            All Events
          </a>
          <a href="/calendar?featured=true" class="px-4 py-3 font-medium transition-all duration-200" style="color: var(--glass-text-secondary);">
            Featured Events
          </a>
          <a href="/calendar?category=music" class="px-4 py-3 font-medium transition-all duration-200" style="color: var(--glass-text-secondary);">
            Music
          </a>
          <a href="/calendar?category=arts" class="px-4 py-3 font-medium transition-all duration-200" style="color: var(--glass-text-secondary);">
            Arts
          </a>
          <a href="/calendar?category=community" class="px-4 py-3 font-medium transition-all duration-200" style="color: var(--glass-text-secondary);">
            Community
          </a>
        </div>
        
        <!-- Mobile Login -->
        <div class="mt-4 pt-4" style="border-top: 1px solid var(--glass-border);">
          <a href="/login" class="block text-center px-4 py-3 font-medium transition-all duration-200" style="color: var(--glass-text-secondary);">
            Organizer Login
          </a>
        </div>
      </div>
    )}
  </div>
</header>

<script>
  function toggleMobileMenu() {
    const menu = document.getElementById('mobile-menu');
    if (menu) {
      menu.classList.toggle('hidden');
    }
  }
</script>