<template>
  <section class="relative overflow-hidden section-padding bg-surface-600/50">
    <!-- Shadok musician: round character playing a trumpet -->
    <svg class="shadok-musician" viewBox="0 0 220 280" fill="none" aria-hidden="true">
      <!-- Body (ovoid) -->
      <ellipse cx="100" cy="150" rx="45" ry="55" fill="currentColor" opacity="0.85"/>
      <!-- Head -->
      <circle cx="100" cy="80" r="28" fill="currentColor" opacity="0.8"/>
      <!-- Eyes -->
      <circle cx="90" cy="74" r="5" fill="currentColor" opacity="0.2"/>
      <circle cx="110" cy="74" r="5" fill="currentColor" opacity="0.2"/>
      <circle cx="91" cy="73" r="2" fill="currentColor" opacity="0.5"/>
      <circle cx="111" cy="73" r="2" fill="currentColor" opacity="0.5"/>
      <!-- Mouth (blowing) -->
      <circle cx="125" cy="86" r="4" fill="currentColor" opacity="0.3"/>
      <!-- Trumpet -->
      <line x1="128" y1="86" x2="185" y2="78" stroke="currentColor" stroke-width="5" stroke-linecap="round" opacity="0.7"/>
      <path d="M185 68 Q200 78 185 88" stroke="currentColor" stroke-width="3" fill="currentColor" opacity="0.45"/>
      <!-- Trumpet valves -->
      <circle cx="155" cy="80" r="3" fill="currentColor" opacity="0.3"/>
      <circle cx="165" cy="79" r="3" fill="currentColor" opacity="0.3"/>
      <!-- Music notes floating -->
      <circle cx="205" cy="60" r="4" fill="currentColor" opacity="0.4"/>
      <line x1="209" y1="60" x2="209" y2="42" stroke="currentColor" stroke-width="1.5" opacity="0.4"/>
      <circle cx="195" cy="45" r="3" fill="currentColor" opacity="0.3"/>
      <line x1="198" y1="45" x2="198" y2="30" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
      <!-- Legs -->
      <line x1="82" y1="202" x2="72" y2="255" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="118" y1="202" x2="128" y2="255" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <!-- Feet -->
      <path d="M72 255 L58 258 M72 255 L66 261" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
      <path d="M128 255 L114 258 M128 255 L122 261" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
    </svg>

    <div class="container-content">
      <UiScrollReveal>
        <div class="text-center mb-12">
          <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">{{ content?.songs.kicker }}</p>
          <h2 class="heading-section font-display font-bold tracking-tight text-white">
            {{ content?.songs.title }}
          </h2>
          <p class="mt-4 mx-auto max-w-2xl text-white/60">
            {{ content?.songs.description }}
          </p>
        </div>
      </UiScrollReveal>

      <!-- Featured songs grid -->
      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <UiScrollReveal
          v-for="(song, i) in featuredSongs"
          :key="song.id"
          :delay="i * 100"
        >
          <SongItem :song="song" />
        </UiScrollReveal>
      </div>

      <UiScrollReveal :delay="400">
        <div class="mt-10 text-center">
          <UiBaseButton variant="accent" :to="content?.songs.cta.to">
            {{ content?.songs.cta.label }}
            <div class="i-lucide-arrow-right ml-2 h-4 w-4" />
          </UiBaseButton>
        </div>
      </UiScrollReveal>
    </div>
  </section>
</template>

<script setup lang="ts">
const { data: content } = await usePageContent('home')
const bookData = useBookData()
await bookData.init()

const featuredSongs = computed(() => bookData.getSongs().slice(0, 6))
</script>

<style scoped>
.heading-section {
  font-size: clamp(1.625rem, 4vw, 2.125rem);
}

.shadok-musician {
  position: absolute;
  right: 2%;
  top: 4%;
  width: clamp(110px, 15vw, 210px);
  opacity: 0.28;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-float-musician 8s ease-in-out infinite;
}

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

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