@php
    $bride = $invitation->bride ?? [
        'name' => 'Ni Luh Made Kencana Dewi, S.Ked.',
        'nickname' => 'Kencana',
        'parents' => 'I Wayan Suardana, S.Pd. & Ni Kadek Ratna Asih',
        'photo' => 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=600&q=80',
        'instagram' => '@kencanadewi',
    ];
    $groom = $invitation->groom ?? [
        'name' => 'I Gede Bagus Mahendra, S.T.',
        'nickname' => 'Mahendra',
        'parents' => 'Ida Bagus Made Anom & Jero Mangku Ni Ketut Sariani',
        'photo' => 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=600&q=80',
        'instagram' => '@bagusmahendra',
    ];
    $coverPhoto = $invitation->cover_photo ?? 'https://images.unsplash.com/photo-1609137144822-4a7b7a2d3b00?auto=format&fit=crop&w=800&q=80';
    $events = $invitation->events ?? [
        [
            'title' => 'Upacara Mepamit & Pesaksian',
            'date' => '2026-11-27',
            'start_time' => '08:00',
            'end_time' => '11:00',
            'timezone' => 'WITA',
            'venue' => 'Kediaman Mempelai Wanita',
            'address' => 'Banjar Kelod, Sanur, Denpasar',
            'maps_url' => 'https://maps.google.com/?q=Sanur+Denpasar',
        ],
        [
            'title' => 'Pawiwahan & Makala-kalaan',
            'date' => '2026-11-29',
            'start_time' => '09:00',
            'end_time' => '12:00',
            'timezone' => 'WITA',
            'venue' => 'Griya Agung Puri Kaja Gianyar',
            'address' => 'Jl. Ngurah Rai No. 88, Gianyar, Bali',
            'maps_url' => 'https://maps.google.com/?q=Gianyar+Bali',
        ],
        [
            'title' => 'Resepsi Pawiwahan',
            'date' => '2026-11-29',
            'start_time' => '13:00',
            'end_time' => '18:00',
            'timezone' => 'WITA',
            'venue' => 'Griya Agung Puri Kaja Gianyar',
            'address' => 'Jl. Ngurah Rai No. 88, Gianyar, Bali',
            'maps_url' => 'https://maps.google.com/?q=Gianyar+Bali',
        ],
    ];
    $primaryEvent = $events[1] ?? ($events[0] ?? null);
    $eventDate = $primaryEvent['date'] ?? '2026-11-29';
    $eventTime = $primaryEvent['start_time'] ?? '09:00';
    $carbonDate = \Carbon\Carbon::parse($eventDate);
    $formattedDate = $carbonDate->locale('id')->isoFormat('dddd, D MMMM Y');

    $galleries = $invitation->gallery ?? [
        'https://images.unsplash.com/photo-1609137144822-4a7b7a2d3b00?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1518548419970-58e3b4079ab2?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1512100356356-de1b84283e18?auto=format&fit=crop&w=600&q=80',
    ];

    $rawBankAccounts = !empty($invitation->bank_accounts) ? $invitation->bank_accounts : (!empty($invitation->gifts) ? $invitation->gifts : null);
    if (empty($rawBankAccounts) && !empty($invitation->bank_name)) {
        $rawBankAccounts = [
            [
                'bank_name' => $invitation->bank_name,
                'bank' => $invitation->bank_name,
                'account_number' => $invitation->bank_account ?? '',
                'number' => $invitation->bank_account ?? '',
                'account_holder' => $invitation->bank_holder ?? 'Mempelai',
                'name' => $invitation->bank_holder ?? 'Mempelai',
            ]
        ];
    }
    $gifts = !empty($rawBankAccounts) ? $rawBankAccounts : [
        [
            'bank_name' => 'Bank BCA',
            'bank' => 'Bank BCA',
            'account_number' => '1234567890',
            'number' => '1234567890',
            'account_holder' => 'I Gede Bagus Narendra',
            'name' => 'I Gede Bagus Narendra',
        ],
        [
            'bank_name' => 'Bank BPD Bali',
            'bank' => 'Bank BPD Bali',
            'account_number' => '9876543210',
            'number' => '9876543210',
            'account_holder' => 'Ni Kadek Ayu Ratnasari',
            'name' => 'Ni Kadek Ayu Ratnasari',
        ],
    ];
    $hasGifts = !empty($gifts) || !empty($invitation->qris_image_url) || !empty($invitation->qris_image);

    $stories = $invitation->stories ?? [
        [
            'year' => 'Maret 2021',
            'title' => 'Kidung Pertemuan Kapertama',
            'story' => 'Kacunduk ring acara piodalan ring Pura Besakih. Sinar kasucian kalih hati mamargi asiki, ngawitang rasa tresna sane tulus tur hening.',
        ],
        [
            'year' => 'Juli 2023',
            'title' => 'Ngiket Janji ring Lembah Campuhan',
            'story' => 'Ring tegal Campuhan Ubud sane ayu, Mahendra ngaturang komitmen suci majeng ring Kencana anggen nyarengin pamargi urip ngantos kapekasian.',
        ],
        [
            'year' => 'Januari 2026',
            'title' => 'Madewasa Ayu (Meminang)',
            'story' => 'Kulawarga agung Purusha rauh makanten ring griya Pradana makta canang ajuman lan seserahan pinaka cihna nancebang janji pawiwahan.',
        ],
        [
            'year' => 'November 2026',
            'title' => 'Mahligai Pawiwahan Yadnya',
            'story' => 'Kapasatukan ring ajeng Ida Pedanda, geni homa, lan saksi dharmaning agama, mamargi nuju kauripan anyar sane sutrepti lan rahayu.',
        ],
    ];

    $defaultQuoteText = 'Om Ihaiva stam ma vi yaustam visvam ayur vyasnutam kridantau putrair naptrbhih modamanau sve grhe. Tetaplah kalian berdua di sini, jangan pernah berpisah, capailah usia penuh, bergembira bersama anak dan cucu dalam rumah tangga yang berbahagia.';
    $defaultQuoteSource = 'Rgveda X.85.42';
    $quoteText = !empty($invitation->quote) ? $invitation->quote : $defaultQuoteText;
    $quoteSource = !empty($invitation->quote_author) ? $invitation->quote_author : $defaultQuoteSource;

    $wishes = $invitation->wishes ?? [
        (object)[
            'name' => 'Ida Pedanda Gede Putra',
            'attendance' => 'hadir',
            'message' => 'Om Swastyastu. Dumogi sang kalih prasida langgeng ngamargiang dharma kuren, ngardi kulawarga sane sutrepti tur rahayu. Om Shantih.',
            'created_at' => now()->subHours(1),
        ],
        (object)[
            'name' => 'Jero Mangku Wayan Suweta',
            'attendance' => 'hadir',
            'message' => 'Rahajeng Pawiwahan Mahendra & Kencana. Dumogi Ida Sang Hyang Widhi Wasa ngicenin karahayuan salawasnyane.',
            'created_at' => now()->subHours(4),
        ]
    ];
