<template>
  <div class="section-padding">
    <div class="container-content">
      <header class="mb-12 text-center">
        <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">{{ content?.kicker }}</p>
        <h1 class="page-title font-display font-bold tracking-tight text-white">
          {{ content?.title }}
        </h1>
        <p class="mt-4 mx-auto max-w-2xl text-white/60">
          {{ content?.description }}
        </p>
      </header>

      <div class="mx-auto max-w-3xl">
        <ul class="flex flex-col gap-3">
          <li
            v-for="chapter in chapters"
            :key="chapter.path"
          >
            <NuxtLink
              :to="`/lire/${chapter.stem}`"
              class="card-surface flex items-start gap-4 group"
            >
              <span class="font-mono text-2xl font-bold text-primary/30 leading-none mt-1 w-10 text-right flex-shrink-0">
                {{ String(chapter.order).padStart(2, '0') }}
              </span>
              <div class="min-w-0 flex-1">
                <h2 class="font-display text-lg font-semibold text-white group-hover:text-primary transition-colors">
                  {{ chapter.title }}
                </h2>
                <p v-if="chapter.description" class="mt-1 text-sm text-white/50">
                  {{ chapter.description }}
                </p>
                <div class="mt-2 flex items-center gap-3">
                  <span v-if="chapter.readingTime" class="text-xs text-white/30">
                    <span class="i-lucide-clock inline-block h-3 w-3 mr-1 align-middle" />
                    {{ chapter.readingTime }}
                  </span>
                  <SongBadges :chapter-slug="chapter.stem!" />
                </div>
              </div>
              <div class="i-lucide-chevron-right h-5 w-5 text-white/20 group-hover:text-primary/60 transition-colors flex-shrink-0 mt-2" />
            </NuxtLink>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default',
})

const { data: content } = await usePageContent('lire')

useHead({
  title: content.value?.meta?.title ?? 'Table des matières',
})

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

<style scoped>
.page-title {
  font-size: clamp(2rem, 5vw, 2.75rem);
}
</style>
