<template>
  <div class="relative overflow-hidden section-padding min-h-[70vh] flex items-center justify-center">
    <!-- Shadok jongleur: juggling coins (top-left) -->
    <svg class="shadok-juggler" viewBox="0 0 240 300" fill="none" aria-hidden="true">
      <!-- Body -->
      <ellipse cx="120" cy="160" rx="38" ry="46" fill="currentColor" opacity="0.85"/>
      <!-- Head -->
      <circle cx="120" cy="98" r="24" fill="currentColor" opacity="0.8"/>
      <!-- Eyes (looking up at coins) -->
      <circle cx="112" cy="92" r="3.5" fill="currentColor" opacity="0.2"/>
      <circle cx="130" cy="92" r="3.5" fill="currentColor" opacity="0.2"/>
      <circle cx="113" cy="91" r="1.5" fill="currentColor" opacity="0.5"/>
      <circle cx="131" cy="91" r="1.5" fill="currentColor" opacity="0.5"/>
      <!-- Smile -->
      <path d="M112 108 Q120 114 128 108" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.35"/>
      <!-- Arms up (juggling) -->
      <line x1="85" y1="145" x2="55" y2="105" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="155" y1="145" x2="185" y2="105" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <!-- Hands -->
      <circle cx="55" cy="103" r="4" fill="currentColor" opacity="0.4"/>
      <circle cx="185" cy="103" r="4" fill="currentColor" opacity="0.4"/>
      <!-- Juggling coins -->
      <circle cx="90" cy="55" r="8" fill="currentColor" opacity="0.35"/>
      <text x="86" y="59" fill="currentColor" opacity="0.5" font-size="10" font-weight="bold">$</text>
      <circle cx="120" cy="40" r="8" fill="currentColor" opacity="0.3"/>
      <text x="116" y="44" fill="currentColor" opacity="0.45" font-size="10" font-weight="bold">$</text>
      <circle cx="150" cy="50" r="8" fill="currentColor" opacity="0.32"/>
      <text x="146" y="54" fill="currentColor" opacity="0.48" font-size="10" font-weight="bold">$</text>
      <!-- Legs -->
      <line x1="105" y1="203" x2="95" y2="260" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="135" y1="203" x2="145" y2="260" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
    </svg>

    <!-- Shadok échelle: on a wobbly ladder (top-right) -->
    <svg class="shadok-ladder" viewBox="0 0 220 320" fill="none" aria-hidden="true">
      <!-- Ladder (tilting) -->
      <line x1="80" y1="50" x2="70" y2="300" stroke="currentColor" stroke-width="3" opacity="0.35"/>
      <line x1="150" y1="50" x2="140" y2="300" stroke="currentColor" stroke-width="3" opacity="0.35"/>
      <!-- Rungs -->
      <line x1="82" y1="80" x2="148" y2="80" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
      <line x1="83" y1="120" x2="147" y2="120" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
      <line x1="84" y1="160" x2="146" y2="160" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
      <line x1="85" y1="200" x2="145" y2="200" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
      <line x1="86" y1="240" x2="144" y2="240" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
      <!-- Shadok on top (arms out for balance) -->
      <ellipse cx="115" cy="68" rx="18" ry="14" fill="currentColor" opacity="0.85"/>
      <circle cx="115" cy="46" r="14" fill="currentColor" opacity="0.8"/>
      <!-- Eyes (worried) -->
      <circle cx="110" cy="43" r="3" fill="currentColor" opacity="0.25"/>
      <circle cx="122" cy="43" r="3" fill="currentColor" opacity="0.25"/>
      <circle cx="110" cy="44" r="1.2" fill="currentColor" opacity="0.5"/>
      <circle cx="122" cy="44" r="1.2" fill="currentColor" opacity="0.5"/>
      <!-- Worried mouth -->
      <path d="M108 52 Q115 49 122 52" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
      <!-- Arms out (balancing) -->
      <line x1="97" y1="62" x2="60" y2="55" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="133" y1="62" x2="170" y2="55" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
    </svg>

    <!-- Shadok acrobate: doing a cartwheel (center) -->
    <svg class="shadok-acrobat" viewBox="0 0 260 240" fill="none" aria-hidden="true">
      <!-- Body (sideways, mid-cartwheel) -->
      <ellipse cx="130" cy="120" rx="30" ry="38" fill="currentColor" opacity="0.85" transform="rotate(45 130 120)"/>
      <!-- Head -->
      <circle cx="155" cy="82" r="20" fill="currentColor" opacity="0.8"/>
      <!-- Eyes (dizzy/happy) -->
      <path d="M148 78 Q152 74 156 78" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
      <path d="M160 78 Q164 74 168 78" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
      <!-- Smile -->
      <path d="M150 90 Q158 95 165 90" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
      <!-- Arms (one touching ground, one up) -->
      <line x1="110" y1="100" x2="80" y2="130" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
      <line x1="150" y1="105" x2="185" y2="70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
      <!-- Hand on ground -->
      <circle cx="78" cy="132" r="4" fill="currentColor" opacity="0.4"/>
      <!-- Legs (splayed in cartwheel) -->
      <line x1="125" y1="155" x2="100" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
      <line x1="140" y1="150" x2="175" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
      <!-- Motion lines -->
      <path d="M70 110 Q60 105 55 115" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
      <path d="M190 60 Q200 55 205 65" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
    </svg>

    <!-- Shadok dormeur: sleeping on a cloud (bottom-left) -->
    <svg class="shadok-sleeper" viewBox="0 0 260 220" fill="none" aria-hidden="true">
      <!-- Cloud -->
      <ellipse cx="130" cy="150" rx="80" ry="25" fill="currentColor" opacity="0.2"/>
      <circle cx="80" cy="140" r="25" fill="currentColor" opacity="0.18"/>
      <circle cx="120" cy="130" r="30" fill="currentColor" opacity="0.2"/>
      <circle cx="165" cy="135" r="22" fill="currentColor" opacity="0.18"/>
      <circle cx="190" cy="142" r="18" fill="currentColor" opacity="0.15"/>
      <!-- Shadok body (lying down) -->
      <ellipse cx="130" cy="125" rx="35" ry="18" fill="currentColor" opacity="0.85"/>
      <!-- Head (on cloud, sideways) -->
      <ellipse cx="85" cy="118" rx="18" ry="16" fill="currentColor" opacity="0.8"/>
      <!-- Closed eyes (sleeping) -->
      <path d="M76 115 Q80 112 84 115" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.4"/>
      <path d="M88 115 Q92 112 96 115" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.4"/>
      <!-- Snooze bubbles -->
      <text x="70" y="100" fill="currentColor" opacity="0.3" font-size="12" font-weight="bold">z</text>
      <text x="60" y="85" fill="currentColor" opacity="0.25" font-size="16" font-weight="bold">z</text>
      <text x="48" y="68" fill="currentColor" opacity="0.2" font-size="20" font-weight="bold">z</text>
      <!-- Legs (curled) -->
      <path d="M165 125 Q180 130 175 140" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.5"/>
      <path d="M160 130 Q172 138 168 148" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.5"/>
    </svg>

    <!-- Shadok cuisinier: cooking in a cauldron (bottom-right) -->
    <svg class="shadok-cook" viewBox="0 0 240 300" fill="none" aria-hidden="true">
      <!-- Body -->
      <ellipse cx="120" cy="145" rx="38" ry="45" fill="currentColor" opacity="0.85"/>
      <!-- Head -->
      <circle cx="120" cy="85" r="24" fill="currentColor" opacity="0.8"/>
      <!-- Chef hat -->
      <ellipse cx="120" cy="62" rx="22" ry="18" fill="currentColor" opacity="0.35"/>
      <rect x="105" y="68" width="30" height="6" rx="1" fill="currentColor" opacity="0.4"/>
      <!-- Eyes (focused on cooking) -->
      <circle cx="112" cy="82" r="3.5" fill="currentColor" opacity="0.2"/>
      <circle cx="130" cy="82" r="3.5" fill="currentColor" opacity="0.2"/>
      <circle cx="113" cy="83" r="1.5" fill="currentColor" opacity="0.5"/>
      <circle cx="131" cy="83" r="1.5" fill="currentColor" opacity="0.5"/>
      <!-- Tongue out (concentrating) -->
      <path d="M115 96 Q120 100 125 96" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
      <!-- Arm with ladle -->
      <line x1="155" y1="135" x2="185" y2="175" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <!-- Ladle -->
      <line x1="185" y1="175" x2="175" y2="200" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
      <ellipse cx="175" cy="205" rx="8" ry="5" fill="currentColor" opacity="0.35"/>
      <!-- Other arm -->
      <line x1="85" y1="140" x2="60" y2="175" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <!-- Legs -->
      <line x1="105" y1="188" x2="95" y2="250" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="135" y1="188" x2="145" y2="250" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <!-- Cauldron -->
      <path d="M55 220 Q55 260 120 260 Q185 260 185 220" fill="currentColor" opacity="0.3"/>
      <ellipse cx="120" cy="220" rx="65" ry="12" fill="currentColor" opacity="0.25"/>
      <ellipse cx="120" cy="220" rx="65" ry="12" stroke="currentColor" stroke-width="2" fill="none" opacity="0.35"/>
      <!-- Steam -->
      <path d="M95 210 Q90 195 95 185" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
      <path d="M120 208 Q118 190 122 180" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
      <path d="M145 210 Q148 195 143 185" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
    </svg>

    <div class="container-content relative z-10 text-center">
      <p class="mb-3 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
      <h1 class="page-title font-display font-extrabold tracking-tight text-white">
        {{ content?.title }}
      </h1>
      <p class="mt-4 text-lg text-white/50">
        {{ content?.description }}
      </p>
    </div>
  </div>
