<template>
  <section
    class="relative w-full h-screen flex flex-col justify-center items-center overflow-hidden text-center bg-gradient-to-b from-purple-900 via-red-900 to-black text-white px-6"
  >
    <!-- Judul -->
    <h1 class="text-4xl md:text-5xl font-extrabold text-yellow-400 drop-shadow-lg mb-6">
      Detail Petualangan
    </h1>

    <!-- Kotak konten utama -->
    <div
      class="bg-black/60 rounded-2xl p-6 md:p-8 w-full max-w-2xl shadow-[0_0_25px_rgba(255,255,255,0.1)] flex flex-col gap-4"
    >
      <!-- Hari & Tanggal -->
      <div class="flex items-center gap-4 border border-red-600 rounded-lg p-4 bg-gradient-to-r from-red-800/40 to-red-900/30">
        <div class="text-3xl">📅</div>
        <div class="text-left">
          <h2 class="font-semibold text-red-400">Hari & Tanggal</h2>
          <p class="text-white font-medium">{{ hari_tanggal_acara }}</p>
        </div>
      </div>

      <!-- Waktu -->
      <div class="flex items-center gap-4 border border-blue-600 rounded-lg p-4 bg-gradient-to-r from-blue-800/40 to-blue-900/30">
        <div class="text-3xl">⏰</div>
        <div class="text-left">
          <h2 class="font-semibold text-blue-400">Waktu Acara</h2>
          <p class="text-white font-medium">{{ waktu }}</p>
        </div>
      </div>

      <!-- Lokasi -->
      <div class="flex items-center gap-4 border border-yellow-600 rounded-lg p-4 bg-gradient-to-r from-yellow-800/40 to-yellow-900/30">
        <div class="text-3xl">📍</div>
        <div class="text-left">
          <h2 class="font-semibold text-yellow-400">Lokasi Petualangan</h2>
          <p class="text-white font-medium">{{ alamat }}</p>
        </div>
      </div>

      <!-- Tombol Maps -->
      <a
        :href="link_gmaps"
        target="_blank"
        class="mt-4 bg-gradient-to-r from-green-600 to-green-700 text-white px-6 py-3 rounded-full font-semibold hover:from-green-700 hover:to-green-800 transition-all duration-300 mx-auto flex items-center gap-2 justify-center"
      >
         🗺️ Buka Google Maps 
      </a>
    </div>

    <!-- Catatan -->
    <p
      class="mt-6 text-sm md:text-base italic text-yellow-300 max-w-2xl text-center leading-relaxed"
    >
      “Bersiaplah untuk berayun-ayun dalam keseruan! Kostum Spider-Man opsional tapi sangat disarankan!
      Jangan lupa bawa kekuatan super dan senyuman! 🕷️✨”
    </p>
  </section>
</template>

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

defineProps({
  hari_tanggal_acara: String,
  waktu: String,
  alamat: String,
  link_gmaps: String,
});

const showSpider = ref(false);

onMounted(() => {
  setTimeout(() => {
    showSpider.value = true;
  }, 2000);
});

const formatDate = (dateStr) => {
  if (!dateStr) return "Akan diumumkan";
  try {
    const d = new Date(dateStr);
    return d.toLocaleDateString("id-ID", {
      weekday: "long",
      day: "numeric",
      month: "long",
      year: "numeric",
    });
  } catch {
    return dateStr;
  }
};
</script>

<style scoped>
/* 🕸️ Animasi Spider-Man */
@keyframes float-slow {
  0%, 100% {
    transform: translateY(0px) scaleX(-1);
  }
  50% {
    transform: translateY(-25px) scaleX(-1);
  }
}
.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}

/* 🕷️ Transisi Spider muncul */
.fade-slide-enter-active {
  transition: all 1s ease;
}
.fade-slide-enter-from {
  opacity: 0;
  transform: translateY(-40px);
}

/* 🕷️ Bounce kecil */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
.animate-bounce {
  animation: bounce 2s ease-in-out infinite;
}

/* 📱 Responsif untuk HP */
@media (max-width: 768px) {
  img[alt="Spider-Man"] {
    width: 6rem !important;
    bottom: 3%;
    left: 4%;
    opacity: 0.6;
  }
}
</style>