@endphp
<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pawiwahan Adat Bali - {{ $groom['nickname'] ?? 'Mahendra' }} &amp; {{ $bride['nickname'] ?? 'Kencana' }}</title>

  <!-- Google Fonts: Cinzel Decorative, Cormorant Garamond, Great Vibes, Plus Jakarta Sans -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Great+Vibes&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Font Awesome CDN -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            bali: {
              redSacred: '#2b080f',
              redBurgundy: '#4a0e17',
              redVelvet: '#631420',
              gold: '#D4AF37',
              goldLight: '#F7D070',
              goldWarm: '#FFF0B8',
              goldDark: '#996515',
              sandstone: '#130508',
              ivory: '#FFFDF7'
            }
          },
          fontFamily: {
            cinzelDeco: ['"Cinzel Decorative"', 'serif'],
            cinzel: ['"Cinzel"', 'serif'],
            serif: ['"Cormorant Garamond"', 'serif'],
            script: ['"Great Vibes"', 'cursive'],
            sans: ['"Plus Jakarta Sans"', 'sans-serif']
          }
        }
      }
    }
  </script>

  <style>
    /* Falling Frangipani (Bunga Jepun) Canvas */
    #floral-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 30;
    }

    /* Balinese Patra Samblung / Punggel Geometric Mask */
    .bali-gold-patra-top {
      height: 18px;
      width: 100%;
      background: linear-gradient(90deg, #996515, #D4AF37, #F7D070, #D4AF37, #996515);
      --mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 90deg, #0000 91deg) 50% / 18px 100%;
      -webkit-mask: var(--mask);
      mask: var(--mask);
    }
    .bali-gold-patra-bottom {
      height: 18px;
      width: 100%;
      background: linear-gradient(90deg, #996515, #D4AF37, #F7D070, #D4AF37, #996515);
      --mask: conic-gradient(from 135deg at top, #0000, #000 1deg 90deg, #0000 91deg) 50% / 18px 100%;
      -webkit-mask: var(--mask);
      mask: var(--mask);
    }

    /* Swaying Balinese Penjor Animations */
    @keyframes swayPenjorLeft {
      0%, 100% { transform: rotate(0deg) translateY(0); }
      50% { transform: rotate(3.5deg) translateY(-4px) scale(1.02); }
    }
    @keyframes swayPenjorRight {
      0%, 100% { transform: rotate(0deg) translateY(0); }
      50% { transform: rotate(-3.5deg) translateY(-4px) scale(1.02); }
    }
    @keyframes auraGoldPulse {
      0%, 100% { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.45)); }
      50% { filter: drop-shadow(0 0 22px rgba(247, 208, 112, 0.85)); }
    }

    .sway-left {
      transform-origin: top left;
      animation: swayPenjorLeft 6.5s ease-in-out infinite;
    }
    .sway-right {
      transform-origin: top right;
      animation: swayPenjorRight 7s ease-in-out infinite;
    }
    .gold-glow {
      animation: auraGoldPulse 5s ease-in-out infinite;
    }

    /* Scroll reveal transitions */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* Mobile container framing */
    .luxury-container {
      max-width: 480px;
      min-height: 100vh;
      margin: 0 auto;
      box-shadow: 0 0 70px rgba(0, 0, 0, 0.95);
      position: relative;
      background-color: #130508;
    }
  </style>
</head>
<body class="bg-[#0b0305] text-neutral-100 font-sans antialiased overflow-x-hidden selection:bg-bali-gold selection:text-bali-redSacred">
  @include('templates.partials.preview-banner')

  @if(isset($isPreview) && $isPreview)
  <div class="fixed top-0 inset-x-0 z-[100] bg-bali-redSacred/95 border-b border-bali-gold text-bali-goldLight text-xs py-1.5 text-center font-cinzel tracking-wider uppercase">
    Mode Pratinjau Desain (Preview Mode)
  </div>
  @endif

  <!-- Interactive Canvas: Falling Bunga Jepun (Frangipani) Petals -->
  <canvas id="floral-canvas"></canvas>

  <!-- Background Music Audio Tag -->
  @if(!empty($invitation->audio_url))
  <audio id="bgMusic" src="{{ $invitation->audio_url }}" preload="auto" loop></audio>
  @endif

  <!-- Floating Audio Button -->
  <button id="audio-toggle-btn" aria-label="Toggle Audio" class="fixed top-5 right-5 z-40 w-11 h-11 rounded-full bg-bali-redSacred/90 border border-bali-gold text-bali-goldLight shadow-2xl flex items-center justify-center transition-transform hover:scale-105 active:scale-95">
    <i id="audio-disc-icon" class="fa-solid fa-bell text-lg"></i>
  </button>

  <!-- Quick Floating Navigation Pill -->
  <div class="fixed bottom-4 inset-x-0 z-40 flex justify-center pointer-events-none">
    <nav class="pointer-events-auto bg-bali-redSacred/95 backdrop-blur-md border border-bali-gold/60 px-5 py-2.5 rounded-full shadow-2xl flex items-center gap-4 text-bali-goldLight text-xs">
      <a href="#cover-hero" class="hover:text-white transition" title="Beranda"><i class="fa-solid fa-torii-gate"></i></a>
      <a href="#mantra" class="hover:text-white transition" title="Sloka Suci"><i class="fa-solid fa-om"></i></a>
      <a href="#mempelai" class="hover:text-white transition" title="Purusha & Pradana"><i class="fa-solid fa-user-group"></i></a>
      <a href="#jadwal" class="hover:text-white transition" title="Dudonan Acara"><i class="fa-solid fa-calendar-check"></i></a>
      <a href="#kisah" class="hover:text-white transition" title="Kidung Asmara"><i class="fa-solid fa-heart"></i></a>
      <a href="#galeri" class="hover:text-white transition" title="Galeri Foto"><i class="fa-solid fa-images"></i></a>
      <a href="#gift" class="hover:text-white transition" title="Punia / Tanda Kasih"><i class="fa-solid fa-gift"></i></a>
      <a href="#rsvp" class="hover:text-white transition" title="RSVP & Doa"><i class="fa-solid fa-envelope-open-text"></i></a>
    </nav>
  </div>

  <!-- COVER / SPLASH SCREEN MODAL -->
  <div id="cover-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-bali-redSacred text-neutral-100 transition-all duration-1000">
    <div class="absolute inset-0 bg-cover bg-center opacity-25 mix-blend-luminosity" style="background-image: url('{{ $coverPhoto }}');"></div>
    <div class="absolute inset-0 bg-gradient-to-b from-bali-redSacred/95 via-bali-redBurgundy/80 to-bali-redSacred/95"></div>

    <!-- Swaying Penjor & Canang Sari Flowers - Top Left -->
    <div class="absolute top-0 left-0 w-36 sm:w-48 pointer-events-none sway-left z-10 opacity-95">
      <svg viewBox="0 0 180 180" fill="none" class="w-full h-full">
        <path d="M0,0 Q50,25 75,70 Q95,115 155,140" stroke="#D4AF37" stroke-width="2.5" fill="none"/>
        <path d="M10,0 Q65,40 75,100 Q80,130 110,170" stroke="#F7D070" stroke-width="1.8" fill="none"/>
        <circle cx="75" cy="70" r="7" fill="#FFFDF7" stroke="#D4AF37" stroke-width="2"/>
        <circle cx="75" cy="70" r="3" fill="#F7D070"/>
        <circle cx="155" cy="140" r="8" fill="#FFFDF7" stroke="#D4AF37" stroke-width="2"/>
        <circle cx="155" cy="140" r="3.5" fill="#F7D070"/>
        <circle cx="110" cy="170" r="6" fill="#FFFDF7" stroke="#D4AF37"/>
        <path d="M30,16 Q55,8 60,26 Q42,32 30,16 Z" fill="#D4AF37"/>
        <path d="M70,42 Q92,36 98,54 Q80,59 70,42 Z" fill="#F7D070" opacity="0.85"/>
      </svg>
    </div>

    <!-- Swaying Penjor & Canang Sari Flowers - Top Right -->
    <div class="absolute top-0 right-0 w-36 sm:w-48 pointer-events-none sway-right z-10 opacity-95 transform -scale-x-100">
      <svg viewBox="0 0 180 180" fill="none" class="w-full h-full">
        <path d="M0,0 Q50,25 75,70 Q95,115 155,140" stroke="#D4AF37" stroke-width="2.5" fill="none"/>
        <circle cx="75" cy="70" r="7" fill="#FFFDF7" stroke="#D4AF37" stroke-width="2"/>
        <circle cx="75" cy="70" r="3" fill="#F7D070"/>
        <circle cx="155" cy="140" r="8" fill="#FFFDF7" stroke="#D4AF37" stroke-width="2"/>
        <path d="M30,16 Q55,8 60,26 Q42,32 30,16 Z" fill="#D4AF37"/>
      </svg>
    </div>

    <!-- Modal Box Content -->
    <div class="relative z-20 w-11/12 max-w-md p-8 sm:p-9 text-center rounded-[2.5rem] border border-bali-gold/60 bg-bali-redSacred/90 backdrop-blur-xl shadow-2xl">
      <div class="w-24 h-20 mx-auto mb-2 flex items-center justify-center gold-glow">
        <svg viewBox="0 0 100 80" fill="none" class="w-full h-full">
          <path d="M42,10 L30,10 L30,18 L24,18 L24,30 L18,30 L18,48 L12,48 L12,72 L42,72 Z" fill="#D4AF37" stroke="#F7D070" stroke-width="1.2"/>
          <path d="M58,10 L70,10 L70,18 L76,18 L76,30 L82,30 L82,48 L88,48 L88,72 L58,72 Z" fill="#D4AF37" stroke="#F7D070" stroke-width="1.2"/>
          <circle cx="50" cy="40" r="5" fill="#FFFDF7" stroke="#996515" stroke-width="1.5"/>
          <circle cx="50" cy="40" r="2" fill="#F7D070"/>
        </svg>
      </div>

      <p class="font-cinzel text-[10px] tracking-[0.35em] text-bali-goldLight uppercase font-bold mb-1">Pawiwahan Adat Bali</p>
      <h1 class="font-script text-5xl sm:text-6xl text-bali-goldLight my-1 drop-shadow">{{ $groom['nickname'] ?? 'Mahendra' }} &amp; {{ $bride['nickname'] ?? 'Kencana' }}</h1>
      <p class="font-serif italic text-xs text-neutral-300">"Om Awighnam Astu Namo Siddham"</p>

      <div class="w-24 h-px bg-gradient-to-r from-transparent via-bali-gold to-transparent mx-auto my-4"></div>

      <!-- Guest Name Target URL (?to=Nama+Tamu) -->
      <div class="p-3.5 rounded-2xl bg-black/60 border border-bali-gold/50 my-4 shadow-inner">
        <span class="text-[11px] uppercase tracking-widest text-neutral-300 font-cinzel">Katur Majeng Sane Wangiang:</span>
        <h2 id="guest-name-badge" class="font-serif text-2xl font-bold text-bali-goldLight capitalize mt-0.5 tracking-wide">{{ $guestName ?? 'Tamu Undangan' }}</h2>
      </div>

      <button id="btn-open-invitation" class="group relative inline-flex items-center gap-2.5 px-8 py-3.5 rounded-full bg-gradient-to-r from-bali-gold via-bali-goldLight to-bali-gold text-bali-redSacred font-semibold shadow-xl hover:shadow-bali-gold/50 transform hover:-translate-y-0.5 active:translate-y-0 transition duration-300">
        <i class="fa-solid fa-scroll text-sm group-hover:rotate-12 transition"></i>
        <span class="font-cinzel tracking-widest text-xs uppercase font-bold">Matur Piuning (Buka Undangan)</span>
      </button>
    </div>
  </div>

  <!-- MAIN LUXURY WRAPPER -->
  <div class="luxury-container overflow-hidden border-x border-bali-gold/40">

    <!-- Top Balinese Patra Border -->
    <div class="bali-gold-patra-top sticky top-0 z-30 opacity-95"></div>

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown'))
<!-- HERO SECTION & COUNTDOWN -->
    <section id="section-countdown" class="relative pt-12 pb-16 px-6 text-center overflow-hidden bg-gradient-to-b from-bali-sandstone via-bali-redBurgundy to-bali-sandstone">
    <div id="cover-hero"></div>
      
      <!-- Balinese Temple Gate Emblem -->
      <div class="w-28 h-20 mx-auto mb-3 flex items-center justify-center gold-glow">
        <svg viewBox="0 0 100 80" fill="none" class="w-full h-full">
          <path d="M42,10 L30,10 L30,18 L24,18 L24,30 L18,30 L18,48 L12,48 L12,72 L42,72 Z" fill="#D4AF37" stroke="#F7D070" stroke-width="1.2"/>
          <path d="M58,10 L70,10 L70,18 L76,18 L76,30 L82,30 L82,48 L88,48 L88,72 L58,72 Z" fill="#D4AF37" stroke="#F7D070" stroke-width="1.2"/>
          <circle cx="50" cy="40" r="5" fill="#FFFDF7" stroke="#996515" stroke-width="1.5"/>
        </svg>
      </div>

      <div class="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-bali-gold/20 border border-bali-gold/60 text-bali-goldLight text-[10px] tracking-[0.25em] uppercase font-cinzel mb-3">
        <i class="fa-solid fa-om text-bali-gold text-[10px]"></i> Upacara Pawiwahan Yadnya
      </div>

      <p class="font-serif italic text-sm text-bali-goldLight/90">Pawiwahan Suci Purusha &amp; Pradana</p>
      <h1 class="font-script text-6xl text-bali-goldLight drop-shadow-md my-1">{{ $groom['nickname'] ?? 'Mahendra' }} &amp; {{ $bride['nickname'] ?? 'Kencana' }}</h1>
      <p class="font-cinzel tracking-[0.2em] text-xs text-neutral-300 uppercase mb-6">
        {{ $formattedDate }}
      </p>

      <!-- Balinese Royal Couple Ring -->
      <div class="relative mx-auto w-52 h-52 mb-8">
        <svg viewBox="0 0 200 200" class="absolute inset-0 w-full h-full gold-glow">
          <circle cx="100" cy="100" r="92" fill="none" stroke="#D4AF37" stroke-width="2" stroke-dasharray="6,4"/>
          <circle cx="100" cy="8" r="6" fill="#FFFDF7" stroke="#996515"/>
          <circle cx="192" cy="100" r="6" fill="#FFFDF7" stroke="#996515"/>
          <circle cx="100" cy="192" r="6" fill="#FFFDF7" stroke="#996515"/>
          <circle cx="8" cy="100" r="6" fill="#FFFDF7" stroke="#996515"/>
        </svg>
        <div class="w-full h-full p-2.5">
          <img src="{{ $coverPhoto }}" 
               alt="{{ $groom['nickname'] }} & {{ $bride['nickname'] }}" 
               class="w-full h-full object-cover rounded-full border-2 border-bali-gold shadow-2xl">
        </div>
      </div>

      <!-- COUNTDOWN TIMER -->
      <div class="rounded-3xl p-6 bg-bali-sandstone/80 border border-bali-gold/50 shadow-2xl backdrop-blur-md">
        <p class="font-cinzel text-[11px] uppercase tracking-widest text-bali-goldLight mb-4">Ngitung Rahina Menuju Pawiwahan</p>
        <div class="grid grid-cols-4 gap-2 text-center" id="countdown-box">
          <div class="p-2.5 rounded-2xl bg-bali-redBurgundy/80 border border-bali-gold/30">
            <span id="cd-days" class="block font-serif text-3xl font-bold text-bali-goldLight">00</span>
            <span class="text-[9px] uppercase font-cinzel text-neutral-300">Rahina</span>
          </div>
          <div class="p-2.5 rounded-2xl bg-bali-redBurgundy/80 border border-bali-gold/30">
            <span id="cd-hours" class="block font-serif text-3xl font-bold text-bali-goldLight">00</span>
            <span class="text-[9px] uppercase font-cinzel text-neutral-300">Tabuh</span>
          </div>
          <div class="p-2.5 rounded-2xl bg-bali-redBurgundy/80 border border-bali-gold/30">
            <span id="cd-minutes" class="block font-serif text-3xl font-bold text-bali-goldLight">00</span>
            <span class="text-[9px] uppercase font-cinzel text-neutral-300">Menit</span>
          </div>
          <div class="p-2.5 rounded-2xl bg-bali-redBurgundy/80 border border-bali-gold/30">
            <span id="cd-seconds" class="block font-serif text-3xl font-bold text-bali-goldLight">00</span>
            <span class="text-[9px] uppercase font-cinzel text-neutral-300">Detik</span>
          </div>
        </div>
      </div>
    </section>
@endif

    <!-- SECTION 1: MANTRA / SLOKA SUCI RIG VEDA & DOA -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('quote'))
    <section id="section-quote" class="py-14 px-6 bg-bali-redBurgundy text-neutral-100 relative">
      <div class="text-center mb-6 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-bali-goldLight font-bold">Sloka Suci</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">Asung Kertha Wara Nugraha</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-bali-gold to-transparent mx-auto my-2.5"></div>
      </div>

      <div class="p-6 rounded-3xl bg-bali-sandstone/90 border border-bali-gold/50 shadow-2xl text-center relative overflow-hidden reveal">
        <div class="relative z-10">
          <h4 class="font-cinzel text-xs text-bali-gold uppercase tracking-[0.2em] font-bold mb-2">{{ $quoteSource }}</h4>
          <p class="font-serif italic text-sm text-neutral-200 leading-relaxed max-w-xl mx-auto">
            “{!! nl2br(e($quoteText)) !!}”
          </p>
        </div>
      </div>
    </section>
    @endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('couple'))
