<template>
  <div class="site">
    <a
      href="#main-content"
      class="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-3 focus:bg-[var(--bg)] focus:text-[var(--text)]"
      >Skip to content</a
    >
    <!-- Desktop Sidebar -->
    <AppNavigation class="sidebar-desktop" />

    <!-- Mobile Header -->
    <div class="mobile-header">
      <NuxtLink to="/" class="brand">Ghost Guild</NuxtLink>
      <button class="btn" @click="isMobileMenuOpen = true">Menu</button>
    </div>

    <!-- Main Content -->
    <main id="main-content" class="main">
      <TopStrip :page-path="currentPageName" />
      <div class="main-body">
        <slot />
      </div>
    </main>

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

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

const pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");

const currentPageName = computed(() => {
  const path = route.path;
  if (path === "/") return "";
  const segments = path.slice(1).split("/");
  if (pageBreadcrumbTitle.value && segments.length > 1) {
    return [...segments.slice(0, -1), pageBreadcrumbTitle.value].join(" / ");
  }
  return segments.join(" / ");
});
</script>

<style scoped>
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  margin-left: 220px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.main-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-desktop {
  display: block;
}

.mobile-header {
  display: none;
}

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

@media (max-width: 768px) {
  .sidebar-desktop {
    display: none;
  }
  .mobile-header {
    display: flex;
    padding: 12px 20px;
    border-bottom: 1px dashed var(--border);
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .main {
    margin-left: 0;
    flex: 1;
    min-height: 0;
  }
}
</style>
