<template>
  <div class="relative p-6 text-center max-w-6xl mx-auto">
    <!-- Gambar Happy Birthday di belakang -->
    <img
      src="/happy1.png"
      alt="Happy Birthday"
      class="absolute top-[-59%] left-1/2 transform w-80 md:w-96 opacity-90 z-0 animate-happy-drop"
    />

    <h2
      class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8 relative z-10"
    >
      📸 Galeri Foto 📸
    </h2>

    <!-- Grid galeri -->
    <div
      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 relative z-10"
    >
      <div
        v-for="(img, i) in images"
        :key="i"
        class="group relative overflow-hidden rounded-2xl shadow-lg transform hover:scale-105 transition-all duration-500"
      >
        <!-- Overlay saat hover -->
        <div
          class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10"
        ></div>

        <!-- Gambar -->
        <img
          :src="img"
          alt="Galeri"
          class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500"
        />

        <!-- Teks muncul saat hover -->
        <div
          class="absolute bottom-0 left-0 right-0 p-4 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 z-20"
        >
          <p class="font-semibold">Foto {{ i + 1 }}</p>
        </div>
      </div>
    </div>

    <!-- Pesan jika belum ada foto -->
    <div
      v-if="images.length === 0"
      class="bg-white/80 rounded-2xl p-8 shadow-lg relative z-10"
    >
      <p class="text-gray-600 text-lg">Belum ada foto yang diunggah</p>
    </div>
  </div>
</template>

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

<style scoped>
/* Animasi jatuh dari atas dan berayun ke kanan–kiri */
@keyframes happyDrop {
  0% {
    transform: translate(-50%, -200px) rotate(0deg);
    opacity: 0;
  }
  40% {
    transform: translate(-50%, 6px) rotate(4deg);
    opacity: 1;
  }
  60% {
    transform: translate(-50%, 0) rotate(-3deg);
  }
  100% {
    transform: translate(-50%, 0) rotate(0deg);
  }
}

@keyframes happySwing {
  0% {
    transform: translate(-50%, 0) rotate(0deg);
  }
  25% {
    transform: translate(-50%, 0) rotate(3deg);
  }
  50% {
    transform: translate(-50%, 0) rotate(0deg);
  }
  75% {
    transform: translate(-50%, 0) rotate(-3deg);
  }
  100% {
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.animate-happy-drop {
  animation: happyDrop 1.5s ease-out forwards, happySwing 4s ease-in-out infinite 1.5s;
  transform-origin: top center;
}
</style>
