<template>
  <section class="min-h-screen flex flex-col items-center justify-center bg-blue-50 text-center px-6">
    <div class="max-w-2xl bg-white rounded-2xl shadow-lg p-8 space-y-4">
      <h2 class="text-2xl font-bold text-blue-700 mb-4">📅 Acara Tasyakuran</h2>

      <p><strong>Hari & Tanggal:</strong> {{ hari_tanggal_acara }}</p>
      <p><strong>Waktu:</strong> {{ waktu }}</p>
      <p><strong>Alamat:</strong> {{ alamat }}</p>

      <a
        v-if="link_gmaps"
        :href="link_gmaps"
        target="_blank"
        class="inline-block mt-4 text-blue-600 font-semibold underline hover:text-blue-800"
      >
        Lihat di Google Maps
      </a>
    </div>
  </section>
</template>

<script setup>
defineProps({
  hari_tanggal_acara: String,
  waktu: String,
  alamat: String,
  link_gmaps: String
})
</script>
