<template>
  <nav class="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
    <UContainer>
      <div class="flex items-center justify-between py-4">
        <!-- Logo/Brand -->
        <NuxtLink to="/" class="flex items-center gap-2">
          <div class="w-8 h-8 bg-emerald-500 rounded-full flex items-center justify-center">
            <div class="w-4 h-4 bg-white rounded-sm" />
          </div>
          <div class="w-6 h-6 bg-emerald-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
          <span class="text-xl font-bold text-gray-900 dark:text-white ml-2">Ghost Guild</span>
        </NuxtLink>
        
        <!-- Desktop Navigation -->
        <div class="hidden md:flex items-center gap-8">
          <NuxtLink 
            v-for="item in navigationItems" 
            :key="item.path"
            :to="item.path"
            class="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors font-medium"
            active-class="text-emerald-600 dark:text-emerald-400"
          >
            {{ item.label }}
          </NuxtLink>
          <UButton 
            to="/login"
            variant="outline"
            size="sm"
            class="ml-4"
          >
            Login
          </UButton>
        </div>
        
        <!-- Mobile Menu Button -->
        <button 
          class="md:hidden p-2"
          @click="toggleMobileMenu"
          aria-label="Toggle menu"
        >
          <div class="space-y-1">
            <div class="h-0.5 w-6 bg-gray-600 dark:bg-gray-300 transition-all" :class="{ 'rotate-45 translate-y-1.5': mobileMenuOpen }" />
            <div class="h-0.5 w-6 bg-gray-600 dark:bg-gray-300 transition-all" :class="{ 'opacity-0': mobileMenuOpen }" />
            <div class="h-0.5 w-6 bg-gray-600 dark:bg-gray-300 transition-all" :class="{ '-rotate-45 -translate-y-1.5': mobileMenuOpen }" />
          </div>
        </button>
      </div>
      
      <!-- Mobile Navigation -->
      <div 
        v-if="mobileMenuOpen"
        class="md:hidden py-4 border-t border-gray-200 dark:border-gray-700"
      >
        <div class="flex flex-col space-y-3">
          <NuxtLink 
            v-for="item in navigationItems" 
            :key="item.path"
            :to="item.path"
            class="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors font-medium py-2"
            active-class="text-emerald-600 dark:text-emerald-400"
            @click="mobileMenuOpen = false"
          >
            {{ item.label }}
          </NuxtLink>
          <UButton 
            to="/login"
            variant="outline"
            size="sm"
            class="mt-4 w-fit"
            @click="mobileMenuOpen = false"
          >
            Login
          </UButton>
        </div>
      </div>
    </UContainer>
  </nav>
</template>

<script setup>
import { ref } from 'vue'

const mobileMenuOpen = ref(false)

const navigationItems = [
  { label: 'Home', path: '/' },
  { label: 'About', path: '/about' },
  { label: 'Events', path: '/events' },
  { label: 'Members', path: '/members' },
  { label: 'Join', path: '/join' },
  { label: 'Contact', path: '/contact' },
]

const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
}

// Close mobile menu when clicking outside
const closeMobileMenu = () => {
  mobileMenuOpen.value = false
}
</script>