<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 lg:flex-row items-center justify-center overflow-hidden"
  >
    <!-- 🌐 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>

    <!-- 🕷️ Laba-laba animasi -->
    <div v-if="showSpider" class="absolute top-10 left-10 text-4xl animate-bounce hidden sm:block">🕷️</div>
    <div
      v-if="showSpider"
      class="absolute top-20 right-1/4 text-3xl animate-bounce hidden sm:block"
      style="animation-delay: 0.5s;"
    >🕸️</div>
    <div
      v-if="showSpider"
      class="absolute bottom-20 left-1/3 text-4xl animate-bounce hidden sm:block"
      style="animation-delay: 1s;"
    >🕷️</div>

    <!-- ================= FOTO SPIDERMAN (BACKGROUND UNTUK MOBILE) ================= -->
    <div class="absolute inset-0 lg:hidden pointer-events-none">
      <img
        src="/spiderman.png"
        alt="Spider-Man"
        class="absolute inset-0 w-full h-full object-cover object-center opacity-40"
        @error="onImageError"
      />
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
    </div>

    <!-- ================= KONTEN TEKS (KIRI) ================= -->
    <div
      class="relative z-10 w-full max-w-lg lg:w-1/2 min-h-[50vh] flex flex-col justify-center items-center text-center px-6 lg:px-12 py-12 space-y-8"
    >
      <div class="text-5xl sm:text-6xl animate-bounce">🕷️</div>

      <h1
        class="text-3xl sm:text-5xl lg:text-6xl font-extrabold text-yellow-300 drop-shadow-[0_0_10px_rgba(255,255,0,0.4)]"
      >
        Terima Kasih! 💙❤️
      </h1>

      <p class="text-lg sm:text-2xl text-blue-200">
        Atas kehadiran dan doa <span class="text-yellow-300 font-semibold">spider-power</span> untuk
      </p>

      <p class="text-2xl sm:text-4xl font-bold text-yellow-300 bg-black/40 py-3 sm:py-4 px-6 sm:px-8 rounded-2xl border border-yellow-500/50">
        {{ childName }}
      </p>

      <div class="bg-black/50 backdrop-blur-lg rounded-2xl p-6 border border-red-500/50">
        <p class="text-base sm:text-lg italic leading-relaxed">
          "With great age comes great responsibility!  
          Semoga kebahagiaan selalu menyertai kita semua 🕸️"
        </p>
      </div>

      <!-- Tombol Kembali -->
      <button
        @click="reloadPage"
        class="w-full max-w-xs bg-gradient-to-r from-red-600 to-blue-600 text-white py-4 px-8 rounded-full font-bold shadow-2xl hover:from-red-700 hover:to-blue-700 transition-all duration-300 transform hover:scale-105 border-2 border-white/30 text-lg flex items-center justify-center gap-3"
      >
        <span class="text-2xl">🕸️</span>
        Kembali ke Awal
        <span class="text-2xl">🕷️</span>
      </button>
    </div>

    <!-- ================= FOTO SPIDERMAN (KANAN UNTUK DESKTOP) ================= -->
    <div
      class="hidden lg:flex absolute top-0 right-0 h-full w-1/2 justify-end items-center overflow-hidden"
    >
      <img
        src="/spiderman.png"
        alt="Spider-Man"
        class="h-full w-auto object-cover object-right transform translate-x-10"
        @error="onImageError"
      />
      <!-- Efek gradasi ke kiri -->
      <div class="absolute inset-0 bg-gradient-to-l from-black/80 via-black/50 to-transparent"></div>
    </div>
  </section>
</template>

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

defineProps({
  childName: String,
  jsonData: {
    type: Object,
    default: () => ({}),
  },
});

const showSpider = ref(false);

const reloadPage = () => window.location.reload();

const onImageError = (e) => {
  e.target.src =
    "https://images.unsplash.com/photo-1635805737707-575885ab0820?w=800&h=1000&fit=crop&auto=format";
  e.target.alt = "Spider-Man Character";
};

onMounted(() => {
  setTimeout(() => (showSpider.value = true), 1500);
});
</script>

<style scoped>
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.animate-bounce {
  animation: bounce 2s ease-in-out infinite;
}

/* Responsif tambahan agar spiderman selalu kanan dan proporsional */
@media (max-width: 1024px) {
  img[alt="Spider-Man"] {
    object-position: center right;
  }
}
</style>