<template>
  <div
    class="flex flex-col items-center justify-center text-center min-h-screen px-6 py-10 text-white bg-gradient-to-b from-yellow-400 to-orange-500"
  >
    <h1 class="text-4xl font-bold mb-4 animate-bounce">
      🎉 Selamat Datang di Undangan Ulang Tahun 🎉
    </h1>

    <p class="text-lg mb-2">Halo, <span class="font-semibold">{{ guestName || 'Tamu Spesial' }}</span>!</p>
    <p class="text-xl font-semibold mb-8">Kami mengundangmu ke pesta ulang tahun {{ childName }} 🎂</p>

    <button
      @click="$emit('open-invitation')"
      class="bg-white text-orange-700 font-bold py-3 px-8 rounded-full shadow-lg hover:bg-yellow-100 transition"
    >
      Buka Undangan
    </button>
  </div>
</template>

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