<template>
  <footer class="border-t border-white/8 bg-surface-600 pb-[var(--player-height)]">
    <div class="container-content px-4 py-8">
      <div class="flex flex-col items-center gap-4 md:flex-row md:justify-between">
        <!-- Credits -->
        <p class="text-sm text-white/40">
          {{ site?.footer.credits }}
        </p>

        <!-- Links -->
        <nav class="flex items-center gap-4" aria-label="Liens du pied de page">
          <NuxtLink
            v-for="link in site?.footer.links"
            :key="link.to"
            :to="link.to"
            class="text-sm text-white/40 transition-colors hover:text-white/70"
          >
            {{ link.label }}
          </NuxtLink>
        </nav>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
const { data: site } = await useSiteContent()
</script>
