<template>
  <div
    class="h-screen w-full relative bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 overflow-hidden"
  >
   <!-- 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">
            Introduction
          </h1>
        </div>
        

    <!-- Background Pattern -->
    <div class="absolute inset-0 bg-pattern opacity-30"></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 shadow-lg">
        <img
          :src="getFullPhotoUrl(childPhoto)"
          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">
          {{ form.nama_lengkap || 'Nama Anak' }}
        </h1>
      </div>

      <!-- Child Order -->
      <div v-if="form.anak_ke" class="text-white/80 text-lg mb-2">
        Putra ke {{ form.anak_ke }} dari
      </div>
      <div v-else class="text-white/80 text-lg mb-2">
        Putra dari
      </div>

      <!-- Parents -->
      <div class="text-yellow-400 font-semibold text-xl">
        {{ form.nama_bapak || 'Nama Ayah' }} & {{ form.nama_ibu || 'Nama Ibu' }}
      </div>
    </div>
  </div>
  </div>
        </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRuntimeConfig } from '#app'

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

const config = useRuntimeConfig()
const backendUrl = config.public.apiBaseUrl

// ============ FOTO ANAK ============
const childPhoto = computed(() => {
  const fotoPertama = props.form?.foto?.[3]
  return fotoPertama || ''
})

// ============ FORMAT URL FOTO ============
const getFullPhotoUrl = (photo) => {
  if (!photo) return '/pria.jpg'
  if (photo.startsWith('http')) return photo
  if (photo.startsWith('/storage')) return `${backendUrl}${photo}`
  return `${backendUrl}/storage/${photo}`
}
</script>

<style scoped>
.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>
