<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>

    <!-- Top Navigation Tabs -->
    <div class="absolute top-6 left-1/2 transform -translate-x-1/2 bg-white/20 backdrop-blur-sm rounded-full px-6 py-2 flex space-x-8 z-10">
      <span class="text-yellow-400 font-semibold cursor-pointer">Introduction</span>
      <span class="text-blue-100 cursor-pointer">Event</span>
      <span class="text-blue-100 cursor-pointer">Gallery</span>
      <span class="text-blue-100 cursor-pointer">Say</span>
      <span class="text-blue-100 cursor-pointer">Thank You</span>
    </div>

    <!-- Main Content -->
    <div class="relative z-10 h-full flex flex-col items-center justify-center px-6 text-center">
      
      <!-- Child Photo -->
      <div class="w-48 h-60 overflow-hidden rounded-t-3xl mx-auto mb-6">
        <img :src="data.childPhoto || '/pria.jpg'" alt="Child" class="w-full h-full object-cover"/>
      </div>

      <!-- Child Name -->
      <div class="bg-blue-800/50 border border-yellow-400 rounded-md px-6 py-2 mb-4 inline-block">
        <h1 class="text-yellow-400 font-bold text-xl">{{ data.childName || 'SATRIA HUDA DINATA' }}</h1>
      </div>

      <!-- Child Order & Parents -->
      <div class="text-white/80 text-lg mb-2">
        Putra Ke Dua Dari
      </div>
      <div class="text-yellow-400 font-semibold text-xl">
        {{ data.fatherName || 'Bpk H. Munawar Huda, S.H.' }} & {{ data.motherName || 'Ibu Hj. Dinah, A.M.Keb' }}
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style scoped>
/* Background Islamic 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="islamic" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"><g fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"><path d="M12.5 0 L25 12.5 L12.5 25 L0 12.5 Z M6.25 6.25 L18.75 6.25 L18.75 18.75 L6.25 18.75 Z"/><circle cx="12.5" cy="12.5" r="3"/></g></pattern></defs><rect width="100%" height="100%" fill="url(%23islamic)"/></svg>');
}
</style>
