<template>
  <section
    class="relative min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-white via-blue-50 to-blue-100 text-gray-800 px-6 py-12 overflow-hidden"
  >
    <!-- Background pattern lembut -->
    <div
      class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(147,197,253,0.2),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(191,219,254,0.3),transparent_50%)]"
    ></div>

    <!-- Kartu utama -->
    <div
      class="relative bg-white/90 backdrop-blur-sm shadow-xl rounded-3xl p-8 sm:p-12 max-w-2xl text-center border border-blue-100"
    >
      <p class="text-sm text-gray-500 mb-3 tracking-wide uppercase font-medium">
        Undangan Khitan
      </p>

      <h1
        class="text-4xl sm:text-5xl font-extrabold text-blue-700 font-serif mb-4 tracking-tight"
      >
        {{ childName }}
      </h1>

      <p class="text-gray-600 text-base mb-6 leading-relaxed">
        Dengan penuh rasa syukur kepada Allah SWT, kami bermaksud mengundang
        Bapak/Ibu/Saudara/i untuk hadir dalam acara khitanan putra kami.
      </p>

      <div class="bg-blue-50 border border-blue-100 rounded-xl py-4 px-6 mb-6">
        <p class="text-blue-800 font-medium">
          Kepada Yth. <span class="font-semibold">{{ guestName || 'Tamu Undangan' }}</span>
        </p>
      </div>

      <!-- Tombol menuju halaman berikut -->
      <button
        @click="$emit('next-page')"
        class="inline-flex items-center justify-center bg-blue-600 text-white font-semibold py-3 px-8 rounded-full shadow-md hover:bg-blue-700 transition-all duration-300"
      >
        Buka Undangan
        <span class="ml-2">📩</span>
      </button>
    </div>

    <!-- Ornamen lembut di bawah -->
    <div
      class="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-blue-200/50 to-transparent rounded-t-[100px]"
    ></div>
  </section>
</template>

<script setup>
defineProps({
  childName: String,
  guestName: String
})
</script>

<style scoped>
section {
  animation: fadeIn 1.2s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
