<template>
  <div class="landing">
    <!-- Horizontal Navigation -->
    <nav class="landing-nav">
      <div class="landing-nav-inner">
        <NuxtLink to="/" class="landing-brand">Ghost Guild</NuxtLink>
        <div class="landing-links">
          <NuxtLink to="/about">About</NuxtLink>
          <NuxtLink to="/events">Events</NuxtLink>
          <template v-if="isAuthenticated">
            <NuxtLink to="/member/dashboard" class="landing-cta">Dashboard</NuxtLink>
          </template>
          <template v-else>
            <button class="landing-cta" @click="openLoginModal">Sign In</button>
          </template>
        </div>
        <button class="btn landing-menu-btn" @click="isMobileMenuOpen = true">Menu</button>
      </div>
    </nav>

    <main>
      <slot />
    </main>

    <!-- Mobile Navigation Drawer -->
    <USlideover v-model:open="isMobileMenuOpen" side="right">
      <template #body>
        <div class="landing-mobile-nav">
          <NuxtLink to="/about" @click="isMobileMenuOpen = false">About</NuxtLink>
          <NuxtLink to="/events" @click="isMobileMenuOpen = false">Events</NuxtLink>
          <template v-if="isAuthenticated">
            <NuxtLink to="/member/dashboard" @click="isMobileMenuOpen = false">Dashboard</NuxtLink>
          </template>
          <template v-else>
            <button @click="handleMobileSignIn">Sign In</button>
          </template>
        </div>
      </template>
    </USlideover>

    <LoginModal />
  </div>
</template>

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

const isMobileMenuOpen = ref(false)

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

<style scoped>
.landing {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.landing-nav {
  border-bottom: 1px dashed var(--border);
  padding: 0 32px;
}

.landing-nav-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.landing-brand {
  font-family: 'Brygada 1918', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--candle);
  text-decoration: none;
}
.landing-brand:hover { text-decoration: none; }

.landing-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.landing-links a,
.landing-links button {
  font-family: 'Commit Mono', monospace;
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.landing-links a:hover,
.landing-links button:hover {
  color: var(--text-bright);
  text-decoration: none;
}

.landing-cta {
  color: var(--candle) !important;
}

.landing-menu-btn {
  display: none;
}

.landing-mobile-nav {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.landing-mobile-nav a,
.landing-mobile-nav button {
  font-family: 'Commit Mono', monospace;
  font-size: 16px;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.landing-mobile-nav a:hover,
.landing-mobile-nav button:hover {
  color: var(--candle);
}

@media (max-width: 768px) {
  .landing-links { display: none; }
  .landing-menu-btn { display: block; }
  .landing-nav { padding: 0 20px; }
}
</style>
