<template>
  <section class="relative w-full max-w-6xl mx-auto text-center px-4 overflow-visible">
    <h1 class="text-orange-700 text-3xl md:text-4xl font-bold mb-8">
      Galeri Foto
    </h1>

    <!-- Grid Galeri -->
    <div v-if="images && images.length" class="grid grid-cols-2 md:grid-cols-3 gap-4 relative z-10">
      <img
        v-for="(img, index) in images"
        :key="index"
        :src="img"
        alt="gallery"
        class="rounded-xl shadow-lg object-cover h-48 w-full hover:scale-105 transition-transform duration-300"
      />
    </div>

    <div v-else class="text-orange-800 bg-yellow-100 py-8 rounded-2xl shadow-inner relative z-10">
      <p class="text-lg font-semibold">Belum ada foto untuk ditampilkan</p>
    </div>
  </section>

  <!-- 🟡 Minion Kanan Atas (Gelantungan) -->
  <img
    src="/minion5e.png"
    alt="Minion kanan"
    class="fixed top-0 right-0 w-32 md:w-64 drop-shadow-xl animate-hang z-50 translate-x-[20%] -translate-y-[2%]"
  />

  <!-- 🟡 Minion Kiri Bawah -->
  <img
    src="/minion4.png"
    alt="Minion kiri"
    class="fixed bottom-0 left-0 w-43 md:w-64 drop-shadow-xl animate-wave z-50 -translate-x-[15%] translate-y-[5%]"
  />
</template>

<script setup>
const props = defineProps({
  images: {
    type: Array,
    required: true
  }
})
</script>

<style scoped>
/* 🪄 Animasi Minion Gelantungan (kanan atas) */
@keyframes hang {
  0%, 100% {
    transform: rotate(4deg) translateY(0);
  }
  50% {
    transform: rotate(-4deg) translateY(6px);
  }
}

/* 🪄 Animasi Minion Melambai (kiri bawah) */
@keyframes wave {
  0%, 100% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
}

.animate-hang {
  animation: hang 3s ease-in-out infinite;
  transform-origin: top center;
}

.animate-wave {
  animation: wave 4s ease-in-out infinite;
  transform-origin: bottom left;
}
</style>
