<template>
  <section class="w-full max-w-6xl mx-auto">
    <div class="flex flex-col lg:flex-row items-center justify-between gap-8">
      <!-- Left Side -->
      <div class="flex-1 text-center lg:text-left">
        <h1 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
          Celebrate With Us
        </h1>
        <h2 class="text-blue-600 text-4xl md:text-6xl font-bold mb-4">
          {{ childName }}
        </h2>
        <h3 class="text-orange-700 text-2xl md:text-3xl font-bold mb-8">
          Birthday Party
        </h3>
        <div class="bg-yellow-300/60 backdrop-blur-sm rounded-2xl p-6 mb-8 inline-block">
          <p class="text-orange-800 text-lg mb-2">Kepada Yth.</p>
          <p class="text-orange-700 text-xl font-semibold">{{ guestName }}</p>
        </div>
        <button @click="$emit('open-invitation')"
          class="bg-orange-600 hover:bg-orange-700 text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg transform hover:scale-105 transition-all">
          Open Invitation
        </button>
      </div>
      <!-- Right Side -->
      <div class="flex-1 relative">
        <div class="relative w-full max-w-md mx-auto">
          <div class="bg-yellow-400 rounded-full w-64 h-64 mx-auto flex items-center justify-center border-4 border-yellow-600">
            <div class="text-center">
              <div class="w-20 h-20 bg-white rounded-full mx-auto mb-4 flex items-center justify-center border-4 border-gray-800">
                <div class="w-12 h-12 bg-yellow-600 rounded-full"></div>
              </div>
              <div class="text-gray-800 font-bold text-lg">Minions</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

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