<script setup>
import { ChevronDown, FileText } from 'lucide-vue-next'

const props = defineProps({
  beforeBook: {
    type: Object,
    required: true,
  },
})

const beforeBook = computed(() => props.beforeBook || {})
const openTopic = ref(0)
</script>

<template>
  <section class="mb-24">
    <div class="max-w-4xl mx-auto bg-white border border-slate-200 rounded-[2rem] p-8 md:p-10 shadow-sm">
      <div class="flex items-center gap-4 mb-8 border-b border-slate-100 pb-8">
        <div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center shrink-0">
          <FileText class="w-6 h-6 text-blue-500" />
        </div>
        <div>
          <h2 class="text-2xl md:text-3xl font-display font-bold text-slate-900 mb-2">
            {{ beforeBook.title }}
          </h2>
          <p class="text-slate-600">{{ beforeBook.description }}</p>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3">
        <details
          v-for="(topic, index) in beforeBook.topics"
          :key="topic.t"
          class="group border-b border-slate-100 last:border-0 md:last:border-b [&_summary::-webkit-details-marker]:hidden"
          :open="openTopic === index"
          @click.prevent="openTopic = openTopic === index ? null : index"
        >
          <summary class="w-full flex items-center justify-between py-4 text-left cursor-pointer select-none">
            <span class="font-bold text-slate-800 text-sm group-hover:text-brand-orange transition-colors">
              {{ topic.t }}
            </span>
            <ChevronDown class="w-4 h-4 text-slate-400 transition-transform duration-300 group-open:rotate-180" />
          </summary>
          <div class="pb-4 text-sm text-slate-600 leading-relaxed">
            {{ topic.d }}
          </div>
        </details>
      </div>
    </div>
  </section>
</template>
