<template>
  <section
    class="min-h-screen bg-gradient-to-b from-yellow-400 to-yellow-500 flex flex-col lg:flex-row items-center justify-center px-8 md:px-16 relative overflow-hidden"
  >
    <!-- Left Side (Image) -->
    <div class="flex-1 relative mt-10 lg:mt-0 flex justify-center lg:justify-start">
      <img
        src="/minion1.png"
        alt="Character"
        class="w-64 md:w-80 lg:w-96 drop-shadow-2xl animate-bounce-slow"
      />
    </div>

    <!-- Right Side (Text) -->
    <div class="flex-1 text-center lg:text-left space-y-6 z-10 lg:pl-10">
      <h1 class="text-orange-700 text-xl md:text-2xl font-semibold">
        Rayakan Bersama Kami
      </h1>
      <h2
        class="text-blue-700 text-4xl md:text-6xl font-extrabold drop-shadow-md"
      >
        {{ childName }}
      </h2>
      <h3 class="text-orange-800 text-2xl md:text-4xl font-bold">
        Pesta Ulang Tahun
      </h3>

      <div
        class="bg-yellow-100/70 border border-yellow-300 shadow-md rounded-xl px-6 py-4 inline-block"
      >
        <p class="text-orange-700 text-lg">Kepada Yth.</p>
        <p class="text-orange-800 text-xl font-bold">{{ guestName || 'Tamu Undangan' }}</p>
      </div>

      <div>
        <button
          @click="$emit('open-invitation')"
          class="mt-6 bg-orange-600 hover:bg-orange-700 text-white px-8 py-3 rounded-full text-lg font-semibold shadow-lg transform hover:scale-105 transition-all"
        >
          Buka Undangan
        </button>
      </div>
    </div>

    <!-- Musik Icon -->
    <div class="absolute bottom-6 left-6">
      <button
        class="bg-orange-700/80 p-3 rounded-full text-white shadow-lg hover:scale-110 transition-transform"
      >
        🎵
      </button>
    </div>
  </section>
</template>

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

<style scoped>
@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.animate-bounce-slow {
  animation: bounce-slow 3s infinite ease-in-out;
}
</style>