<template>
  <div class="min-h-screen bg-guild-900">
    <!-- Horizontal Navigation -->
    <nav class="w-full px-6 md:px-8 py-4">
      <div class="max-w-6xl mx-auto flex items-center justify-between">
        <!-- Logo/Wordmark -->
        <NuxtLink to="/" class="text-xl font-bold text-primary-400 tracking-wide">
          Ghost Guild
        </NuxtLink>

        <!-- Desktop Navigation Links -->
        <div class="hidden md:flex items-center gap-8">
          <NuxtLink
            to="/about"
            class="text-guild-300 hover:text-guild-100 transition-colors text-sm"
          >
            About
          </NuxtLink>
          <NuxtLink
            to="/events"
            class="text-guild-300 hover:text-guild-100 transition-colors text-sm"
          >
            Events
          </NuxtLink>
          <template v-if="isAuthenticated">
            <NuxtLink
              to="/member/dashboard"
              class="text-primary-400 hover:text-primary-300 transition-colors text-sm font-medium"
            >
              Dashboard
            </NuxtLink>
          </template>
          <template v-else>
            <button
              @click="openLoginModal"
              class="text-primary-400 hover:text-primary-300 transition-colors text-sm font-medium"
            >
              Sign In
            </button>
          </template>
        </div>

        <!-- Mobile Menu Button -->
        <UButton
          icon="i-lucide-menu"
          color="neutral"
          variant="ghost"
          size="md"
          class="md:hidden"
          @click="isMobileMenuOpen = true"
          aria-label="Open menu"
        />
      </div>
    </nav>

    <!-- Main Content -->
    <main>
      <slot />
    </main>

    <!-- Footer -->
    <footer class="border-t border-guild-800 py-8 px-6 md:px-8">
      <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
        <p class="text-guild-500 text-sm">
          &copy; {{ currentYear }} Ghost Guild
        </p>
        <a
          href="mailto:hello@ghostguild.org"
          class="text-guild-500 hover:text-guild-300 transition-colors text-sm"
        >
          hello@ghostguild.org
        </a>
      </div>
    </footer>

    <!-- Mobile Navigation Drawer -->
    <USlideover v-model:open="isMobileMenuOpen" side="right">
      <template #body>
        <div class="p-6 space-y-6">
          <NuxtLink
            to="/about"
            class="block text-guild-200 hover:text-guild-100 transition-colors text-lg"
            @click="isMobileMenuOpen = false"
          >
            About
          </NuxtLink>
          <NuxtLink
            to="/events"
            class="block text-guild-200 hover:text-guild-100 transition-colors text-lg"
            @click="isMobileMenuOpen = false"
          >
            Events
          </NuxtLink>
          <template v-if="isAuthenticated">
            <NuxtLink
              to="/member/dashboard"
              class="block text-primary-400 hover:text-primary-300 transition-colors text-lg font-medium"
              @click="isMobileMenuOpen = false"
            >
              Dashboard
            </NuxtLink>
          </template>
          <template v-else>
            <button
              @click="handleMobileSignIn"
              class="block text-primary-400 hover:text-primary-300 transition-colors text-lg font-medium"
            >
              Sign In
            </button>
          </template>
        </div>
      </template>
    </USlideover>

    <!-- Login Modal -->
    <LoginModal />
  </div>
</template>

<script setup>
const { isAuthenticated } = useAuth()
const { openLoginModal } = useLoginModal()

const isMobileMenuOpen = ref(false)
const currentYear = new Date().getFullYear()

const handleMobileSignIn = () => {
  isMobileMenuOpen.value = false
  openLoginModal()
}
</script>
