<template>
  <section
    class="relative min-h-screen w-full flex flex-col items-center justify-center text-center text-white overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900"
  >
    <!-- 🌟 Bintang & Partikel -->
    <div class="absolute inset-0 overflow-hidden z-0">
      <div
        v-for="(star, i) in stars"
        :key="i"
        class="absolute bg-white rounded-full animate-twinkle"
        :style="{
          top: star.top + '%',
          left: star.left + '%',
          width: star.size + 'px',
          height: star.size + 'px',
          animationDelay: star.delay + 's',
          opacity: star.opacity
        }"
      ></div>
    </div>

    <!-- 🌈 Aurora / Cahaya -->
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500/10 via-purple-600/20 to-pink-500/10 blur-3xl"></div>

    <!-- ☁️ Awan lembut -->
    <div class="absolute bottom-10 left-[-100px] w-[300px] h-[120px] bg-white/10 rounded-full blur-2xl animate-cloud-slow"></div>
    <div class="absolute top-20 right-[-120px] w-[350px] h-[150px] bg-white/10 rounded-full blur-3xl animate-cloud-medium"></div>

    <!-- 📸 Judul -->
    <h2
      class="relative z-10 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"
    >
      📸 Galeri
    </h2>

    <!-- 🖼️ Grid Galeri -->
    <div
      class="relative z-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8 max-w-6xl mx-auto px-6 sm:px-8 animate-fade-in-slow"
    >
      <div
        v-for="(img, index) in images"
        :key="index"
        class="group relative overflow-hidden rounded-3xl shadow-[0_0_30px_rgba(255,255,255,0.15)] hover:shadow-[0_0_60px_rgba(255,255,255,0.25)] transition-all duration-700"
      >
        <!-- 🌠 Efek cahaya bawah -->
        <div
          class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-80 transition duration-500"
        ></div>

        <!-- 🖼️ Gambar -->
        <img
          :src="img"
          alt="Foto Galeri"
          class="w-full h-full object-cover rounded-3xl transform group-hover:scale-110 transition-all duration-700"
        />
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'
defineProps({ images: Array })

// 🌟 Generate bintang acak
const stars = ref([])

const generateStars = () => {
  const count = 70
  const temp = []
  for (let i = 0; i < count; i++) {
    temp.push({
      top: Math.random() * 100,
      left: Math.random() * 100,
      size: Math.random() * 2 + 1,
      delay: Math.random() * 5,
      opacity: Math.random() * 0.8 + 0.2
    })
  }
  stars.value = temp
}

onMounted(() => generateStars())
</script>

<style scoped>
/* ✨ Efek Fade In */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fade-in 1.2s 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.5s ease-out;
}

/* 🌟 Animasi bintang berkedip */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}
.animate-twinkle {
  animation: twinkle 3.5s ease-in-out infinite;
}

/* ☁️ Animasi awan lembut */
@keyframes cloud-slow {
  0% { transform: translateX(0); }
  50% { transform: translateX(40px); }
  100% { transform: translateX(0); }
}
.animate-cloud-slow {
  animation: cloud-slow 18s ease-in-out infinite;
}

@keyframes cloud-medium {
  0% { transform: translateX(0); }
  50% { transform: translateX(-60px); }
  100% { transform: translateX(0); }
}
.animate-cloud-medium {
  animation: cloud-medium 22s ease-in-out infinite;
}

/* 📱 Responsif */
@media (max-width: 640px) {
  h2 {
    font-size: 2rem;
  }
  .grid {
    gap: 1.2rem;
  }
}
</style>