<!-- SECTION 3: SANG MEMPELAI (PURUSHA & PRADANA) -->
    <section id="section-couple" class="py-14 px-6 bg-bali-sandstone relative text-center">
    <div id="mempelai"></div>
      <div class="mb-10 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-bali-goldLight font-bold">Sang Makurenan</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">Purusha &amp; Pradana</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-bali-gold to-transparent mx-auto my-2.5"></div>
      </div>

      <div class="space-y-8">
        <!-- Purusha (Pengantin Pria) -->
        <div class="p-7 rounded-[2rem] bg-bali-redBurgundy/80 border border-bali-gold/50 shadow-xl reveal">
          <div class="relative w-40 h-40 mx-auto rounded-full p-2 border-2 border-bali-gold bg-bali-sandstone mb-4 shadow-lg">
            <img src="{{ $groom['photo'] ?? 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=500&q=80' }}" 
                 alt="{{ $groom['name'] }}" 
                 class="w-full h-full object-cover rounded-full">
            <div class="absolute -bottom-2 inset-x-0 mx-auto w-max px-4 py-0.5 rounded-full bg-bali-gold text-bali-redSacred font-cinzel text-[10px] font-bold uppercase tracking-wider shadow">
              Purusha (Pengantin Pria)
            </div>
          </div>
          <h3 class="font-serif text-2xl font-bold text-bali-goldLight mb-0.5">{{ $groom['name'] }}</h3>
          <div class="text-xs text-neutral-300 space-y-1 mb-3">
            <p>Putra dari:</p>
            <p class="font-serif font-bold text-base text-white">{{ $groom['parents'] ?? 'Ida Bagus Made Anom & Jero Mangku Ni Ketut Sariani' }}</p>
          </div>
          @if(!empty($groom['instagram']))
          <span class="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full bg-bali-sandstone text-bali-goldLight text-xs font-cinzel border border-bali-gold/50">
            <i class="fa-brands fa-instagram text-xs"></i> {{ $groom['instagram'] }}
          </span>
          @endif
        </div>

        <!-- Pradana (Pengantin Wanita) -->
        <div class="p-7 rounded-[2rem] bg-bali-redBurgundy/80 border border-bali-gold/50 shadow-xl reveal">
          <div class="relative w-40 h-40 mx-auto rounded-full p-2 border-2 border-bali-gold bg-bali-sandstone mb-4 shadow-lg">
            <img src="{{ $bride['photo'] ?? 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=500&q=80' }}" 
                 alt="{{ $bride['name'] }}" 
                 class="w-full h-full object-cover rounded-full">
            <div class="absolute -bottom-2 inset-x-0 mx-auto w-max px-4 py-0.5 rounded-full bg-bali-gold text-bali-redSacred font-cinzel text-[10px] font-bold uppercase tracking-wider shadow">
              Pradana (Pengantin Wanita)
            </div>
          </div>
          <h3 class="font-serif text-2xl font-bold text-bali-goldLight mb-0.5">{{ $bride['name'] }}</h3>
          <div class="text-xs text-neutral-300 space-y-1 mb-3">
            <p>Putri dari:</p>
            <p class="font-serif font-bold text-base text-white">{{ $bride['parents'] ?? 'I Wayan Suardana, S.Pd. & Ni Kadek Ratna Asih' }}</p>
          </div>
          @if(!empty($bride['instagram']))
          <span class="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full bg-bali-sandstone text-bali-goldLight text-xs font-cinzel border border-bali-gold/50">
            <i class="fa-brands fa-instagram text-xs"></i> {{ $bride['instagram'] }}
          </span>
          @endif
        </div>
      </div>
    </section>
@endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('event'))
<!-- SECTION 4: DUDONAN ACARA (RANGKAIAN UPACARA) -->
    <section id="section-event" class="py-14 px-6 bg-bali-redSacred text-neutral-100 relative">
    <div id="jadwal"></div>
      <div class="text-center mb-10 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-bali-goldLight font-bold">Rangkaian Upacara</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">Dudonan Pawiwahan</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-bali-gold to-transparent mx-auto my-2.5"></div>
      </div>

      <div class="space-y-6">
        @foreach($events as $event)
        <div class="p-6 rounded-3xl bg-bali-sandstone/80 border border-bali-gold/50 text-center shadow-lg reveal">
          <div class="w-12 h-12 mx-auto rounded-full bg-bali-gold/20 text-bali-goldLight flex items-center justify-center text-lg mb-3 border border-bali-gold/50">
            <i class="fa-solid fa-torii-gate"></i>
          </div>
          <h3 class="font-serif text-2xl font-bold text-bali-goldLight">{{ $event['title'] }}</h3>
          <p class="font-cinzel text-[11px] text-neutral-300 mb-3">{{ \Carbon\Carbon::parse($event['date'])->locale('id')->isoFormat('dddd, D MMMM Y') }}</p>
          <div class="font-serif text-2xl font-bold text-white mb-2">{{ $event['start_time'] ?? '09:00' }} - {{ $event['end_time'] ?? 'Selesai' }} {{ $event['timezone'] ?? 'WITA' }}</div>
          <p class="text-xs text-neutral-300 leading-relaxed mb-4"><strong>{{ $event['venue'] }}</strong><br>{{ $event['address'] }}</p>
          @if(!empty($event['maps_url']))
          <a href="{{ $event['maps_url'] }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-bali-gold text-bali-redSacred font-cinzel text-[10px] font-bold uppercase tracking-wider hover:bg-bali-goldLight transition shadow">
            <i class="fa-solid fa-map-location-dot"></i> Peta Google Maps
          </a>
          @endif
        </div>
        @endforeach
      </div>
    </section>
@endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('story'))
<!-- SECTION 5: KISAH KASIH (TIMELINE MODE) -->
    @if(!empty($stories) && count($stories) > 0)
    <section id="section-story" class="py-14 px-6 bg-bali-redBurgundy text-neutral-100 relative">
    <div id="kisah"></div>
      <div class="text-center mb-12 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-bali-goldLight font-bold">Untaian Satua</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">Kidung Asmara</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-bali-gold to-transparent mx-auto my-2.5"></div>
      </div>

      <div class="relative border-l-2 border-bali-gold/50 ml-4 space-y-9 pl-6">
        @foreach($stories as $st)
        <div class="relative group reveal">
          <div class="absolute -left-[33px] top-1 w-6 h-6 rounded-full bg-bali-gold text-bali-redSacred flex items-center justify-center text-[10px] font-bold shadow">
            <i class="fa-solid fa-heart"></i>
          </div>
          <div class="p-5 rounded-2xl bg-bali-sandstone/85 border border-bali-gold/40 shadow">
            <span class="inline-block px-2.5 py-0.5 rounded-full bg-bali-gold text-bali-redSacred font-cinzel text-[9px] font-bold mb-1.5">{{ $st['year'] ?? '' }}</span>
            <h4 class="font-serif text-xl font-bold text-bali-goldLight">{{ $st['title'] ?? '' }}</h4>
            <p class="text-xs text-neutral-300 mt-1.5 leading-relaxed">{{ $st['story'] ?? ($st['description'] ?? '') }}</p>
          </div>
        </div>
        @endforeach
      </div>
    </section>
    @endif
@endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gallery'))
<!-- SECTION 6: GALERI FOTO -->
    @if(!empty($galleries) && count($galleries) > 0)
    <section id="section-gallery" class="py-14 px-6 bg-bali-sandstone relative">
    <div id="galeri"></div>
      <div class="text-center mb-10 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-bali-goldLight font-bold">Dokumentasi Ayu</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">Potret Kasih</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-bali-gold to-transparent mx-auto my-2.5"></div>
      </div>

      <div class="grid grid-cols-2 gap-3 sm:gap-4">
        @foreach($galleries as $index => $img)
        <div class="group relative overflow-hidden rounded-2xl aspect-square cursor-pointer border border-bali-gold/50 shadow-md reveal" onclick="openLightbox('{{ $img }}', 'Dokumentasi Pawiwahan {{ $index + 1 }}')">
          <img src="{{ $img }}" alt="Galeri {{ $index + 1 }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
          <div class="absolute inset-0 bg-bali-sandstone/50 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
            <span class="w-8 h-8 rounded-full bg-bali-gold text-bali-redSacred flex items-center justify-center text-xs"><i class="fa-solid fa-eye"></i></span>
          </div>
        </div>
        @endforeach
      </div>
    </section>
    @endif
