<template>
  <div class="relative overflow-hidden section-padding">
    <!-- Shadok reader: character with big glasses reading a book -->
    <svg class="shadok-reader" viewBox="0 0 240 300" fill="none" aria-hidden="true">
      <!-- Body -->
      <ellipse cx="120" cy="170" rx="45" ry="55" fill="currentColor" opacity="0.85"/>
      <!-- Head -->
      <circle cx="120" cy="100" r="28" fill="currentColor" opacity="0.8"/>
      <!-- Big round glasses -->
      <circle cx="107" cy="94" r="11" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.5"/>
      <circle cx="133" cy="94" r="11" stroke="currentColor" stroke-width="2.5" fill="none" opacity="0.5"/>
      <line x1="118" y1="94" x2="122" y2="94" stroke="currentColor" stroke-width="2" opacity="0.5"/>
      <!-- Eyes behind glasses -->
      <circle cx="108" cy="93" r="2.5" fill="currentColor" opacity="0.5"/>
      <circle cx="134" cy="93" r="2.5" fill="currentColor" opacity="0.5"/>
      <!-- Arms holding book -->
      <line x1="78" y1="155" x2="60" y2="180" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="162" y1="155" x2="180" y2="180" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <!-- Book (open) -->
      <rect x="55" y="175" width="55" height="40" rx="2" fill="currentColor" opacity="0.35"/>
      <rect x="110" y="175" width="55" height="40" rx="2" fill="currentColor" opacity="0.3"/>
      <line x1="110" y1="175" x2="110" y2="215" stroke="currentColor" stroke-width="2" opacity="0.5"/>
      <!-- Book lines (text) -->
      <line x1="65" y1="188" x2="100" y2="188" stroke="currentColor" stroke-width="1" opacity="0.2"/>
      <line x1="65" y1="195" x2="95" y2="195" stroke="currentColor" stroke-width="1" opacity="0.2"/>
      <line x1="65" y1="202" x2="98" y2="202" stroke="currentColor" stroke-width="1" opacity="0.2"/>
      <!-- Legs -->
      <line x1="105" y1="222" x2="95" y2="270" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="135" y1="222" x2="145" y2="270" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
    </svg>

    <!-- Shadok stack: pile of books tilting -->
    <svg class="shadok-stack" viewBox="0 0 160 220" fill="none" aria-hidden="true">
      <!-- Bottom book -->
      <rect x="20" y="170" width="120" height="22" rx="3" fill="currentColor" opacity="0.5" transform="rotate(-2 80 181)"/>
      <!-- Second book -->
      <rect x="30" y="145" width="100" height="20" rx="3" fill="currentColor" opacity="0.45" transform="rotate(3 80 155)"/>
      <!-- Third book -->
      <rect x="25" y="120" width="110" height="18" rx="3" fill="currentColor" opacity="0.4" transform="rotate(-4 80 129)"/>
      <!-- Fourth book -->
      <rect x="35" y="97" width="90" height="18" rx="3" fill="currentColor" opacity="0.35" transform="rotate(5 80 106)"/>
      <!-- Fifth book (tilting more) -->
      <rect x="40" y="74" width="80" height="17" rx="3" fill="currentColor" opacity="0.3" transform="rotate(-7 80 82)"/>
      <!-- Top book (really tilting) -->
      <rect x="45" y="52" width="70" height="16" rx="3" fill="currentColor" opacity="0.25" transform="rotate(10 80 60)"/>
      <!-- Tiny Shadok sitting on top -->
      <ellipse cx="85" cy="42" rx="10" ry="8" fill="currentColor" opacity="0.5"/>
      <circle cx="85" cy="30" r="6" fill="currentColor" opacity="0.45"/>
      <circle cx="87" cy="29" r="1.5" fill="currentColor" opacity="0.3"/>
    </svg>

    <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);
}

.shadok-reader {
  position: absolute;
  right: 2%;
  top: 5%;
  width: clamp(90px, 13vw, 180px);
  opacity: 0.1;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-float-reader 9s ease-in-out infinite;
}

.shadok-stack {
  position: absolute;
  left: 2%;
  bottom: 5%;
  width: clamp(80px, 11vw, 150px);
  opacity: 0.1;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-float-stack 11s ease-in-out infinite;
}

@keyframes shadok-float-reader {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes shadok-float-stack {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-2deg); }
}

@media (max-width: 768px) {
  .shadok-reader { display: none; }
  .shadok-stack { display: none; }
}
</style>
