<template>
  <div class="min-h-screen bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 relative overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-10">
      <div class="absolute top-10 left-10 w-20 h-20 bg-yellow-600 rounded-full"></div>
      <div class="absolute top-32 right-20 w-16 h-16 bg-yellow-600 rounded-full"></div>
      <div class="absolute bottom-20 left-20 w-12 h-12 bg-yellow-600 rounded-full"></div>
      <div class="absolute bottom-40 right-40 w-24 h-24 bg-yellow-600 rounded-full"></div>
    </div>

    <!-- Navigation -->
    <nav class="relative z-20 bg-transparent border-b border-yellow-600/20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-center items-center h-16">
          <div class="hidden md:block">
            <div class="ml-10 flex items-baseline space-x-8">
              <a href="#introduction" @click="currentSection = 'introduction'" 
                 :class="currentSection === 'introduction' ? 'text-orange-600 font-bold border-b-2 border-orange-600' : 'text-orange-800 hover:text-orange-600'"
                 class="px-3 py-2 text-sm font-medium transition-colors">
                INTRODUCTION
              </a>
              <a href="#event" @click="currentSection = 'event'"
                 :class="currentSection === 'event' ? 'text-orange-600 font-bold border-b-2 border-orange-600' : 'text-orange-800 hover:text-orange-600'"
                 class="px-3 py-2 text-sm font-medium transition-colors">
                EVENT
              </a>
              <a href="#galeri" @click="currentSection = 'galeri'"
                 :class="currentSection === 'galeri' ? 'text-orange-600 font-bold border-b-2 border-orange-600' : 'text-orange-800 hover:text-orange-600'"
                 class="px-3 py-2 text-sm font-medium transition-colors">
                GALERI
              </a>
              <a href="#say" @click="currentSection = 'say'"
                 :class="currentSection === 'say' ? 'text-orange-600 font-bold border-b-2 border-orange-600' : 'text-orange-800 hover:text-orange-600'"
                 class="px-3 py-2 text-sm font-medium transition-colors">
                SAY?
              </a>
              <a href="#thanks" @click="currentSection = 'thanks'"
                 :class="currentSection === 'thanks' ? 'text-orange-600 font-bold border-b-2 border-orange-600' : 'text-orange-800 hover:text-orange-600'"
                 class="px-3 py-2 text-sm font-medium transition-colors">
                THANKS
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <!-- Mobile Navigation -->
    <div class="md:hidden bg-yellow-400/90 backdrop-blur-sm">
      <div class="px-2 pt-2 pb-3 space-y-1">
        <a href="#introduction" @click="currentSection = 'introduction'"
           :class="currentSection === 'introduction' ? 'bg-orange-600 text-white' : 'text-orange-800 hover:bg-orange-600 hover:text-white'"
           class="block px-3 py-2 text-base font-medium rounded-md transition-colors">
          INTRODUCTION
        </a>
        <a href="#event" @click="currentSection = 'event'"
           :class="currentSection === 'event' ? 'bg-orange-600 text-white' : 'text-orange-800 hover:bg-orange-600 hover:text-white'"
           class="block px-3 py-2 text-base font-medium rounded-md transition-colors">
          EVENT
        </a>
        <a href="#galeri" @click="currentSection = 'galeri'"
           :class="currentSection === 'galeri' ? 'bg-orange-600 text-white' : 'text-orange-800 hover:bg-orange-600 hover:text-white'"
           class="block px-3 py-2 text-base font-medium rounded-md transition-colors">
          GALERI
        </a>
        <a href="#say" @click="currentSection = 'say'"
           :class="currentSection === 'say' ? 'bg-orange-600 text-white' : 'text-orange-800 hover:bg-orange-600 hover:text-white'"
           class="block px-3 py-2 text-base font-medium rounded-md transition-colors">
          SAY?
        </a>
        <a href="#thanks" @click="currentSection = 'thanks'"
           :class="currentSection === 'thanks' ? 'bg-orange-600 text-white' : 'text-orange-800 hover:bg-orange-600 hover:text-white'"
           class="block px-3 py-2 text-base font-medium rounded-md transition-colors">
          THANKS
        </a>
      </div>
    </div>

    <!-- Music Icon -->
    <div class="fixed bottom-4 left-4 z-30">
      <button @click="toggleMusic" class="bg-orange-600 hover:bg-orange-700 text-white p-3 rounded-full shadow-lg transition-colors">
        <svg v-if="isPlaying" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
        </svg>
        <svg v-else class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
        </svg>
      </button>
    </div>

    <!-- Main Content -->
    <main class="relative z-10 min-h-screen flex items-center justify-center p-4">
      
      <!-- Landing Section -->
      <section v-if="currentSection === 'landing'" class="w-full max-w-6xl mx-auto">
        <div class="flex flex-col lg:flex-row items-center justify-between gap-8">
          
          <!-- Left Side Content -->
          <div class="flex-1 text-center lg:text-left">
            <h1 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
              Celebrate With Us
            </h1>
            <h2 class="text-blue-600 text-4xl md:text-6xl font-bold mb-4">
              {{ childName }}
            </h2>
            <h3 class="text-orange-700 text-2xl md:text-3xl font-bold mb-8">
              Birthday Party
            </h3>
            
            <div class="bg-yellow-300/60 backdrop-blur-sm rounded-2xl p-6 mb-8 inline-block">
              <p class="text-orange-800 text-lg mb-2">Kepada Yth.</p>
              <p class="text-orange-700 text-xl font-semibold">{{ guestName }}</p>
            </div>
            
            <button @click="openInvitation" class="bg-orange-600 hover:bg-orange-700 text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg transform hover:scale-105 transition-all">
              Open Invitation
            </button>
          </div>
          
          <!-- Right Side - Minions -->
          <div class="flex-1 relative">
            <div class="relative w-full max-w-md mx-auto">
              <!-- Minions Placeholder -->
              <div class="bg-yellow-400 rounded-full w-64 h-64 mx-auto flex items-center justify-center border-4 border-yellow-600">
                <div class="text-center">
                  <div class="w-20 h-20 bg-white rounded-full mx-auto mb-4 flex items-center justify-center border-4 border-gray-800">
                    <div class="w-12 h-12 bg-yellow-600 rounded-full"></div>
                  </div>
                  <div class="text-gray-800 font-bold text-lg">Minions</div>
                </div>
              </div>
              <!-- Additional minions -->
              <div class="absolute -left-8 top-16 w-20 h-20 bg-yellow-400 rounded-full border-2 border-yellow-600 flex items-center justify-center">
                <div class="w-6 h-6 bg-white rounded-full border border-gray-800"></div>
              </div>
              <div class="absolute -right-8 top-20 w-16 h-16 bg-yellow-400 rounded-full border-2 border-yellow-600 flex items-center justify-center">
                <div class="w-4 h-4 bg-white rounded-full border border-gray-800"></div>
              </div>
            </div>
          </div>
          
        </div>
      </section>

      <!-- Introduction Section -->
      <section v-if="currentSection === 'introduction'" class="w-full max-w-6xl mx-auto">
        <div class="flex flex-col lg:flex-row items-center justify-between gap-8">
          
          <!-- Left Side Content -->
          <div class="flex-1 text-center lg:text-left">
            <h1 class="text-orange-700 text-2xl md:text-3xl font-bold mb-6">
              Ulang Tahun Ke -{{ age }}
            </h1>
            <h2 class="text-orange-800 text-3xl md:text-5xl font-bold mb-6">
              {{ childName }}
            </h2>
            
            <h3 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
              Anak Ke -{{ childOrder }}
            </h3>
            <h4 class="text-orange-800 text-2xl md:text-3xl font-bold mb-8">
              {{ parentNames }}
            </h4>
            
            <!-- Minions Animation Area -->
            <div class="flex justify-center lg:justify-start gap-4 mb-8">
              <div class="w-20 h-20 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600 transform hover:scale-110 transition-transform">
                <div class="w-8 h-8 bg-white rounded-full border border-gray-800"></div>
              </div>
              <div class="w-20 h-20 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600 transform hover:scale-110 transition-transform">
                <div class="w-8 h-8 bg-white rounded-full border border-gray-800"></div>
              </div>
            </div>
          </div>
          
          <!-- Right Side - Child Photo -->
          <div class="flex-1">
            <div class="relative w-full max-w-md mx-auto">
              <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-8 shadow-xl">
                <img :src="childPhoto || '/assets/img/child-placeholder.jpg'" 
                     :alt="childName"
                     class="w-full h-80 object-cover rounded-2xl shadow-lg">
              </div>
            </div>
          </div>
          
        </div>
      </section>

      <!-- Event Section -->
      <section v-if="currentSection === 'event'" class="w-full max-w-6xl mx-auto">
        <div class="flex flex-col lg:flex-row gap-8">
          
          <!-- Left Side - Map -->
          <div class="flex-1">
            <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-6 shadow-xl">
              <div class="relative">
                <!-- Minion Peeking -->
                <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 z-10">
                  <div class="w-16 h-8 bg-yellow-400 rounded-t-full border-2 border-yellow-600 flex items-end justify-center">
                    <div class="w-4 h-4 bg-white rounded-full border border-gray-800 mb-1"></div>
                  </div>
                </div>
                
                <!-- Map Placeholder -->
                <div class="bg-gray-200 rounded-2xl h-64 flex items-center justify-center">
                  <div class="text-center">
                    <div class="text-gray-500 text-lg mb-2">📍 Location Map</div>
                    <div class="text-gray-400 text-sm">Google Maps Integration</div>
                  </div>
                </div>
                
                <button class="absolute bottom-4 left-4 bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg font-semibold">
                  Direction
                </button>
              </div>
            </div>
          </div>
          
          <!-- Right Side - Event Details -->
          <div class="flex-1">
            <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-6 shadow-xl">
              <!-- Minion Peeking -->
              <div class="absolute -top-8 right-8">
                <div class="w-16 h-8 bg-yellow-400 rounded-t-full border-2 border-yellow-600 flex items-end justify-center">
                  <div class="w-4 h-4 bg-white rounded-full border border-gray-800 mb-1"></div>
                </div>
              </div>
              
              <div class="relative">
                <h2 class="text-blue-600 text-2xl md:text-3xl font-bold mb-6 text-center">
                  BIRTHDAY PARTY
                </h2>
                
                <!-- Date and Time -->
                <div class="mb-6">
                  <div class="flex items-center gap-4 mb-2">
                    <span class="text-orange-700 text-xl font-bold">{{ eventDay }}</span>
                    <span class="text-orange-700 text-lg">{{ eventDate }}</span>
                    <span class="text-orange-700 text-lg">{{ eventTime }}</span>
                  </div>
                  <div class="text-orange-600 font-medium">{{ eventLocation }}</div>
                </div>
                
                <!-- Countdown -->
                <div class="grid grid-cols-4 gap-2 mb-6">
                  <div class="bg-orange-600 rounded-lg p-3 text-center text-white">
                    <div class="text-xl font-bold">{{ countdown.days }}</div>
                    <div class="text-xs">D</div>
                  </div>
                  <div class="bg-orange-600 rounded-lg p-3 text-center text-white">
                    <div class="text-xl font-bold">{{ countdown.hours }}</div>
                    <div class="text-xs">H</div>
                  </div>
                  <div class="bg-orange-600 rounded-lg p-3 text-center text-white">
                    <div class="text-xl font-bold">{{ countdown.minutes }}</div>
                    <div class="text-xs">M</div>
                  </div>
                  <div class="bg-orange-600 rounded-lg p-3 text-center text-white">
                    <div class="text-xl font-bold">{{ countdown.seconds }}</div>
                    <div class="text-xs">S</div>
                  </div>
                </div>
                
                <!-- Add to Calendar -->
                <button class="w-full bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg font-semibold">
                  Add to Calendar
                </button>
                
                <!-- Minions at bottom -->
                <div class="flex justify-center mt-6 gap-4">
                  <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
                    <div class="w-3 h-3 bg-white rounded-full border border-gray-800"></div>
                  </div>
                  <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
                    <div class="w-3 h-3 bg-white rounded-full border border-gray-800"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </section>

      <!-- Gallery Section -->
      <section v-if="currentSection === 'galeri'" class="w-full max-w-6xl mx-auto">
        <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-8 shadow-xl relative">
          
          <h2 class="text-orange-700 text-3xl md:text-4xl font-bold text-center mb-8">
            Galeri
          </h2>
          
          <!-- Photo Grid -->
          <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
            <div v-for="(photo, index) in galleryPhotos" :key="index" 
                 class="aspect-square bg-gray-200 rounded-xl overflow-hidden shadow-lg hover:scale-105 transition-transform">
              <img :src="photo || '/assets/img/gallery-placeholder.jpg'" 
                   :alt="`Gallery ${index + 1}`"
                   class="w-full h-full object-cover">
            </div>
          </div>
          
          <!-- Minions around gallery -->
          <div class="absolute -bottom-4 -left-4">
            <div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
              <div class="w-6 h-6 bg-white rounded-full border border-gray-800"></div>
            </div>
          </div>
          
          <div class="absolute -top-4 -right-4">
            <div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
              <div class="w-6 h-6 bg-white rounded-full border border-gray-800"></div>
            </div>
          </div>
          
          <div class="absolute bottom-8 right-8 flex gap-2">
            <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
              <div class="w-4 h-4 bg-white rounded-full border border-gray-800"></div>
            </div>
            <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
              <div class="w-4 h-4 bg-white rounded-full border border-gray-800"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- Say Something Section -->
      <section v-if="currentSection === 'say'" class="w-full max-w-6xl mx-auto">
        <div class="flex flex-col lg:flex-row gap-8">
          
          <!-- Left Side - Form -->
          <div class="flex-1">
            <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-8 shadow-xl relative">
              <!-- Minion Peeking -->
              <div class="absolute -top-8 left-8">
                <div class="w-16 h-8 bg-yellow-400 rounded-t-full border-2 border-yellow-600 flex items-end justify-center">
                  <div class="w-4 h-4 bg-white rounded-full border border-gray-800 mb-1"></div>
                </div>
              </div>
              
              <h3 class="text-orange-700 text-2xl font-bold mb-6">Say Something!</h3>
              
              <form @submit.prevent="submitMessage" class="space-y-4">
                <div>
                  <label class="text-orange-700 font-semibold mb-2 block">Nome</label>
                  <input v-model="guestMessage.name" 
                         type="text" 
                         class="w-full px-4 py-3 rounded-xl border-2 border-yellow-300 focus:border-orange-500 outline-none bg-white/80">
                </div>
                
                <div>
                  <label class="text-orange-700 font-semibold mb-2 block">Message</label>
                  <textarea v-model="guestMessage.message" 
                            rows="4"
                            class="w-full px-4 py-3 rounded-xl border-2 border-yellow-300 focus:border-orange-500 outline-none bg-white/80 resize-none"></textarea>
                </div>
                
                <div>
                  <label class="text-orange-700 font-semibold mb-2 block">Attendance</label>
                  <div class="flex gap-2">
                    <button type="button" 
                            @click="guestMessage.attendance = 'yes'"
                            :class="guestMessage.attendance === 'yes' ? 'bg-green-600 text-white' : 'bg-white text-gray-700 hover:bg-green-100'"
                            class="px-4 py-2 rounded-lg font-semibold transition-colors">
                      Yes
                    </button>
                    <button type="button" 
                            @click="guestMessage.attendance = 'no'"
                            :class="guestMessage.attendance === 'no' ? 'bg-red-600 text-white' : 'bg-white text-gray-700 hover:bg-red-100'"
                            class="px-4 py-2 rounded-lg font-semibold transition-colors">
                      No
                    </button>
                    <button type="button" 
                            @click="guestMessage.attendance = 'maybe'"
                            :class="guestMessage.attendance === 'maybe' ? 'bg-yellow-600 text-white' : 'bg-white text-gray-700 hover:bg-yellow-100'"
                            class="px-4 py-2 rounded-lg font-semibold transition-colors">
                      Maybe
                    </button>
                  </div>
                </div>
                
                <button type="submit" 
                        class="w-full bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-lg font-semibold">
                  Confirmation
                </button>
              </form>
            </div>
          </div>
          
          <!-- Right Side - Messages -->
          <div class="flex-1">
            <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-8 shadow-xl relative">
              <!-- Minion Peeking -->
              <div class="absolute -top-8 right-8">
                <div class="w-16 h-8 bg-yellow-400 rounded-t-full border-2 border-yellow-600 flex items-end justify-center">
                  <div class="w-4 h-4 bg-white rounded-full border border-gray-800 mb-1"></div>
                </div>
              </div>
              
              <div class="flex items-center gap-2 mb-6">
                <span class="text-gray-600">💬</span>
                <span class="text-orange-700 font-bold">{{ messages.length.toString().padStart(2, '0') }}</span>
              </div>
              
              <!-- Messages List -->
              <div class="space-y-4 max-h-96 overflow-y-auto">
                <div v-for="message in messages" :key="message.id"
                     class="bg-white/80 rounded-xl p-4">
                  <div class="flex justify-between items-start mb-2">
                    <span class="font-semibold text-orange-700">{{ message.name }}</span>
                    <span :class="getAttendanceClass(message.attendance)" 
                          class="px-2 py-1 rounded-full text-xs font-semibold">
                      {{ message.attendance.charAt(0).toUpperCase() + message.attendance.slice(1) }}
                    </span>
                  </div>
                  <p class="text-gray-700">{{ message.message }}</p>
                </div>
              </div>
              
              <!-- Bottom Minions -->
              <div class="absolute -bottom-4 right-4 flex gap-2">
                <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
                  <div class="w-4 h-4 bg-white rounded-full border border-gray-800"></div>
                </div>
                <div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
                  <div class="w-4 h-4 bg-white rounded-full border border-gray-800"></div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </section>

      <!-- Thanks Section -->
      <section v-if="currentSection === 'thanks'" class="w-full max-w-6xl mx-auto">
        <div class="flex flex-col lg:flex-row items-center justify-between gap-8">
          
          <!-- Left Side Content -->
          <div class="flex-1 text-center lg:text-left">
            <p class="text-orange-700 text-lg md:text-xl leading-relaxed mb-8">
              Merupakan suatu kebahagiaan dan kehormatan bagi kami, apabila teman-teman, 
              berkenan hadir dan memberikan do'a.
            </p>
            
            <h3 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
              Hormat Kami
            </h3>
            <h4 class="text-orange-800 text-2xl md:text-3xl font-bold mb-8">
              {{ parentNames }}
            </h4>
            
            <!-- Minion -->
            <div class="flex justify-center lg:justify-start">
              <div class="w-24 h-24 bg-yellow-400 rounded-full flex items-center justify-center border-4 border-yellow-600 transform hover:scale-110 transition-transform">
                <div class="w-10 h-10 bg-white rounded-full border-2 border-gray-800 flex items-center justify-center">
                  <div class="w-6 h-6 bg-yellow-600 rounded-full"></div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Right Side - Family Photo -->
          <div class="flex-1">
            <div class="relative w-full max-w-md mx-auto">
              <div class="bg-yellow-300/60 backdrop-blur-sm rounded-3xl p-8 shadow-xl">
                <img :src="familyPhoto || '/assets/img/family-placeholder.jpg'" 
                     :alt="parentNames"
                     class="w-full h-80 object-cover rounded-2xl shadow-lg">
              </div>
              
              <!-- Decorative minion -->
              <div class="absolute -bottom-2 -left-2">
                <div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center border-2 border-yellow-600">
                  <div class="w-6 h-6 bg-white rounded-full border border-gray-800"></div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </section>

    </main>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'