</template>

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

const { data: content } = await usePageContent('evenement')

useHead({
  title: content.value?.meta?.title ?? 'Évènement',
})
</script>

<style scoped>
.page-title {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
}

.shadok-juggler {
  position: absolute;
  left: 4%;
  top: 5%;
  width: clamp(100px, 14vw, 190px);
  opacity: 0.3;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-bounce-juggler 4s ease-in-out infinite;
}

.shadok-ladder {
  position: absolute;
  right: 4%;
  top: 3%;
  width: clamp(90px, 12vw, 170px);
  opacity: 0.28;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-wobble-ladder 5s ease-in-out infinite;
}

.shadok-acrobat {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translateX(-50%);
  width: clamp(100px, 13vw, 180px);
  opacity: 0.2;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-spin-acrobat 6s ease-in-out infinite;
}

.shadok-sleeper {
  position: absolute;
  left: 3%;
  bottom: 5%;
  width: clamp(110px, 15vw, 210px);
  opacity: 0.25;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-float-sleeper 8s ease-in-out infinite;
}

.shadok-cook {
  position: absolute;
  right: 3%;
  bottom: 4%;
  width: clamp(100px, 14vw, 200px);
  opacity: 0.3;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-bounce-cook 5s ease-in-out infinite;
}

@keyframes shadok-bounce-juggler {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-12px); }
  60% { transform: translateY(-6px); }
}

@keyframes shadok-wobble-ladder {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); }
}

@keyframes shadok-spin-acrobat {
  0% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(15deg); }
  50% { transform: translateX(-50%) rotate(0deg); }
  75% { transform: translateX(-50%) rotate(-15deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}

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

@keyframes shadok-bounce-cook {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  70% { transform: translateY(-4px); }
}

@media (max-width: 768px) {
  .shadok-juggler { display: none; }
  .shadok-ladder { display: none; }
  .shadok-acrobat { display: none; }
  .shadok-sleeper { display: none; }
  .shadok-cook { display: none; }
}
</style>
