<template>
  <div>
    <!-- 🎈 Balon Background - Fixed di seluruh layar -->
    <div class="fixed inset-0 w-full h-full overflow-hidden z-0 pointer-events-none">
      <!-- Balon Kiri -->
      <img src="/balon1.png" alt="Balon" class="absolute w-26 animate-fly-slow" style="left: 5%; bottom: -150px;" />
      <img src="/balon2.png" alt="Balon" class="absolute w-24 animate-fly-medium delay-[0.5s]" style="left: 10%; bottom: -200px;" />
      <img src="/balon3.png" alt="Balon" class="absolute w-26 animate-fly-fast delay-[1s]" style="left: 2%; bottom: -250px;" />
      <img src="/balon1.png" alt="Balon" class="absolute w-24 animate-fly-slow delay-[1.5s]" style="left: 8%; bottom: -300px;" />
      
      <!-- Balon Kanan -->
      <img src="/balon2.png" alt="Balon" class="absolute w-26 animate-fly-medium" style="right: 5%; bottom: -150px;" />
      <img src="/balon3.png" alt="Balon" class="absolute w-24 animate-fly-slow delay-[1s]" style="right: 10%; bottom: -200px;" />
      <img src="/balon1.png" alt="Balon" class="absolute w-26 animate-fly-fast delay-[2s]" style="right: 2%; bottom: -250px;" />
      <img src="/balon2.png" alt="Balon" class="absolute w-24 animate-fly-slow delay-[2.5s]" style="right: 8%; bottom: -300px;" />
    </div>

    <!-- Container Konten Utama -->
    <div class="relative flex flex-col items-center text-center p-6 space-y-6 max-w-2xl mx-auto">
      <!-- Foto Anak -->
      <div class="relative z-10 mb-6 group transition-transform duration-500 hover:scale-105">
        <div class="absolute -inset-4 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full blur opacity-30 transition-all duration-500 group-hover:opacity-60 group-hover:blur-lg"></div>
        <img
          v-if="childPhoto"
          :src="childPhoto"
          alt="Foto Anak"
          class="relative w-48 h-48 rounded-full object-cover border-4 border-white shadow-2xl z-10 transition-all duration-500 group-hover:shadow-[0_0_25px_rgba(255,165,0,0.6)]"
        />
        <div
          v-else
          class="relative w-48 h-48 rounded-full bg-gradient-to-br from-yellow-200 to-orange-200 border-4 border-white shadow-2xl flex items-center justify-center z-10 transition-all duration-500 group-hover:shadow-[0_0_25px_rgba(255,165,0,0.6)]"
        >
          <span class="text-4xl">👶</span>
        </div>
      </div>

      <!-- Kartu Ucapan -->
      <div
        class="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-xl border border-yellow-100 z-10 transition-all duration-500 hover:scale-105 hover:shadow-[0_0_30px_rgba(255,200,0,0.4)]"
      >
        <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-4">
          Halo, Aku {{ childName }}
        </h2>
        <div class="space-y-3 text-gray-700">
          <p class="text-xl font-semibold">
            Usiaku kini <span class="text-orange-500">{{ age }}</span> tahun 🎉
          </p>
          <p class="text-gray-600">Putra/Putri dari</p>
          <p class="text-xl font-bold text-gray-800 bg-gradient-to-r from-orange-400 to-yellow-400 bg-clip-text text-transparent">
            {{ parentsName }}
          </p>
        </div>
        <p class="mt-6 text-lg text-gray-600 italic">
          Aku sangat senang jika kamu bisa hadir di pesta ulang tahunku!
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  childName: String,
  parentsName: String,
  age: [String, Number],
  childPhoto: String
})
</script>

<style scoped>
@keyframes flyUp {
  0% {
    transform: translateY(100vh) scale(0.9) rotate(0deg);
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(-110vh) scale(1.05) rotate(10deg);
    opacity: 0;
  }
}

/* 💨 Durasi lebih cepat agar terasa ramai */
.animate-fly-slow {
  animation: flyUp 8s linear infinite;
}

.animate-fly-medium {
  animation: flyUp 6s linear infinite;
}

.animate-fly-fast {
  animation: flyUp 4s linear infinite;
}

/* ⏱️ Delay singkat agar balon muncul hampir bersamaan */
.delay-\[0\.5s\] { animation-delay: 0.5s; }
.delay-\[1s\] { animation-delay: 1s; }
.delay-\[1\.5s\] { animation-delay: 1.5s; }
.delay-\[2s\] { animation-delay: 2s; }
.delay-\[2\.5s\] { animation-delay: 2.5s; }
</style>
