<template>
  <div class="flex flex-col items-center justify-center text-center p-6 space-y-8 max-w-2xl mx-auto relative overflow-hidden min-h-screen">
    <!-- 🎈 BALLOON BACKGROUND -->
    <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>

    <!-- 🎀 THANK YOU CARD -->
    <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent z-10">
      Terima Kasih! 🙏
    </h2>
    
    <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 space-y-6 z-10">
      <p class="text-lg text-gray-700">Sudah meluangkan waktu untuk melihat undangan ulang tahunku 💛</p>

      <p class="text-xl font-semibold text-gray-800">
        Salam hangat dari 
        <span class="bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent font-bold">
          {{ childName }}
        </span>
      </p>

      <div v-if="jsonData?.pesan_terimakasih" class="bg-gradient-to-r from-yellow-100 to-orange-100 p-6 rounded-xl border-l-4 border-orange-400">
        <p class="italic text-gray-600 text-lg">"{{ jsonData.pesan_terimakasih }}"</p>
      </div>

      <div v-if="jsonData?.rekening" class="bg-gradient-to-r from-green-100 to-emerald-100 p-6 rounded-xl border-l-4 border-green-400">
        <p class="text-gray-700 mb-2">🎁 Kirim hadiah ke rekening:</p>
        <p class="font-bold text-green-600 text-lg">{{ jsonData.rekening }}</p>
      </div>
    </div>

    <!-- EMOJI ANIMATION -->
    <div class="flex space-x-4 mt-6 z-10">
      <div class="animate-bounce">🎈</div>
      <div class="animate-bounce delay-100">🎁</div>
      <div class="animate-bounce delay-200">🍰</div>
      <div class="animate-bounce delay-300">🎉</div>
    </div>
  </div>
</template>

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

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

/* BALLOON ANIMATION */
.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;
}

@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>
