<template>
  <footer class="footer-wrap border-t border-[hsl(var(--color-text)/0.1)] bg-[hsl(var(--color-surface))]">
    <!-- Shadok pattern -->
    <svg class="footer-shadok-pattern" viewBox="0 0 400 80" fill="none" aria-hidden="true">
      <g transform="translate(20,10)">
        <ellipse cx="15" cy="25" rx="12" ry="14" fill="currentColor" opacity="0.2"/>
        <circle cx="15" cy="10" r="7" fill="currentColor" opacity="0.16"/>
        <line x1="10" y1="38" x2="8" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
        <line x1="20" y1="38" x2="22" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.15"/>
      </g>
      <g transform="translate(80,15)">
        <ellipse cx="15" cy="22" rx="10" ry="12" fill="currentColor" opacity="0.16"/>
        <circle cx="15" cy="8" r="6" fill="currentColor" opacity="0.13"/>
        <line x1="10" y1="33" x2="8" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.12"/>
        <line x1="20" y1="33" x2="22" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.12"/>
      </g>
      <g transform="translate(140,8)">
        <ellipse cx="15" cy="25" rx="11" ry="13" fill="currentColor" opacity="0.18"/>
        <circle cx="15" cy="10" r="6.5" fill="currentColor" opacity="0.15"/>
        <line x1="10" y1="37" x2="7" y2="54" stroke="currentColor" stroke-width="1.5" opacity="0.14"/>
        <line x1="20" y1="37" x2="23" y2="54" stroke="currentColor" stroke-width="1.5" opacity="0.14"/>
      </g>
      <g transform="translate(210,18)">
        <ellipse cx="15" cy="20" rx="10" ry="11" fill="currentColor" opacity="0.14"/>
        <circle cx="15" cy="7" r="5.5" fill="currentColor" opacity="0.11"/>
        <line x1="10" y1="30" x2="9" y2="44" stroke="currentColor" stroke-width="1.5" opacity="0.1"/>
        <line x1="20" y1="30" x2="21" y2="44" stroke="currentColor" stroke-width="1.5" opacity="0.1"/>
      </g>
      <g transform="translate(270,12)">
        <ellipse cx="15" cy="24" rx="12" ry="14" fill="currentColor" opacity="0.18"/>
        <circle cx="15" cy="9" r="7" fill="currentColor" opacity="0.15"/>
        <line x1="10" y1="37" x2="7" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.14"/>
        <line x1="20" y1="37" x2="23" y2="55" stroke="currentColor" stroke-width="1.5" opacity="0.14"/>
      </g>
      <g transform="translate(340,16)">
        <ellipse cx="15" cy="22" rx="10" ry="12" fill="currentColor" opacity="0.16"/>
        <circle cx="15" cy="8" r="6" fill="currentColor" opacity="0.13"/>
        <line x1="10" y1="33" x2="8" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.12"/>
        <line x1="20" y1="33" x2="22" y2="48" stroke="currentColor" stroke-width="1.5" opacity="0.12"/>
      </g>
    </svg>
    <div class="container-content px-4 py-8 relative z-1">
      <div class="flex flex-col items-center gap-4 md:flex-row md:justify-between">
        <!-- Credits -->
        <p class="text-sm text-[hsl(var(--color-text)/0.4)]">
          {{ 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-[hsl(var(--color-text)/0.4)] transition-colors hover:text-[hsl(var(--color-text)/0.7)]"
          >
            {{ link.label }}
          </NuxtLink>
        </nav>
      </div>
    </div>
  </footer>
</template>

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

<style scoped>
.footer-wrap {
  position: relative;
  overflow: hidden;
}

.footer-shadok-pattern {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 1;
  pointer-events: none;
  color: hsl(var(--color-primary));
}
</style>
