<template>
  <div class="min-h-screen bg-guild-900 relative">
    <!-- Background image at top - full page width -->
    <div
      class="absolute inset-x-0 pointer-events-none z-0"
      style="
        background-image: url(&quot;/background-dither.png&quot;);
        background-size: 100% auto;
        background-position: top center;
        background-repeat: no-repeat;
        mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0) 100%
        );
        -webkit-mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0) 100%
        );
      "
    />

    <!-- Mobile Header -->
    <div
      class="lg:hidden fixed top-0 left-0 right-0 z-50 bg-guild-900/95 backdrop-blur-md border-b border-guild-700"
    >
      <div class="flex items-center justify-between p-4">
        <NuxtLink
          to="/"
          class="text-lg font-bold text-white warm-text tracking-wider"
        >
          Ghost Guild
        </NuxtLink>
        <UButton
          icon="i-lucide-menu"
          color="neutral"
          variant="ghost"
          size="lg"
          @click="isMobileMenuOpen = true"
          aria-label="Open menu"
        />
      </div>
    </div>

    <!-- Container to center content and sidebar together -->
    <div class="lg:flex lg:justify-center lg:gap-0">
      <!-- Main Content Column -->
      <div class="lg:w-[800px] overflow-y-auto relative z-[5] guild-interior">
        <div class="relative">
          <slot />
        </div>
        <AppFooter />
      </div>

      <!-- Desktop Navigation Column -->
      <AppNavigation class="hidden lg:block relative z-20" />
    </div>

    <!-- Mobile Navigation Drawer -->
    <USlideover v-model:open="isMobileMenuOpen" side="right">
      <template #body>
        <AppNavigation :is-mobile="true" @navigate="isMobileMenuOpen = false" />
      </template>
    </USlideover>
  </div>
</template>

<script setup>
const isMobileMenuOpen = ref(false);
</script>
