<template>
<div class="flex items-center justify-center mt-10">
      <span class="w-20 h-px bg-orange-300"></span>
      <span class="mx-2 text-orange-400 text-2xl">🌸</span>
      <span class="w-20 h-px bg-orange-300"></span>
    </div>
  <div class="text-center py-10 bg-[#FFF8F0]">
    
    <!-- Judul -->
    <h2 class="text-2xl font-bold text-orange-500 mb-2">We Are Getting Married</h2>
    <p class="italic text-gray-700 mb-4">
      Assalamualaikum Warrohmatullah Wabarrokatuhu
    </p>
    <p class="text-gray-500 max-w-xl mx-auto mb-6">
      By asking for the grace and blessing of Allah SWT. We intend to hold a wedding
      celebration, which Allah SWT willing will be held on
    </p>

    <!-- Tanggal -->
    <h3 class="text-3xl font-semibold text-gray-700 mb-2">{{ formattedDate }}</h3>
    <p class="text-gray-400 mb-8">{{ location }}</p>

    <!-- Countdown -->
    <div class="flex justify-center space-x-4">
      <div v-for="(time, label) in countdown" :key="label"
        class="bg-white rounded-xl shadow-md w-20 h-24 flex flex-col items-center justify-center">
        <span class="text-2xl font-bold text-orange-500">{{ time }}</span>
        <span class="text-sm text-orange-400 uppercase">{{ label }}</span>
      </div>
    </div>

    <!-- Garis dekorasi bawah -->
    <div class="flex items-center justify-center mt-10">
      <span class="w-24 h-px bg-gray-300"></span>
      <span class="mx-2 text-orange-400 text-2xl">🌸</span>
      <span class="w-24 h-px bg-gray-300"></span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// lokasi & tanggal target
const location = "Bride's house"
const targetDate = new Date("2025-12-31T23:59:59").getTime()

const countdown = ref({
  H: 0, D: 0, M: 0, S: 0
})

const formattedDate = new Date("2025-12-31").toLocaleDateString("en-GB", {
  day: "2-digit", month: "long", year: "numeric"
})

onMounted(() => {
  setInterval(() => {
    const now = new Date().getTime()
    const distance = targetDate - now

    countdown.value.H = Math.floor(distance / (1000 * 60 * 60 * 24))
    countdown.value.D = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    countdown.value.M = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
    countdown.value.S = Math.floor((distance % (1000 * 60)) / 1000)
  }, 1000)
})
</script>
