<template>
  <section
    class="min-h-screen flex flex-col justify-center items-center text-center bg-gradient-to-br from-yellow-200 via-yellow-300 to-yellow-400 px-6 py-12 relative overflow-hidden"
  >
    <!-- Background Ornamen -->
    <div class="absolute inset-0 opacity-10 pointer-events-none">
      <div class="absolute top-10 left-10 w-24 h-24 bg-orange-500 rounded-full blur-2xl"></div>
      <div class="absolute bottom-10 right-10 w-32 h-32 bg-yellow-600 rounded-full blur-3xl"></div>
    </div>

    <!-- Konten Utama -->
    <div
      class="relative z-10 w-full max-w-3xl bg-white/60 backdrop-blur-md rounded-3xl shadow-2xl p-8 md:p-12 border border-yellow-200"
    >
      <h1 class="text-orange-700 text-4xl md:text-5xl font-extrabold mb-6 animate-fade-in">
        Terima Kasih
      </h1>

      <p
        class="text-orange-800 text-lg md:text-xl mb-8 leading-relaxed animate-fade-in delay-100"
      >
        Kehadiran dan doa restu Bapak/Ibu/Saudara/i merupakan kebahagiaan besar bagi kami.
      </p>

      <div
        class="bg-gradient-to-r from-yellow-300 to-yellow-400 rounded-3xl py-6 px-8 shadow-md animate-fade-in delay-200"
      >
        <p class="text-orange-700 font-bold text-2xl md:text-3xl mb-2">
          {{ jsonData.nama_bapak }} & {{ jsonData.nama_ibu }}
        </p>
        <p class="text-orange-800 text-lg">
          Orang Tua {{ jsonData.nama_panggilan }}
        </p>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  jsonData: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fade-in 0.8s ease-out forwards;
}
.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
</style>
