<!-- components/templates/UltahStarter/Landing.vue -->
<template>
  <section
    class="relative flex flex-col items-center justify-center text-center h-screen w-screen text-white bg-gradient-to-b from-red-800 via-blue-900 to-black overflow-hidden"
  >
    <!-- 🕸️ BACKGROUND SPIDER WEB -->
    <div class="absolute inset-0 opacity-15 animate-spin-slow">
      <svg
        viewBox="0 0 500 500"
        xmlns="http://www.w3.org/2000/svg"
        class="w-full h-full"
      >
        <g stroke="white" stroke-width="0.4" fill="none">
          <circle cx="250" cy="250" r="60" />
          <circle cx="250" cy="250" r="120" />
          <circle cx="250" cy="250" r="180" />
          <circle cx="250" cy="250" r="240" />
          <circle cx="250" cy="250" r="300" />
          <line x1="250" y1="0" x2="250" y2="500" />
          <line x1="0" y1="250" x2="500" y2="250" />
          <line x1="125" y1="0" x2="375" y2="500" />
          <line x1="375" y1="0" x2="125" y2="500" />
        </g>
      </svg>
    </div>

    <!-- 🕷️ SPIDER ICON -->
    <div class="text-8xl mb-6 animate-pulse-slow drop-shadow-lg">🕷️</div>

    <!-- 🎉 TITLE -->
    <h1
      class="text-5xl md:text-6xl font-extrabold mb-6 text-red-400 drop-shadow-[0_0_12px_rgba(255,0,0,0.7)] animate-fade-down"
    >
      🕸️ Spider-Man Birthday Invitation 🕸️
    </h1>

    <!-- 👋 GREETING -->
    <p class="text-xl mb-4 font-semibold animate-fade-up">
      Halo,
      <span class="text-red-300 font-bold">
        {{ guestName || 'Friendly Neighborhood Guest' }}
      </span>!
    </p>

    <!-- 🕶️ EVENT INTRO -->
    <p
      class="text-2xl font-bold mb-10 text-yellow-100 drop-shadow-md animate-fade-up-delay"
    >
      Bergabunglah dalam petualangan ulang tahun ! 🎭
    </p>

    <!-- 🔘 BUTTON -->
    <button
      @click="$emit('open-invitation')"
      class="relative bg-gradient-to-r from-red-600 to-blue-600 text-white font-bold py-4 px-10 rounded-full shadow-2xl border-2 border-white/40 overflow-hidden group transition-all duration-300 hover:scale-110"
    >
      <span class="relative z-10">🕷️ Buka Undangan 🕸️</span>
      <div
        class="absolute inset-0 bg-white/25 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700"
      ></div>
    </button>
  </section>
</template>

<script setup>
defineProps({
  guestName: String,
  childName: String
})
</script>

<style scoped>
/* ───────────── Animations ───────────── */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pulse-slow {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@keyframes fade-down {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fade-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Utility classes */
.animate-spin-slow { animation: spin-slow 40s linear infinite; }
.animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }
.animate-fade-down { animation: fade-down 1s ease-out; }
.animate-fade-up { animation: fade-up 1.2s ease-out; }
.animate-fade-up-delay { animation: fade-up 1.8s ease-out; }

/* Pastikan layar penuh */
:host, html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
</style>
