<template>
  <div class="relative overflow-hidden section-padding">
    <!-- Shadok philosopher: character sitting cross-legged, floating -->
    <svg class="shadok-philosopher" viewBox="0 0 220 280" fill="none" aria-hidden="true">
      <!-- Body (round, serene) -->
      <ellipse cx="110" cy="150" rx="48" ry="55" fill="currentColor" opacity="0.85"/>
      <!-- Head -->
      <ellipse cx="110" cy="82" rx="26" ry="25" fill="currentColor" opacity="0.8"/>
      <!-- Closed eyes (meditating) -->
      <path d="M96 80 Q100 84 105 80" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
      <path d="M115 80 Q119 84 124 80" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
      <!-- Serene smile -->
      <path d="M102 93 Q110 98 118 93" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
      <!-- Arms resting on knees -->
      <path d="M64 155 Q55 180 70 200" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" fill="none" opacity="0.6"/>
      <path d="M156 155 Q165 180 150 200" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" fill="none" opacity="0.6"/>
      <!-- Hands on knees -->
      <circle cx="70" cy="200" r="5" fill="currentColor" opacity="0.4"/>
      <circle cx="150" cy="200" r="5" fill="currentColor" opacity="0.4"/>
      <!-- Crossed legs -->
      <path d="M80 205 Q90 230 120 235" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" fill="none" opacity="0.6"/>
      <path d="M140 205 Q130 230 100 235" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" fill="none" opacity="0.6"/>
      <!-- Floating aura lines -->
      <path d="M50 245 Q110 260 170 245" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 4" fill="none" opacity="0.25"/>
      <path d="M60 255 Q110 268 160 255" stroke="currentColor" stroke-width="1" stroke-dasharray="3 5" fill="none" opacity="0.18"/>
      <!-- Small sparkles around -->
      <circle cx="55" cy="110" r="2.5" fill="currentColor" opacity="0.2"/>
      <circle cx="170" cy="95" r="2" fill="currentColor" opacity="0.18"/>
      <circle cx="160" cy="130" r="3" fill="currentColor" opacity="0.15"/>
    </svg>

    <div class="container-content mx-auto max-w-3xl">
      <ContentRenderer v-if="page" :value="page" class="prose" />
    </div>
  </div>
</template>

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

useSeoPage({
  title: 'À propos — Le Librodrome',
  description: 'Le Librodrome : l\'histoire du projet, la démarche et les personnes derrière le livre et les outils d\'autonomie.',
})

const { data: page } = await useAsyncData('about', () =>
  queryCollection('pages').path('/pages/about').first(),
)
</script>

<style scoped>
.shadok-philosopher {
  position: absolute;
  right: 3%;
  bottom: 6%;
  width: clamp(120px, 15vw, 220px);
  opacity: 0.3;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-float-philosopher 11s ease-in-out infinite;
}

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

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