<template>
  <UPage>
    <UHeader>
      <template #left>
        <NuxtLink to="/">
          <div class="flex gap-4 items-center">
            <img class="inline h-12 w-auto" src="/Logo.svg" alt="YPHS Alumni" />
            <h1
              class="inline text-xl font-bold text-gray-900 hover:text-primary"
            >
              永平中学校友会
            </h1>
          </div>
        </NuxtLink>
      </template>

      <template #right>
        <nav class="space-x-6 hidden md:flex items-center">
          <UNavigationMenu :items="items" />
          <a
            href="/join-us"
            class="inline-flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-xl shadow hover:opacity-90"
          >
            加入
            <Icon name="mdi:account-plus" class="w-5 h-5" />
          </a>
        </nav>
      </template>

      <template #body>
        <UNavigationMenu
          :items="items"
          orientation="vertical"
          class="-mx-2.5"
        />
      </template>
    </UHeader>

    <UMain>
      <slot />
    </UMain>

    <UFooter>
      <template #left>
        <p>© 2025 永平中学校友会. 保留所有权利.</p>
      </template>

      <template #default>
        <p class="mt-1">
          Powered by:
          <a
            href="https://tootaio.com"
            target="_blank"
            class="font-semibold hover:underline"
            style="color: #e24545"
          >
            Tootaio Studio
          </a>
          <span class="mt-1 text-sm">2018 级毕业学长（麦祖奕）</span>
        </p>
      </template>

      <template #right>
        <a href="#">
          <Icon name="mdi-facebook" />
        </a>
        <a href="#">
          <Icon name="mdi-instagram" />
        </a>
        <a href="#">
          <Icon name="mdi-gmail" />
        </a>
      </template>
    </UFooter>
  </UPage>
</template>

<script setup lang="ts">
import type { NavigationMenuItem } from "@nuxt/ui";

const route = useRoute();

const items = computed<NavigationMenuItem[]>(() => [
  { label: "新闻", to: "#news", active: route.path.startsWith("#news") },
  { label: "活动", to: "#events", active: route.path.startsWith("#events") },
  { label: "捐赠", to: "#donate", active: route.path.startsWith("#donate") },
  { label: "关于", to: "#about", active: route.path.startsWith("#about") },
]);
</script>
