<template>
  <nav class="chapter-nav" aria-label="Navigation des chapitres">
    <h2 class="mb-4 font-display text-sm font-semibold uppercase tracking-wider text-white/40">
      Chapitres
    </h2>
    <ul class="flex flex-col gap-1">
      <li v-for="chapter in chapters" :key="chapter.path">
        <NuxtLink
          :to="`/economique/modele-eco/${chapter.stem?.split('/').pop()}`"
          class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-white/5"
          active-class="bg-primary/10 text-primary font-medium"
        >
          <span class="font-mono text-xs text-white/30 w-5 text-right">
            {{ chapter.order }}
          </span>
          <span class="truncate">{{ chapter.title }}</span>
        </NuxtLink>
      </li>
    </ul>
  </nav>
</template>

<script setup lang="ts">
const { data: chapters } = await useAsyncData('book-chapters', () =>
  queryCollection('book').order('order', 'ASC').all(),
)
</script>
