<template>
  <section class="py-10">
    <a-typography-title :level="1" class="!mb-2">站点地图</a-typography-title>
    <a-typography-paragraph class="!text-gray-600 !mb-6">
      便捷入口汇总，支持快速定位栏目与服务。
    </a-typography-paragraph>

    <a-card size="small">
      <ul class="sitemap">
        <li v-for="it in nav" :key="it.key">
          <NuxtLink v-if="it.to" :to="it.to">{{ it.label }}</NuxtLink>
          <span v-else>{{ it.label }}</span>
          <ul v-if="it.children?.length">
            <li v-for="c in it.children" :key="c.key">
              <NuxtLink v-if="c.to" :to="c.to">{{ c.label }}</NuxtLink>
              <span v-else>{{ c.label }}</span>
            </li>
          </ul>
        </li>
      </ul>
    </a-card>
  </section>
</template>

<script setup lang="ts">
import { mainNav } from '@/config/nav'
import { usePageSeo } from '@/composables/usePageSeo'

usePageSeo({ title: '站点地图', description: '站点地图与栏目入口汇总。', path: '/sitemap' })
const nav = mainNav
</script>

<style scoped>
.sitemap {
  margin: 0;
  padding-left: 18px;
  color: var(--text-primary);
}

.sitemap li {
  padding: 6px 0;
}

.sitemap ul {
  margin-top: 6px;
  padding-left: 18px;
}
</style>

