<template>
  <div class="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-30"></div>

    <!-- Main Content -->
    <div class="relative z-10 h-full flex items-center justify-center px-6">
      <div class="text-center max-w-4xl mx-auto">
        <!-- Title -->
        <div class="mb-12 animate-fade-in-down">
          <h1 class="text-yellow-400 text-4xl md:text-6xl font-bold mb-6 font-script">Terimakasih</h1>
          <p class="text-white text-lg md:text-xl leading-relaxed max-w-3xl mx-auto">
            Kami mengucapkan terima kasih atas kehadiran serta doa restu
            yang diberikan. 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-2xl md:text-3xl font-bold mb-8">Kami Keluarga Besar Dari</h2>
          <div class="space-y-6">
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-yellow-400/30 animate-fade-in-up animation-delay-500">
              <div class="text-yellow-400 text-lg font-semibold mb-2">
                {{ data.fatherName || 'Bpk H. Munawar Huda, S.H.' }} & {{ data.motherName || 'Ibu Hj. Dinah, A.M.Keb' }}
              </div>
              <div class="text-white/80 text-sm">
                {{ data.fatherDescription || '(Anggota DPRD Provinsi Banten Fraksi Partai Demokrat)' }}
              </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-sm rounded-2xl p-8 border border-yellow-400/50">
            <p class="text-white text-lg md:text-xl font-medium mb-4 italic">
              "Dan Allah telah mengeluarkan kamu dari perut ibumu dalam keadaan tidak mengetahui sesuatupun..."
            </p>
            <p class="text-yellow-400 font-semibold">- QS. An-Nahl: 78</p>
          </div>
        </div>

        <!-- Social -->
        <div class="mt-12 animate-fade-in-up animation-delay-1500 flex justify-center space-x-6">
          <a href="https://instagram.com/abbauftech" target="_blank" rel="noopener noreferrer"
             class="rounded-full p-3 backdrop-blur-sm 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-6 h-6 text-yellow-400" />
          </a>
          <a href="#" class="rounded-full p-3 backdrop-blur-sm 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-6 h-6 text-yellow-400" />
          </a>
          <a href="#" class="rounded-full p-3 backdrop-blur-sm border border-yellow-400/30 hover:border-yellow-400/60 hover:bg-white/20 transition-all duration-300 transform hover:scale-110" aria-label="WhatsApp">
            <Icon name="lucide:message-circle" class="w-6 h-6 text-yellow-400" />
          </a>
        </div>
      </div>
    </div>

    <!-- Copyright -->
    <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 { ref, onMounted, computed } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

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

<style scoped>
/* Animations & bg-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>");
}

/* Tambahkan animasi sesuai kebutuhan */
.animate-fade-in-up {
  animation: fadeInUp 1s forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 1s forwards;
}

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

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