<template>
  <div>
    <h1 class="font-display text-2xl font-bold text-white mb-6">Dashboard</h1>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <NuxtLink to="/admin/site" class="dash-card">
        <div class="i-lucide-globe h-8 w-8 text-primary mb-2" />
        <h2 class="text-lg font-semibold text-white">Site</h2>
        <p class="text-sm text-white/50">Identité, navigation, footer</p>
      </NuxtLink>

      <NuxtLink to="/admin/pages/home" class="dash-card">
        <div class="i-lucide-home h-8 w-8 text-primary mb-2" />
        <h2 class="text-lg font-semibold text-white">Pages</h2>
        <p class="text-sm text-white/50">Contenus des pages publiques</p>
      </NuxtLink>

      <NuxtLink to="/admin/book" class="dash-card">
        <div class="i-lucide-book-open h-8 w-8 text-primary mb-2" />
        <h2 class="text-lg font-semibold text-white">Chapitres</h2>
        <p class="text-sm text-white/50">Éditer le contenu du livre</p>
      </NuxtLink>

      <NuxtLink to="/admin/songs" class="dash-card">
        <div class="i-lucide-music h-8 w-8 text-accent mb-2" />
        <h2 class="text-lg font-semibold text-white">Chansons</h2>
        <p class="text-sm text-white/50">Métadonnées des pistes</p>
      </NuxtLink>

      <NuxtLink to="/admin/media" class="dash-card">
        <div class="i-lucide-image h-8 w-8 text-accent mb-2" />
        <h2 class="text-lg font-semibold text-white">Médias</h2>
        <p class="text-sm text-white/50">Images, audio, PDF</p>
      </NuxtLink>
    </div>
  </div>
</template>

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

<style scoped>
.dash-card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(20 8% 14%);
  background: hsl(20 8% 6%);
  text-decoration: none;
  transition: all 0.2s;
}

.dash-card:hover {
  border-color: hsl(12 76% 48% / 0.3);
  background: hsl(20 8% 8%);
}
</style>