// Props/Data yang bisa diisi dari parent atau API
const childName = ref('Rayyanza Malik Ahmad')
const age = ref(4)
const childOrder = ref(2)
const parentNames = ref('Raffi Ahmad & Nagita Slavina')
const guestName = ref('Gempita Nora Marten')
const eventDay = ref('MINGGU')
const eventDate = ref('11 JUNI 2025')
const eventTime = ref('11.00 WITA S.D SELESAI')
const eventLocation = ref('Jalan Andara No.17 Cilandak Pondok Labu, DKI Jakarta Green Andara Residence')

// Photos
const childPhoto = ref('')
const familyPhoto = ref('')
const galleryPhotos = ref([
  '/assets/img/gallery1.jpg',
  '/assets/img/gallery2.jpg',
  '/assets/img/gallery3.jpg',
  '/assets/img/gallery4.jpg',
  '/assets/img/gallery5.jpg',
  '/assets/img/gallery6.jpg'
])

// State management
const currentSection = ref('landing')
const isPlaying = ref(false)

// Countdown timer
const countdown = reactive({
  days: 0,
  hours: 0,
  minutes: 0,
  seconds: 0
})

// Guest message form
const guestMessage = reactive({
  name: '',
  message: '',
  attendance: 'yes'
})

// Messages list
const messages = ref([
  {
    id: 1,
    name: 'Gempita',
    message: 'Selamat ulang tahun cipung',
    attendance: 'yes'
  },
  {
    id: 2,
    name: 'Ayu Ting Ting',
    message: 'Selamat ulang tahun anak mama gigi',
    attendance: 'maybe'
  }
])

