<template>
  <section
    class="relative w-full min-h-screen bg-gradient-to-b from-blue-900 via-red-800 to-black text-white flex flex-col justify-center items-center overflow-hidden py-16 px-6"
  >
    <!-- Efek jaring latar -->
    <div class="absolute inset-0 opacity-10 pointer-events-none">
      <div class="absolute top-0 left-1/3 w-0.5 h-full bg-gradient-to-b from-blue-200 to-red-200"></div>
      <div class="absolute top-0 left-2/3 w-0.5 h-full bg-gradient-to-b from-blue-200 to-red-200"></div>
      <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.15),transparent_70%)]"></div>
    </div>

    <!-- Judul -->
    <div class="relative z-10 text-center mb-12">
      <h2
        class="text-5xl md:text-6xl font-extrabold text-yellow-300 drop-shadow-[0_0_10px_rgba(255,255,0,0.4)] tracking-tight"
      >
        🕸️ Galeri Petualangan 🕷️
      </h2>
      <p class="mt-3 text-base md:text-lg text-gray-200 italic tracking-wide">
        Momen seru para Spider-Hero yang tertangkap kamera!
      </p>
      <div class="w-32 h-1 bg-gradient-to-r from-red-500 to-blue-500 mx-auto mt-4 rounded-full"></div>
    </div>

    <!-- Grid Foto -->
    <div
      class="relative z-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"
    >
      <div
        v-for="(img, index) in images"
        :key="index"
        class="relative group rounded-2xl overflow-hidden shadow-[0_0_25px_rgba(255,255,255,0.15)] border border-white/10 bg-black/40 backdrop-blur-sm hover:shadow-[0_0_35px_rgba(255,0,0,0.4)] transition-all duration-500"
      >
        <!-- Gambar -->
        <img
          :src="img"
          alt="Foto"
          class="w-full h-72 object-cover transform group-hover:scale-110 transition-transform duration-700 ease-out"
        />

        <!-- Overlay hover -->
        <div
          class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 flex flex-col items-center justify-end pb-5"
        >
          <span class="text-yellow-300 font-semibold text-lg mb-1 drop-shadow-md">Photo {{ index + 1 }}</span>
          <span class="text-sm text-gray-200">🕷️ Klik untuk zoom</span>
        </div>

        <!-- Icon Spider -->
        <div
          class="absolute top-3 right-3 bg-gradient-to-r from-red-600 to-red-800 text-white px-3 py-1 rounded-full text-sm font-bold shadow-lg"
        >
          🕷️
        </div>
      </div>
    </div>

    <!-- Empty State -->
    <div
      v-if="images.length === 0"
      class="relative z-10 text-center mt-16 animate-pulse"
    >
      <div class="text-6xl mb-3">🕸️</div>
      <p class="text-xl font-semibold">Foto-foto sedang dalam petualangan...</p>
      <p class="text-yellow-300 mt-2">Mereka akan segera muncul!</p>
    </div>
  </section>
</template>

<script setup>
defineProps({
  images: {
    type: Array,
    default: () => []
  }
})
</script>

<style scoped>
/* Efek muncul halus untuk tiap foto */
.group {
  animation: fadeInUp 0.8s ease both;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsif tambahan */
@media (max-width: 640px) {
  h2 {
    font-size: 2.25rem;
  }
  img {
    height: 12rem;
  }
}
</style>
