---
// 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 bg-transparent">
  <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">
          <span class="text-xl font-light text-white">
            <span class="font-bold">Black Canyon</span> Tickets
          </span>
        </a>

        <!-- Clean Navigation -->
        {showCalendarNav && (
          <nav class="hidden md:flex items-center space-x-1">
            <div class="flex items-center space-x-1 bg-slate-50 rounded-xl p-1">
              <a href="/calendar" class="px-4 py-2 text-slate-600 hover:text-slate-900 hover:bg-white rounded-lg font-medium transition-all duration-200 hover:shadow-sm">
                All Events
              </a>
              <a href="/calendar?featured=true" class="px-4 py-2 text-slate-600 hover:text-slate-900 hover:bg-white rounded-lg font-medium transition-all duration-200 hover:shadow-sm">
                Featured
              </a>
              <a href="/calendar?category=music" class="px-4 py-2 text-slate-600 hover:text-slate-900 hover:bg-white rounded-lg font-medium transition-all duration-200 hover:shadow-sm">
                Music
              </a>
              <a href="/calendar?category=arts" class="px-4 py-2 text-slate-600 hover:text-slate-900 hover:bg-white rounded-lg font-medium transition-all duration-200 hover:shadow-sm">
                Arts
              </a>
              <a href="/calendar?category=community" class="px-4 py-2 text-slate-600 hover:text-slate-900 hover:bg-white rounded-lg font-medium transition-all duration-200 hover:shadow-sm">
                Community
              </a>
            </div>
          </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 text-white/80 hover:text-white hover:bg-white/10 transition-all duration-200" 
            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="/" class="text-white/80 hover:text-white text-sm font-medium transition-colors duration-200">
          Login
        </a>
        <a href="https://blackcanyontickets.com/get-started" class="bg-white/10 backdrop-blur-lg hover:bg-white/20 text-white px-6 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 border border-white/20">
          Create Events
        </a>
      </div>
    </div>

    <!-- Clean Mobile Navigation -->
    {showCalendarNav && (
      <div id="mobile-menu" class="hidden md:hidden border-t border-slate-200 py-4">
        <div class="grid grid-cols-1 gap-2">
          <a href="/calendar" class="px-4 py-3 text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg font-medium transition-all duration-200">
            All Events
          </a>
          <a href="/calendar?featured=true" class="px-4 py-3 text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg font-medium transition-all duration-200">
            Featured Events
          </a>
          <a href="/calendar?category=music" class="px-4 py-3 text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg font-medium transition-all duration-200">
            Music
          </a>
          <a href="/calendar?category=arts" class="px-4 py-3 text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg font-medium transition-all duration-200">
            Arts
          </a>
          <a href="/calendar?category=community" class="px-4 py-3 text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg font-medium transition-all duration-200">
            Community
          </a>
        </div>
        
        <!-- Mobile Login -->
        <div class="mt-4 pt-4 border-t border-slate-200">
          <a href="/" class="block text-center px-4 py-3 text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg font-medium transition-all duration-200">
            Organizer Login
          </a>
        </div>
      </div>
    )}
  </div>
</header>

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