// Methods
const openInvitation = () => {
  currentSection.value = 'introduction'
}

const toggleMusic = () => {
  isPlaying.value = !isPlaying.value
  // TODO: Implement actual music toggle
}

const submitMessage = () => {
  if (guestMessage.name && guestMessage.message) {
    messages.value.push({
      id: Date.now(),
      name: guestMessage.name,
      message: guestMessage.message,
      attendance: guestMessage.attendance
    })
    
    // Reset form
    guestMessage.name = ''
    guestMessage.message = ''
    guestMessage.attendance = 'yes'
  }
}

const getAttendanceClass = (attendance) => {
  switch (attendance) {
    case 'yes':
    case 'attend':
      return 'bg-green-500 text-white'
    case 'no':
      return 'bg-red-500 text-white'
    case 'maybe':
      return 'bg-yellow-500 text-white'
    default:
      return 'bg-gray-500 text-white'
  }
}

// Countdown timer function
const updateCountdown = () => {
  const eventDate = new Date('2025-06-11T11:00:00')
  const now = new Date()
  const diff = eventDate - now

  if (diff > 0) {
    countdown.days = Math.floor(diff / (1000 * 60 * 60 * 24))
    countdown.hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    countdown.minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
    countdown.seconds = Math.floor((diff % (1000 * 60)) / 1000)
  }
}

