<template>
  <div
    class="flex flex-col items-center justify-center text-center text-gray-800 min-h-screen px-4 overflow-hidden"
  >
    <!-- Animated emojis -->
    <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>

    <!-- Floating Balloons -->
    <div class="balloon-container">
      <div class="balloon balloon-left-1">
        <img src="/balloon1.png" alt="Balloon" class="w-32 h-auto" />
      </div>
      <div class="balloon balloon-left-2">
        <img src="/balloon1.png" alt="Balloon" class="w-32 h-auto" />
      </div>
      <div class="balloon balloon-right-1">
        <img src="/balloon1.png" alt="Balloon" class="w-32 h-auto" />
      </div>
      <div class="balloon balloon-right-2">
        <img src="/balloon1.png" alt="Balloon" class="w-32 h-auto" />
      </div>
    </div>

    <!-- Card -->
    <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 z-20"
    >
      <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>

<style scoped>
.balloon-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

/* BALLOON STYLES */
.balloon {
  position: absolute;
  bottom: -150px;
  opacity: 0;
  animation: floatUp 12s ease-in-out infinite;
}

.balloon-left-1 {
  left: 8%;
  animation-delay: 0s;
}

.balloon-left-2 {
  left: 20%;
  animation-delay: 4s;
}

.balloon-right-1 {
  right: 8%;
  animation-delay: 2s;
}

.balloon-right-2 {
  right: 22%;
  animation-delay: 6s;
}

/* FLOAT UP ANIMATION */
@keyframes floatUp {
  0% {
    transform: translateY(0) scale(0.8) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    transform: translateY(-60vh) scale(1) rotate(10deg);
    opacity: 0.9;
  }
  80% {
    transform: translateY(-80vh) scale(1.1) rotate(-10deg);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100vh) scale(1.2) rotate(15deg);
    opacity: 0;
  }
}
</style>
