<template>
  <section class="section-padding">
    <div class="container-content">
      <div class="grid items-center gap-12 md:grid-cols-2">
        <!-- Book cover -->
        <UiScrollReveal>
          <div class="book-cover-wrapper relative">
            <div class="book-cover-3d">
              <img
                :src="content?.book.coverImage"
                :alt="content?.book.coverAlt"
                class="book-cover-img"
              />
            </div>
          </div>
        </UiScrollReveal>

        <!-- Content + CTAs -->
        <div>
          <UiScrollReveal>
            <p class="mb-2 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.book.kicker }}</p>
            <h2 class="heading-section font-display font-bold tracking-tight text-white">
              {{ content?.book.title }}
            </h2>
          </UiScrollReveal>

          <UiScrollReveal :delay="100">
            <p class="mt-4 text-lg leading-relaxed text-white/60">
              {{ content?.book.description }}
            </p>
          </UiScrollReveal>

          <UiScrollReveal :delay="200">
            <BookActions
              :show-chapters="showChapters"
              @open-player="$emit('open-player')"
              @open-pdf="$emit('open-pdf')"
            />
          </UiScrollReveal>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  showChapters?: boolean
}>(), {
  showChapters: true,
})

defineEmits<{
  'open-player': []
  'open-pdf': []
}>()

const { data: content } = await usePageContent('home')
</script>

<style scoped>
.book-cover-wrapper {
  perspective: 800px;
  display: flex;
  justify-content: center;
}

.book-cover-3d {
  aspect-ratio: 3 / 4;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid hsl(var(--color-text) / 0.1);
  box-shadow:
    0 12px 40px hsl(var(--color-text) / 0.15),
    0 0 0 1px hsl(var(--color-text) / 0.08);
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
              box-shadow 0.5s ease;
  max-width: 360px;
}

.book-cover-3d:hover {
  transform: rotateY(-8deg) rotateX(3deg) scale(1.02);
  box-shadow:
    12px 16px 48px hsl(var(--color-text) / 0.2),
    0 0 0 1px hsl(var(--color-primary) / 0.2);
}

.book-cover-img {
  width: 200%;
  height: 100%;
  object-fit: cover;
  transform: translateX(-50%);
}

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