<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-blue-50 to-blue-200 text-center relative overflow-hidden">
    <!-- Background Ornaments -->
    <div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top_left,_white,_transparent_70%)]"></div>

    <!-- Title -->
    <div class="z-10 space-y-4 animate-fade-in-down">
      <h1 class="text-blue-700 text-3xl md:text-5xl font-bold">Undangan Tasyakuran Khitan</h1>
      <h2 class="text-gray-700 text-2xl md:text-4xl font-semibold">{{ childName }}</h2>
    </div>

    <!-- Guest -->
    <div class="z-10 mt-10 bg-white/60 backdrop-blur-sm rounded-xl p-5 shadow-md animate-fade-in-up">
      <p class="text-gray-600 text-sm mb-1">Kepada Yth.</p>
      <p class="text-blue-800 text-xl font-bold">{{ guestName || 'Tamu Undangan' }}</p>
    </div>

    <!-- Button -->
    <button
      @click="$emit('next-page')"
      class="z-10 mt-12 px-8 py-3 bg-blue-600 text-white font-semibold rounded-full shadow-md hover:bg-blue-700 transition duration-300"
    >
      Buka Undangan
    </button>
  </div>
</template>

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

<style scoped>
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down { animation: fadeInDown 0.8s ease-out; }
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out; }
</style>
