<template>
  <div
    class="flex flex-col items-center justify-center text-center text-gray-800 min-h-screen px-4"
  >
    <!-- Animated elements -->
    <div class="absolute top-10 left-10 animate-bounce">🎈</div>
    <div class="absolute top-10 right-10 animate-bounce delay-100">🎁</div>
    <div class="absolute bottom-20 left-20 animate-bounce delay-200">🍰</div>
    <div class="absolute bottom-20 right-20 animate-bounce delay-300">🎉</div>

    <div class="bg-white/70 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-yellow-200 max-w-md transform hover:scale-105 transition-transform duration-500">
      <h1 class="text-4xl md:text-5xl font-extrabold mb-6 bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent">
        🎂 Undangan Ulang Tahun 🎂
      </h1>
      <p class="text-lg mb-4">Hai <span class="font-semibold text-orange-600">{{ guestName }}</span>!</p>
      <p class="text-lg mb-6">Yuk, datang ke acara ulang tahun <span class="font-bold text-orange-500">{{ childName }}</span>!</p>
      <button
        @click="$emit('open-invitation')"
        class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg transition-all duration-300 transform hover:scale-110 hover:shadow-xl"
      >
        Buka Undangan 🎊
      </button>
    </div>
  </div>
</template>

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