<template>
    <div
      class="min-h-screen bg-gradient-to-b from-blue-100 via-blue-200 to-blue-300 relative overflow-hidden"
    >
      <!-- ================= NAVIGATION ================= -->
      <nav
        v-if="currentSection !== 'landing'"
        class="absolute top-4 left-1/2 transform -translate-x-1/2 z-20"
      >
        <ul
          class="flex space-x-6 bg-white/40 backdrop-blur-md px-6 py-3 rounded-full shadow-md text-sm font-semibold text-gray-800"
        >
          <li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
          <li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
          <li><button @click="switchSection('gallery')" :class="navClass('gallery')">Gallery</button></li>
          <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
        </ul>
      </nav>
  
      <!-- ================= MUSIK CONTROL ================= -->
      <div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
        <button @click="toggleMusic" class="bg-blue-600 p-3 rounded-full text-white shadow-lg">
          {{ isPlaying ? '⏸️' : '▶️' }}
        </button>
        <audio ref="audioPlayer" :src="musicUrl" loop></audio>
      </div>
  
      <!-- ================= MAIN CONTENT ================= -->
      <main
        class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
      >
        <!-- Landing Page -->
        <KhitanAStarter
          v-if="currentSection === 'landing'"
          :childName="formData.nama_lengkap"
          :guestName="data.nama_tamu"
          @next-page="switchSection('introduction')"
        />
  
        <!-- Introduction -->
        <KhitanIntroductionStarter
          v-if="currentSection === 'introduction'"
          :nama_lengkap="formData.nama_lengkap"
          :nama_bapak="formData.nama_bapak"
          :nama_ibu="formData.nama_ibu"
        />
  
        <!-- Event -->
        <KhitanEventStarter
          v-if="currentSection === 'event'"
          :hari_tanggal_acara="formData.hari_tanggal_acara"
          :waktu="formData.waktu"
          :alamat="formData.alamat"
        />
  
        <!-- Gallery -->
        <KhitanGalleryStarter
          v-if="currentSection === 'gallery'"
          :images="galleryImages"
        />
  
        <!-- Thank You -->
        <KhitanThankYouStarter
          v-if="currentSection === 'thanks'"
          :childName="formData.nama_lengkap"
          :jsonData="formData"
        />
      </main>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { useRuntimeConfig } from '#app'
  
  // ================== IMPORT KOMPONEN ==================
  import KhitanAStarter from '~/components/templates/KhitanStarter/KhitanA.vue'
  import KhitanIntroductionStarter from '~/components/templates/KhitanStarter/Introduction.vue'
  import KhitanEventStarter from '~/components/templates/KhitanStarter/Event.vue'
  import KhitanGalleryStarter from '~/components/templates/KhitanStarter/Gallery.vue'
  import KhitanThankYouStarter from '~/components/templates/KhitanStarter/ThankYou.vue'
  
  // ================== PROPS ==================
  const props = defineProps({
    data: { type: Object, required: true }
  })
  
  // ================== BACKEND CONFIG ==================
  const config = useRuntimeConfig()
  const backendUrl = config.public.apiBaseUrl
  
  // ================== FORM DATA ==================
  const formData = computed(() => props.data.form || {})
  
  // ================== GALERI ==================
  const galleryImages = computed(() => {
    const f = formData.value
    return [f.foto_1, f.foto_2].filter(Boolean).map(img => `${backendUrl}/${img}`)
  })
  
  // ================== NAVIGASI SECTION ==================
  const currentSection = ref('landing')
  const switchSection = (s) => (currentSection.value = s)
  
  // ================== MUSIK ==================
  const audioPlayer = ref(null)
  const isPlaying = ref(false)
  const musicUrl = computed(() =>
    formData.value.link_music ? `${backendUrl}/${formData.value.link_music}` : ''
  )
  
  const toggleMusic = () => {
    if (!audioPlayer.value) return
    if (isPlaying.value) {
      audioPlayer.value.pause()
    } else {
      audioPlayer.value.play()
    }
    isPlaying.value = !isPlaying.value
  }
  
  // ================== STYLE NAV ==================
  const navClass = (s) =>
    currentSection.value === s
      ? 'text-blue-800 underline'
      : 'hover:text-blue-700'
  </script>
  
  <style scoped>
  main {
    transition: all 0.7s ease-in-out;
  }
  </style>
  