<template>
  <section class="section-padding bg-surface-600/50">
    <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);
}
</style>