@endif

    <!-- Lightbox Modal -->
    <div id="lightbox-modal" class="fixed inset-0 z-50 bg-black/90 hidden items-center justify-center p-4 backdrop-blur-md" onclick="closeLightbox()">
      <button class="absolute top-6 right-6 text-white text-3xl hover:text-bali-gold transition" onclick="closeLightbox()">
        <i class="fa-solid fa-xmark"></i>
      </button>
      <div class="max-w-md w-full text-center" onclick="event.stopPropagation()">
        <img id="lightbox-img" src="" alt="Popup Foto" class="max-w-full max-h-[70vh] mx-auto rounded-2xl border border-bali-gold/50 shadow-2xl object-contain">
        <p id="lightbox-caption" class="text-bali-goldLight font-serif text-lg mt-3 italic"></p>
      </div>
    </div>

    <!-- SECTION 7: TANDA KASIH (DANA PUNIA) -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gift'))
    @if($hasGifts)
    <section id="section-gift" class="py-14 px-6 bg-bali-redBurgundy text-neutral-100 relative">
      <div class="text-center mb-6 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-bali-goldLight font-bold">Yadnya &amp; Punia</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">Tanda Kasih (Dana Punia)</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-bali-gold to-transparent mx-auto my-2.5"></div>
        <p class="text-xs text-neutral-300">
          Asung kertha wara nugraha lan doa restu wantah dados panyembrama utama majeng ring titiang sakulawarga. Yening wenten arsa ngaturang punia digital, durusang klik tombol ring sor:
        </p>
      </div>

      <div class="text-center mb-8 reveal">
        <button type="button" onclick="toggleGiftAccordion(this)" class="px-6 py-2.5 rounded-full bg-gradient-to-r from-bali-gold via-bali-goldLight to-bali-gold text-bali-redSacred font-cinzel text-xs font-bold uppercase tracking-wider shadow-lg inline-flex items-center gap-2">
          <i class="fa-solid fa-gift"></i>
          <span class="gift-btn-label">Kirim Hadiah / Buka Rekening</span>
        </button>
      </div>

      <div id="gift-accordion-content" class="hidden transition-all duration-300">
        <div class="space-y-5 reveal">
          @foreach($gifts as $i => $gift)
          <div class="p-6 rounded-3xl bg-bali-sandstone/90 border border-bali-gold/60 shadow-xl text-left relative overflow-hidden">
            <div class="flex justify-between items-center mb-4">
              <span class="font-cinzel font-bold text-lg text-bali-goldLight">{{ $gift['bank_name'] ?? $gift['bank'] ?? 'Bank' }}</span>
              <i class="fa-solid fa-building-columns text-xl text-bali-gold/60"></i>
            </div>
            <span class="text-[11px] text-neutral-300">Nomor Rekening:</span>
            <div class="flex items-center justify-between mt-1 mb-3">
              <span class="font-mono text-xl font-bold text-white tracking-wider" id="rek_{{ $loop->index }}">{{ $gift['account_number'] ?? $gift['number'] ?? '-' }}</span>
              <button onclick="copyGiftNumber('rek_{{ $loop->index }}', this)" class="px-3 py-1 rounded-full bg-bali-gold text-bali-redSacred font-cinzel text-[10px] font-bold uppercase tracking-wider hover:bg-bali-goldLight transition shadow inline-flex items-center gap-1">
                <i class="fa-regular fa-copy"></i> <span>Salin</span>
              </button>
            </div>
            <p class="text-xs text-neutral-300">Atas Nama: <strong class="text-bali-goldLight">{{ $gift['account_holder'] ?? $gift['name'] ?? '-' }}</strong></p>
          </div>
          @endforeach
        </div>

        @if(!empty($invitation->qris_image_url) || !empty($invitation->qris_image))
        <div class="mt-8 p-6 rounded-3xl bg-bali-sandstone/90 border border-bali-gold/60 shadow-xl text-center max-w-sm mx-auto reveal">
          <span class="font-cinzel font-bold text-lg text-bali-goldLight block mb-2">QRIS Dana Punia</span>
          <img src="{{ $invitation->qris_image_url ?: $invitation->qris_image }}" alt="QRIS" class="max-w-[200px] mx-auto rounded-xl border border-bali-gold/60 shadow block">
          <p class="text-xs text-neutral-300 mt-3">a.n. {{ $invitation->groom_nickname ?? $invitation->groom_name ?? 'Mempelai' }} &amp; {{ $invitation->bride_nickname ?? $invitation->bride_name ?? 'Mempelai' }}</p>
        </div>
        @endif
      </div>
    </section>
    @endif
    @endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('wishes'))
<!-- SECTION 8: FORM RSVP & PAWOS BUKU DOA -->
    <section id="section-wishes" class="py-14 px-6 bg-bali-sandstone text-neutral-100 relative">
    <div id="rsvp"></div>
      <div class="text-center mb-10 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-bali-goldLight font-bold">Pawos &amp; Pangayubagia</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">RSVP &amp; Buku Doa</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-bali-gold to-transparent mx-auto my-2.5"></div>
      </div>

      <!-- Form Card -->
      <div class="p-6 rounded-3xl bg-bali-redSacred/90 border border-bali-gold/50 shadow-2xl mb-8 reveal">
        <form action="{{ route('invitation.wish', $invitation->slug ?? 'demo') }}" method="POST" class="space-y-4">
          @csrf
          <div>
            <label class="block font-cinzel text-[10px] font-bold text-bali-goldLight uppercase tracking-wider mb-1.5">Wastan Jangkep (Nama Lengkap)</label>
            <input type="text" name="name" value="{{ $guestName ?? '' }}" required placeholder="Nama Anda" class="w-full px-4 py-3 rounded-xl border border-bali-gold/40 bg-black/60 text-white focus:border-bali-gold outline-none text-xs">
          </div>

          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block font-cinzel text-[10px] font-bold text-bali-goldLight uppercase tracking-wider mb-1.5">Kehadiran</label>
              <select name="attendance" class="w-full px-3 py-3 rounded-xl border border-bali-gold/40 bg-black/60 text-white focus:border-bali-gold outline-none text-xs">
                <option value="hadir">Prasida Rauh (Hadir)</option>
                <option value="ragu">Kanten Ragu (Tentatif)</option>
                <option value="tidak_hadir">Nenten Prasida (Tidak Hadir)</option>
              </select>
            </div>
            <div>
              <label class="block font-cinzel text-[10px] font-bold text-bali-goldLight uppercase tracking-wider mb-1.5">Akeh Undangan</label>
              <input type="number" name="guest_count" min="1" max="5" value="1" class="w-full px-3 py-3 rounded-xl border border-bali-gold/40 bg-black/60 text-white focus:border-bali-gold outline-none text-xs">
            </div>
          </div>

          <div>
            <label class="block font-cinzel text-[10px] font-bold text-bali-goldLight uppercase tracking-wider mb-1.5">Atur Doa &amp; Pangastungkara</label>
            <textarea name="message" rows="3" required placeholder="Tuliskan doa restu miwah paswecan Ida Sang Hyang Widhi..." class="w-full px-4 py-3 rounded-xl border border-bali-gold/40 bg-black/60 text-white focus:border-bali-gold outline-none text-xs"></textarea>
          </div>

          <button type="submit" class="w-full py-3.5 rounded-xl bg-gradient-to-r from-bali-gold via-bali-goldLight to-bali-gold text-bali-redSacred font-cinzel font-bold text-xs uppercase tracking-widest shadow-xl hover:brightness-110 transition duration-300">
            Kirim Doa Restu (Ngaturang Suksema)
          </button>
        </form>
      </div>

      <!-- Live Wishes List -->
      <div class="p-6 rounded-3xl bg-bali-redSacred/70 border border-bali-gold/40 shadow-lg reveal">
        <div class="flex items-center justify-between mb-4 pb-2 border-b border-bali-gold/20">
          <h3 class="font-serif text-lg font-bold text-bali-goldLight flex items-center gap-2">
            <i class="fa-solid fa-comments text-bali-gold"></i>
            Doa Semeton Sami ({{ count($wishes) }})
          </h3>
        </div>

        <div id="wishes-container" class="space-y-3.5 max-h-80 overflow-y-auto pr-1">
          @foreach($wishes as $w)
          <div class="p-3.5 rounded-2xl bg-black/50 border border-bali-gold/30 shadow-sm text-left">
            <div class="flex items-center justify-between mb-1">
              <h5 class="font-serif font-bold text-sm text-bali-goldLight">{{ $w->name }}</h5>
              <span class="text-[9px] font-cinzel px-2 py-0.5 rounded-full font-bold bg-green-900/60 text-green-300 border border-green-600/50">
                {{ ucfirst($w->attendance ?? 'hadir') }}
              </span>
            </div>
            <p class="text-xs text-neutral-200 leading-relaxed">{{ $w->message }}</p>
          </div>
          @endforeach
        </div>
      </div>
    </section>
