<template>
  <section
    class="relative min-h-[80vh] flex flex-col items-center justify-center text-center text-white px-6 py-12 overflow-hidden"
  >
    <!-- 🌌 Efek Background -->
    <div class="absolute inset-0 bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 opacity-90"></div>
    <div class="absolute w-[500px] h-[500px] bg-purple-400/20 blur-[180px] rounded-full top-1/3 left-1/2 -translate-x-1/2"></div>

    <!-- 🌙 Judul -->
    <h2
      class="relative text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)] mb-10 animate-fade-in"
    >
      📅 Waktu & Tempat
    </h2>

    <!-- 💫 Konten utama -->
    <div
      class="relative flex flex-col items-center space-y-6 bg-white/10 backdrop-blur-2xl border border-white/20 px-10 py-12 rounded-[3rem] shadow-[0_0_40px_rgba(255,255,255,0.1)] hover:shadow-[0_0_60px_rgba(255,255,255,0.2)] transition-all duration-700 max-w-3xl w-full sm:w-[85%] md:w-[70%] animate-fade-in-slow"
    >
      <div class="space-y-5 text-lg sm:text-xl font-medium text-blue-100">
        <p class="flex flex-col items-center">
          <span class="text-yellow-300 font-semibold flex items-center gap-2">
            🗓️ Hari & Tanggal:
          </span>
          {{ hari_tanggal_acara }}
        </p>

        <p class="flex flex-col items-center">
          <span class="text-yellow-300 font-semibold flex items-center gap-2">
            ⏰ Waktu:
          </span>
          {{ waktu }}
        </p>

        <p class="flex flex-col items-center">
          <span class="text-yellow-300 font-semibold flex items-center gap-2">
            📍 Alamat:
          </span>
          {{ alamat }}
        </p>
      </div>

      <a
        v-if="link_gmaps"
        :href="link_gmaps"
        target="_blank"
        class="mt-4 inline-flex items-center justify-center gap-2 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold px-8 py-3 rounded-full shadow-lg transition-transform duration-300 hover:scale-105"
      >
        🗺️ Lihat di Google Maps
      </a>
    </div>

    <!-- ⏳ Hitung Mundur -->
    <div v-if="hitung_mundur" class="relative mt-12 text-center animate-fade-in-delay">
      <h3 class="font-semibold text-yellow-300 mb-3 text-lg sm:text-xl">
        Hitung Mundur Menuju Acara:
      </h3>
      <CountdownTimer :targetDate="hitung_mundur" />
    </div>
  </section>
</template>

<script setup>
import CountdownTimer from '~/components/templates/common/CountdownTimer.vue'

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

<style scoped>
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 1s ease-out; }

@keyframes fade-in-slow {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.animate-fade-in-slow { animation: fade-in-slow 1.3s ease-out; }

@keyframes fade-in-delay {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-delay { animation: fade-in-delay 1.8s ease-out; }

@media (max-width: 640px) {
  section {
    padding: 3rem 1.2rem;
  }
  h2 {
    font-size: 1.9rem;
  }
  .max-w-3xl {
    padding: 1.5rem;
    border-radius: 2rem;
  }
}
</style>
