<template>
  <div class="min-h-screen bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 relative overflow-hidden">
    <!-- Navigation (hanya muncul kalau bukan di landing) -->
    <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="currentSection='introduction'" :class="navClass('introduction')">Intro</button>
        </li>
        <li>
          <button @click="currentSection='event'" :class="navClass('event')">Event</button>
        </li>
        <li>
          <button @click="currentSection='galeri'" :class="navClass('galeri')">Gallery</button>
        </li>
        <li>
          <button @click="currentSection='say'" :class="navClass('say')">Guest Book</button>
        </li>
        <li>
          <button @click="currentSection='thanks'" :class="navClass('thanks')">Thanks</button>
        </li>
      </ul>
    </nav>

    <!-- Music Icon -->
    <div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
      <button @click="toggleMusic" class="bg-orange-600 p-3 rounded-full text-white shadow-lg">
        {{ isPlaying ? '⏸️' : '▶️' }}
      </button>
    </div>

    <!-- Main Content -->
    <main class="relative z-10 min-h-screen flex items-center justify-center p-4">
      <Landing v-if="currentSection==='landing'" 
               :childName="childName" 
               :guestName="guestName"
               @open-invitation="currentSection='introduction'" />

      <Introduction v-if="currentSection==='introduction'"
                    :age="age"
                    :childName="childName"
                    :childOrder="childOrder"
                    :parentNames="parentNames"
                    :childPhoto="childPhoto"/>

      <Event v-if="currentSection==='event'" />
      <Gallery v-if="currentSection==='galeri'" />
      <GuestBook v-if="currentSection==='say'" />
      <ThankYou v-if="currentSection==='thanks'" />
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Landing from '~/components/templates/Ultah/Landing.vue'
import Introduction from '~/components/templates/Ultah/Introduction.vue'
import Event from '~/components/templates/Ultah/Event.vue'
import Gallery from '~/components/templates/Ultah/Gallery.vue'
import GuestBook from '~/components/templates/Ultah/GuestBook.vue'
import ThankYou from '~/components/templates/Ultah/ThankYou.vue'

const childName = ref('Rayyanza Malik Ahmad')
const guestName = ref('Gempita Nora Marten')
const age = ref(4)
const childOrder = ref(2)
const parentNames = ref('Raffi Ahmad & Nagita Slavina')
const childPhoto = ref('')
const isPlaying = ref(false)
const currentSection = ref('landing')

const toggleMusic = () => { isPlaying.value = !isPlaying.value }

const navClass = (section) => {
  return currentSection.value === section
    ? 'text-orange-700 underline'
    : 'hover:text-orange-600'
}
</script>