@endif

    <!-- FOOTER / PENUTUP -->
    <footer class="bg-bali-sandstone text-neutral-200 py-16 px-6 text-center relative border-t border-bali-gold/40">
      <div class="w-14 h-14 mx-auto mb-4 rounded-full border border-bali-gold flex items-center justify-center text-bali-goldLight gold-glow">
        <i class="fa-solid fa-om text-2xl"></i>
      </div>

      <h3 class="font-serif text-2xl font-bold text-bali-goldLight mb-2">Om Shanti, Shanti, Shanti, Om</h3>

      <p class="font-serif italic text-base text-neutral-300 leading-relaxed mb-6">
        Matur suksema antuk uratian, paswecan, lan doa restu semeton sareng sami. Dumogi Ida Sang Hyang Widhi Wasa ngicenin karahayuan lan karahajengan ring iraga sareng sami.
      </p>

      <span class="font-cinzel text-[10px] uppercase tracking-[0.25em] text-bali-goldLight">Sane Ngaturang Pangayubagia</span>
      <h4 class="font-serif text-2xl font-bold text-white mt-1 mb-5">
        {{ $groom['parents'] ?? 'Keluarga Purusha' }} &amp; {{ $bride['parents'] ?? 'Keluarga Pradana' }}
      </h4>

      <div class="w-20 h-px bg-gradient-to-r from-transparent via-bali-gold to-transparent mx-auto my-5"></div>

      <h2 class="font-script text-5xl text-bali-goldLight mb-2">{{ $groom['nickname'] ?? 'Mahendra' }} &amp; {{ $bride['nickname'] ?? 'Kencana' }}</h2>
      <p class="text-[10px] text-neutral-400 font-cinzel uppercase tracking-widest">© {{ date('Y') }} Pawiwahan Yadnya Adat Bali</p>
      <div style="margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.15); text-align: center;">
        <a href="http://janoerkoening.com" target="_blank" rel="noopener noreferrer" style="display: inline-block; text-decoration: none;">
          <img src="{{ asset('assets/brand/logo-white.png') }}" alt="Janoer Koening" style="height: 30px; width: auto; margin: 0 auto; opacity: 0.85;">
        </a>
        <p style="font-size: 11px; margin-top: 8px; letter-spacing: 0.08em; color: rgba(255,255,255,0.75); text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">Digital Wedding Invitation by Janoer Koening</p>
      </div>
    </footer>

    <!-- Bottom Balinese Patra Border -->
    <div class="bali-gold-patra-bottom opacity-95"></div>
  </div>

  <!-- Toast Notification element -->
  <div id="toast" class="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 bg-[#0b0305] text-bali-goldLight px-5 py-2.5 rounded-full border border-bali-gold text-[11px] font-cinzel tracking-wider shadow-2xl opacity-0 pointer-events-none transition-all duration-300 flex items-center gap-2">
    <i class="fa-solid fa-circle-check text-green-400"></i>
    <span id="toast-text">Berhasil disalin!</span>
  </div>

  <script>
    /* 1. Animated Falling Balinese Frangipani Canvas */
    const canvas = document.getElementById('floral-canvas');
    const ctx = canvas.getContext('2d');
    let width = canvas.width = window.innerWidth;
    let height = canvas.height = window.innerHeight;

    window.addEventListener('resize', () => {
      width = canvas.width = window.innerWidth;
      height = canvas.height = window.innerHeight;
    });

    class JepunPetal {
      constructor() { this.reset(); }
      reset() {
        this.x = Math.random() * width;
        this.y = Math.random() * -height;
        this.size = Math.random() * 9 + 8;
        this.speedY = Math.random() * 1.1 + 0.6;
        this.speedX = Math.random() * 1.4 - 0.7;
        this.rotation = Math.random() * 360;
        this.rotSpeed = (Math.random() - 0.5) * 1.6;
        this.opacity = Math.random() * 0.45 + 0.4;
      }
      update() {
        this.y += this.speedY;
        this.x += this.speedX + Math.sin(this.y * 0.015) * 0.6;
        this.rotation += this.rotSpeed;
        if (this.y > height + 25) {
          this.reset();
          this.y = -20;
        }
      }
      draw() {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate((this.rotation * Math.PI) / 180);
        ctx.globalAlpha = this.opacity;

        for (let i = 0; i < 5; i++) {
          ctx.save();
          ctx.rotate((i * 72 * Math.PI) / 180);
          ctx.beginPath();
          ctx.ellipse(0, this.size * 0.65, this.size * 0.38, this.size * 0.7, 0, 0, Math.PI * 2);
          const grad = ctx.createRadialGradient(0, this.size * 0.2, 1, 0, this.size * 0.6, this.size * 0.75);
          grad.addColorStop(0, '#FFE875');
          grad.addColorStop(0.35, '#FFF6BD');
          grad.addColorStop(1, '#FFFFFF');
          ctx.fillStyle = grad;
          ctx.fill();
          ctx.restore();
        }

        ctx.beginPath();
        ctx.arc(0, 0, this.size * 0.22, 0, Math.PI * 2);
        ctx.fillStyle = '#D4AF37';
        ctx.fill();
        ctx.restore();
      }
    }

    const petals = [];
    const petalCount = 28;
    for (let i = 0; i < petalCount; i++) {
      petals.push(new JepunPetal());
    }

    function animatePetals() {
      ctx.clearRect(0, 0, width, height);
      petals.forEach(p => { p.update(); p.draw(); });
      requestAnimationFrame(animatePetals);
    }
    animatePetals();

    /* 2. Audio Engine: HTML5 or Synthesizer */
    const bgMusic = document.getElementById('bgMusic');
    let isPlaying = false;
    let audioCtx = null;
    let gamelanInterval = null;
    const rindikFrequencies = [293.66, 329.63, 369.99, 440.00, 493.88, 587.33, 659.25];

    function initSynthAudio() {
      if (!audioCtx) {
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        audioCtx = new AudioContext();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
    }

    function playRindikNote(freq, timeOffset = 0, duration = 1.4) {
      if (!audioCtx) return;
      const now = audioCtx.currentTime + timeOffset;
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      osc.type = 'triangle';
      osc.frequency.setValueAtTime(freq, now);
      gain.gain.setValueAtTime(0.001, now);
      gain.gain.exponentialRampToValueAtTime(0.18, now + 0.03);
      gain.gain.exponentialRampToValueAtTime(0.0001, now + duration);
      osc.connect(gain);
      gain.connect(audioCtx.destination);
      osc.start(now);
      osc.stop(now + duration + 0.1);
    }

    function startAudio() {
      if (bgMusic) {
        bgMusic.play().then(() => {
          isPlaying = true;
          document.getElementById('audio-disc-icon').classList.add('fa-spin');
        }).catch(() => {});
      } else {
        initSynthAudio();
        isPlaying = true;
        const melodySequence = [[0, 3], [1], [2, 4], [3], [4, 6], [2], [1, 3], [0]];
        let step = 0;
        gamelanInterval = setInterval(() => {
          if (!isPlaying) return;
          const notes = melodySequence[step % melodySequence.length];
          notes.forEach((idx, offset) => {
            const freq = rindikFrequencies[idx % rindikFrequencies.length];
            playRindikNote(freq, offset * 0.08, 1.2);
          });
          step++;
        }, 550);
        document.getElementById('audio-disc-icon').classList.add('fa-spin');
      }
    }

    function stopAudio() {
      isPlaying = false;
      if (bgMusic) {
        bgMusic.pause();
      }
      if (gamelanInterval) clearInterval(gamelanInterval);
      document.getElementById('audio-disc-icon').classList.remove('fa-spin');
    }

    const btnAudioToggle = document.getElementById('audio-toggle-btn');
    btnAudioToggle.addEventListener('click', () => {
      if (isPlaying) { stopAudio(); } else { startAudio(); }
    });

    /* 3. Cover Splash Trigger */
    const coverModal = document.getElementById('cover-modal');
    const btnOpen = document.getElementById('btn-open-invitation');
    if (btnOpen) {
      btnOpen.addEventListener('click', () => {
        coverModal.classList.add('opacity-0', 'pointer-events-none');
        setTimeout(() => { coverModal.style.display = 'none'; }, 1000);
        startAudio();
      });
    }

    /* 4. Countdown Timer */
    const eventTimeStr = "{{ $eventDate }}T{{ $eventTime }}:00";
    const targetDate = new Date(eventTimeStr).getTime() || new Date("2026-11-29T09:00:00").getTime();
    const daysEl = document.getElementById('cd-days');
    const hoursEl = document.getElementById('cd-hours');
    const minsEl = document.getElementById('cd-minutes');
    const secsEl = document.getElementById('cd-seconds');

    setInterval(() => {
      const now = new Date().getTime();
      const diff = targetDate - now;
      if (diff <= 0) {
        if(daysEl) daysEl.innerText = "00";
        if(hoursEl) hoursEl.innerText = "00";
        if(minsEl) minsEl.innerText = "00";
        if(secsEl) secsEl.innerText = "00";
        return;
      }
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      if(daysEl) daysEl.innerText = String(days).padStart(2, '0');
      if(hoursEl) hoursEl.innerText = String(hours).padStart(2, '0');
      if(minsEl) minsEl.innerText = String(minutes).padStart(2, '0');
      if(secsEl) secsEl.innerText = String(seconds).padStart(2, '0');
    }, 1000);

        function toggleGiftAccordion(btn) {
      const content = document.getElementById('gift-accordion-content');
      if (!content) return;
      const isHidden = content.classList.contains('hidden') || content.style.display === 'none';
      if (isHidden) {
        content.classList.remove('hidden');
        content.style.display = 'block';
        if (btn) {
          const label = btn.querySelector('.gift-btn-label');
          if (label) label.textContent = 'Tutup Rekening';
        }
      } else {
        content.classList.add('hidden');
        content.style.display = 'none';
        if (btn) {
          const label = btn.querySelector('.gift-btn-label');
          if (label) label.textContent = 'Kirim Hadiah / Buka Rekening';
        }
      }
    }
    function toggleGiftBox(btn) { toggleGiftAccordion(btn); }

    function copyGiftNumber(elId, btn) {
      const el = document.getElementById(elId);
      if (!el) return;
      const text = el.innerText.trim();
      navigator.clipboard.writeText(text).then(() => {
        showToast('Nomor rekening berhasil disalin!');
      }).catch(() => {
        prompt('Salin nomor rekening:', text);
      });
    }

    /* 5. Copy Account Number & Toast */
    function copyAccount(text, label) {
      navigator.clipboard.writeText(text).then(() => {
        showToast(`${label} berhasil disalin!`);
      });
    }

    function showToast(msg) {
      const toast = document.getElementById('toast');
      const text = document.getElementById('toast-text');
      text.innerText = msg;
      toast.classList.remove('opacity-0', 'pointer-events-none');
      toast.classList.add('opacity-100');
      setTimeout(() => {
        toast.classList.remove('opacity-100');
        toast.classList.add('opacity-0', 'pointer-events-none');
      }, 2500);
    }

    /* 6. Lightbox Preview */
    function openLightbox(src, caption) {
      const modal = document.getElementById('lightbox-modal');
      const img = document.getElementById('lightbox-img');
      const cap = document.getElementById('lightbox-caption');
      img.src = src;
      cap.innerText = caption;
      modal.classList.remove('hidden');
      modal.classList.add('flex');
    }

    function closeLightbox() {
      const modal = document.getElementById('lightbox-modal');
      modal.classList.add('hidden');
      modal.classList.remove('flex');
    }

    /* 7. Scroll Reveal */
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('active');
        }
      });
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
  </script>
</body>
</html>