<template>
  <div
    class="min-h-screen w-full relative bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 overflow-hidden"
  >
    <!-- 🌙 Background Pattern -->
    <div class="absolute inset-0 bg-pattern opacity-20"></div>

  <!-- Kubah Decorations -->
   <div class="absolute top-0 left-8 md:left-32 w-16 md:w-34 kubah-swing animation-delay-300">
  <img src="/kubah.png" alt="Kubah" class="w-full h-auto opacity-80" />
</div>
<div class="absolute top-0 right-8 md:right-22 w-16 md:w-44 kubah-swing animation-delay-600">
  <img src="/kubah.png" alt="Kubah" class="w-full h-auto opacity-80" />
</div>

    <!-- 🌸 Main Content -->
    <div class="relative z-10 min-h-screen flex items-center justify-center px-4 md:px-8 py-12">
      <div class="text-center max-w-4xl mx-auto">
        <!-- Title -->
        <div class="mb-10 animate-fade-in-down">
          <h1
            class="text-yellow-400 text-3xl md:text-5xl lg:text-6xl font-bold mb-4 md:mb-6 font-script"
          >
            Terima Kasih
          </h1>
          <p
            class="text-white text-sm md:text-base lg:text-lg leading-relaxed max-w-3xl mx-auto"
          >
            Kami mengucapkan terima kasih atas kehadiran serta doa restu yang diberikan untuk
            <span class="text-yellow-400 font-semibold">{{
              jsonData.nama_panggilan || "putra kami"
            }}</span>.
            Semoga Allah SWT senantiasa melimpahkan rahmat dan keberkahan kepada kita semua.
          </p>
        </div>

        <!-- Family Info -->
        <div class="mb-12 animate-fade-in-up animation-delay-300">
          <h2
            class="text-yellow-400 text-xl md:text-2xl lg:text-3xl font-bold mb-6 md:mb-8"
          >
            Kami Keluarga Besar Dari
          </h2>
          <div class="space-y-4 md:space-y-6">
            <div
              class="bg-white/10 backdrop-blur-md rounded-2xl p-4 md:p-6 border border-yellow-400/30 shadow-lg animate-fade-in-up animation-delay-500"
            >
              <div
                class="text-yellow-400 text-base md:text-lg font-semibold mb-2"
              >
                {{ jsonData.nama_bapak || "Bpk H. Munawar Huda, S.H." }} &
                {{ jsonData.nama_ibu || "Ibu Hj. Dinah, A.M.Keb" }}
              </div>
            </div>
          </div>
        </div>

        <!-- Final Message -->
        <div class="animate-fade-in-up animation-delay-1200">
          <div
            class="bg-gradient-to-r from-yellow-400/20 to-yellow-600/20 backdrop-blur-md rounded-2xl p-6 md:p-8 border border-yellow-400/50 shadow-lg"
          >
            <p class="text-white text-base md:text-lg font-medium mb-4 italic">
              "Dan Allah telah mengeluarkan kamu dari perut ibumu dalam keadaan
              tidak mengetahui sesuatupun..."
            </p>
            <p class="text-yellow-400 text-sm md:text-base font-semibold">
              - QS. An-Nahl: 78
            </p>
          </div>
        </div>

        <!-- Social Media Links -->
 <!-- Social Media Links -->
<div
  class="mt-10 md:mt-12 animate-fade-in-up animation-delay-1500 flex justify-center space-x-4 md:space-x-6"
>
  <a
    v-if="jsonData.link_instagram"
    :href="jsonData.link_instagram"
    target="_blank"
    rel="noopener noreferrer"
    class="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full backdrop-blur-md border border-yellow-400/30 hover:border-yellow-400/60 hover:bg-white/20 transition-all duration-300 transform hover:scale-110"
    aria-label="Instagram"
  >
    <Icon
      name="lucide:instagram"
      class="w-5 h-5 md:w-6 md:h-6 text-yellow-400"
    />
  </a>

  <a
    v-if="jsonData.link_facebook"
    :href="jsonData.link_facebook"
    target="_blank"
    rel="noopener noreferrer"
    class="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full backdrop-blur-md border border-yellow-400/30 hover:border-yellow-400/60 hover:bg-white/20 transition-all duration-300 transform hover:scale-110"
    aria-label="Facebook"
  >
    <Icon
      name="lucide:facebook"
      class="w-5 h-5 md:w-6 md:h-6 text-yellow-400"
    />
  </a>

  <a
    v-if="jsonData.link_twitter"
    :href="jsonData.link_twitter"
    target="_blank"
    rel="noopener noreferrer"
    class="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full backdrop-blur-md border border-yellow-400/30 hover:border-yellow-400/60 hover:bg-white/20 transition-all duration-300 transform hover:scale-110"
    aria-label="Twitter"
  >
    <Icon
      name="lucide:twitter"
      class="w-5 h-5 md:w-6 md:h-6 text-yellow-400"
    />
  </a>
</div>

      </div>
    </div>

    <!-- Footer -->
    <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 z-10">
      <p class="text-white/60 text-xs text-center">
        © {{ currentYear }} - Invitation Template
      </p>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

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

const currentYear = computed(() => new Date().getFullYear());
</script>

<style scoped>
/* =========================
   🎨 Background Pattern
========================= */
.bg-pattern {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='pattern' x='0' y='0' width='20' height='20' patternUnits='userSpaceOnUse'><path d='M10 5 L15 10 L10 15 L5 10 Z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/></pattern></defs><rect width='100' height='100' fill='url(%23pattern)'/></svg>");
}

/* =========================
   ✨ General Animations
========================= */
.animate-sway {
  animation: sway 3s ease-in-out infinite;
}

@keyframes sway {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* =========================
   🕌 Smooth Kubah Swing
========================= */
.kubah-swing {
  animation: kubahSwingSmooth 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform-origin: top center;
}

@keyframes kubahSwingSmooth {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(2.5deg); }
  40% { transform: rotate(-2.5deg); }
  60% { transform: rotate(2deg); }
  80% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

/* =========================
   ✨ Fade Animations
========================= */
.animate-fade-in-down {
  animation: fadeInDown 1s ease-out forwards;
}
.animate-fade-in-up {
  animation: fadeInUp 1s ease-out forwards;
}
.animate-fade-in-left {
  animation: fadeInLeft 1s ease-out forwards;
}
.animate-fade-in-right {
  animation: fadeInRight 1s ease-out forwards;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* =========================
   ⏱️ Delay Utilities
========================= */
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-1000 { animation-delay: 1s; }

/* =========================
   🕌 Font Arabic
========================= */
.arabic-text {
  font-family: 'Noto Naskh Arabic', serif;
}
</style>
