<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-orange-300 to-yellow-400 text-white text-center p-8">
    <h2 class="text-4xl font-bold mb-4">Terima Kasih! 💖</h2>
    <p class="text-lg mb-2">Atas kehadiran dan doa untuk {{ childName }}</p>
    <p class="text-md mb-6">Semoga kebahagiaan selalu menyertai kita semua 🎉</p>

    <div class="bg-white/20 rounded-2xl p-4 shadow-md max-w-md">
      <p><strong>Nama Pemesan:</strong> {{ jsonData.nama_pemesan }}</p>
      <p><strong>Email:</strong> {{ jsonData.email }}</p>
      <p><strong>No Telepon:</strong> {{ jsonData.no_telepon }}</p>
    </div>

    <button
      @click="reloadPage"
      class="mt-8 bg-white text-orange-700 py-3 px-6 rounded-full font-semibold shadow hover:bg-yellow-100 transition"
    >
      💌 Kembali ke Awal
    </button>
  </div>
</template>

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

const reloadPage = () => {
  window.location.reload()
}
</script>
