<template>
  <section class="text-center space-y-4 p-6">
    <h2 class="text-3xl font-bold text-blue-700">Assalamu’alaikum Wr. Wb.</h2>
    <p class="text-gray-700">
      Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang Bapak/Ibu/Saudara/i
      untuk menghadiri acara khitanan putra kami:
    </p>
    <h3 class="text-4xl font-bold text-blue-800 mt-4">{{ form.nama_lengkap }}</h3>
    <p class="text-lg text-gray-600 italic">({{ form.nama_panggilan }})</p>

    <div class="mt-6">
      <p class="text-gray-700">
        Putra dari pasangan <span class="font-semibold">{{ form.nama_bapak }}</span> &
        <span class="font-semibold">{{ form.nama_ibu }}</span>
      </p>
    </div>

    <button
      class="mt-8 bg-blue-600 text-white px-6 py-2 rounded-full shadow-md hover:bg-blue-700"
      @click="$emit('next')"
    >
      Lanjut ke Acara →
    </button>
  </section>
</template>

<script setup>
defineProps({ form: Object })
</script>