// Lifecycle
let countdownInterval = null

onMounted(() => {
  updateCountdown()
  countdownInterval = setInterval(updateCountdown, 1000)
})

onUnmounted(() => {
  if (countdownInterval) {
    clearInterval(countdownInterval)
  }
})

// Meta
useHead({
  title: `${childName.value} Birthday Invitation`,
  meta: [
    { name: 'description', content: `Join us to celebrate ${childName.value}'s ${age.value}th birthday party!` }
  ]
})
</script>

<style scoped>
/* Custom animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Smooth transitions */
* {
  transition: all 0.3s ease;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #fbbf24;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #ea580c;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #c2410c;
}

/* Custom button hover effects */
button {
  transition: all 0.2s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

button:active {
  transform: translateY(0);
}

/* Glass morphism effect */
.backdrop-blur-sm {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Responsive typography */
@media (max-width: 768px) {
  .text-6xl { font-size: 2.5rem; }
  .text-5xl { font-size: 2rem; }
  .text-4xl { font-size: 1.75rem; }
  .text-3xl { font-size: 1.5rem; }
}

/* Custom grid for gallery */
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Loading animation for images */
img {
  transition: opacity 0.3s ease;
}

img[src=""], img:not([src]) {
  opacity: 0;
}

/* Custom yellow gradient */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, #fcd34d, #f59e0b, #d97706);
}

/* Minion eye animation */
@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

.minion-eye {
  animation: blink 3s ease-in-out infinite;
}

/* Party confetti effect */
@keyframes confetti {
  0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti {
  animation: confetti 3s linear infinite;
}

/* Mobile menu slide */
.mobile-menu {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.mobile-menu.open {
  transform: translateY(0);
}

/* Card hover effects */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Text glow effect */
.text-glow {
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

/* Pulse animation for important elements */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}
</style>