@php
    $bride = $invitation->bride ?? [
        'name' => 'Clarissa Anindya, S.Ked',
        'nickname' => 'Clarissa',
        'parents' => 'Bapak Ir. Hendra Kusuma & Ibu Dewi Anggraini',
        'photo' => $invitation->bride_photo_url ?? ($invitation->bride_photo ?? asset('templates/vip/exclusive13/images/bride.jpg')),
        'instagram' => $invitation->bride_instagram ?? '@clarissaanindya',
    ];
    $groom = $invitation->groom ?? [
        'name' => 'Aditya Pratama, M.B.A',
        'nickname' => 'Aditya',
        'parents' => 'Bapak Bambang Soediro & Ibu Rina Kartika',
        'photo' => $invitation->groom_photo_url ?? ($invitation->groom_photo ?? asset('templates/vip/exclusive13/images/groom.jpg')),
        'instagram' => $invitation->groom_instagram ?? '@adityapratama',
    ];
    $coverPhoto = $invitation->cover_photo ?? ($invitation->hero_photo_url ?? asset('templates/vip/exclusive13/images/cover.jpg'));

    $events = $invitation->events ?? [
        [
            'title' => 'Akad Nikah',
            'date' => '2026-12-20',
            'start_time' => '08:00',
            'end_time' => '10:00',
            'timezone' => 'WIB',
            'venue' => 'Masjid Raya Al-Mukarram',
            'address' => 'Gedung Serbaguna Melati, Jakarta',
            'maps_url' => 'https://maps.google.com',
        ],
        [
            'title' => 'Resepsi Pernikahan',
            'date' => '2026-12-20',
            'start_time' => '11:00',
            'end_time' => '14:00',
            'timezone' => 'WIB',
            'venue' => 'Grand Melati Ballroom',
            'address' => 'Gedung Serbaguna Melati, Jakarta',
            'maps_url' => 'https://maps.google.com',
        ],
    ];
    $primaryEvent = $events[0] ?? null;
    $eventDate = $primaryEvent['date'] ?? '2026-12-20';
    $eventTime = $primaryEvent['start_time'] ?? '08:00';
    $carbonDate = \Carbon\Carbon::parse($eventDate);
    $formattedDate = $carbonDate->locale('id')->isoFormat('dddd · D · MMMM · Y');

    $galleries = $invitation->gallery ?? ($invitation->gallery_photos ?? [
        asset('templates/vip/exclusive13/images/gallery-01.jpg'),
        asset('templates/vip/exclusive13/images/gallery-02.jpg'),
        asset('templates/vip/exclusive13/images/gallery-03.jpg'),
        asset('templates/vip/exclusive13/images/gallery-04.jpg'),
        asset('templates/vip/exclusive13/images/gallery-05.jpg'),
        asset('templates/vip/exclusive13/images/gallery-06.jpg'),
    ]);

    $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' => 'Aditya Pratama',
            'name' => 'Aditya Pratama',
        ],
        [
            'bank_name' => 'Bank Mandiri',
            'bank' => 'Bank Mandiri',
            'account_number' => '9876543210',
            'number' => '9876543210',
            'account_holder' => 'Clarissa Anindya',
            'name' => 'Clarissa Anindya',
        ],
    ];
    $hasGifts = !empty($gifts) || !empty($invitation->qris_image_url) || !empty($invitation->qris_image);

    $stories = $invitation->stories ?? [
        [
            'year' => '2018',
            'title' => 'Pertemuan Pertama',
            'story' => 'Sebuah pertemuan sederhana membuka lembar pertama kisah kami.',
        ],
        [
            'year' => '2020',
            'title' => 'Saling Mengenal',
            'story' => 'Kami belajar memahami, saling menguatkan, dan tumbuh bersama.',
        ],
        [
            'year' => '2024',
            'title' => 'Sebuah Janji (Lamaran)',
            'story' => 'Dengan keyakinan dan doa restu kedua keluarga, kami memutuskan melangkah bersama.',
        ],
        [
            'year' => '2026',
            'title' => 'Selamanya Dimulai',
            'story' => 'Dua cerita menjadi satu perjalanan menuju masa depan dalam ikatan pernikahan suci.',
        ],
    ];

    $defaultQuoteText = 'Dan di antara tanda-tanda kekuasaan-Nya ialah Dia menciptakan untukmu pasangan hidup dari jenismu sendiri, supaya kamu mendapat ketenangan hati dan dijadikan-Nya kasih sayang di antara kamu.';
    $defaultQuoteSource = 'QS. Ar-Rum : 21';
    $quoteText = !empty($invitation->quote) ? $invitation->quote : $defaultQuoteText;
    $quoteSource = !empty($invitation->quote_author) ? $invitation->quote_author : $defaultQuoteSource;

    $wishes = $invitation->wishes ?? [
        (object)[
            'name' => 'Keluarga Besar Soediro & Kusuma',
            'attendance' => 'Hadir',
            'message' => 'Selamat menempuh hidup baru untuk Aditya & Clarissa! Semoga menjadi keluarga yang sakinah, mawaddah, dan warahmah.',
            'created_at' => now()->subHours(2),
        ],
    ];

    $isDemoMode = request()->routeIs('template.demo*') || request()->is('demo/*') || !empty($invitation->is_demo);
    $liveUrl = $isDemoMode 
        ? route('template.demo.live', $template->slug ?? 'exclusive13') 
        : (!empty($invitation->slug) ? route('invitation.live', $invitation->slug) : '#');
    if ($guestName ?? null) {
        $liveUrl .= (str_contains($liveUrl, '?') ? '&' : '?') . 'to=' . urlencode($guestName);
    }

    $audioUrl = !empty($invitation->audio_url) 
        ? $invitation->audio_url 
        : asset('templates/vip/exclusive13/music/wedding-song.mp3');
@endphp
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Undangan Pernikahan | {{ $bride['nickname'] ?? 'Clarissa' }} &amp; {{ $groom['nickname'] ?? 'Aditya' }}</title>
  <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=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&family=Italianno&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ asset('templates/vip/exclusive13/css/style.css') }}">
  <style>
    .music-btn-floating {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 9999;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: #552735;
      color: #dfcda6;
      border: 1.5px solid #dfcda6;
      display: grid;
      place-items: center;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .music-btn-floating:hover {
      transform: scale(1.08);
    }
    .music-btn-floating.rotating {
      animation: spinMusic 4s linear infinite;
    }
    @keyframes spinMusic {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .gift-box-wrapper.hidden {
      display: none !important;
    }
    .dock {
      position: fixed;
      left: 50%;
      bottom: 16px;
      z-index: 50;
      transform: translate(-50%, 140%);
      display: flex;
      gap: 4px;
      padding: 6px;
      background: rgba(44, 28, 34, 0.92);
      border: 1px solid rgba(223, 205, 166, 0.6);
      border-radius: 30px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.4);
      transition: transform 0.5s ease;
    }
    .dock.show {
      transform: translate(-50%, 0);
    }
    .dock a {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #dfcda6;
      text-decoration: none;
      transition: 0.3s;
    }
    .dock a:hover {
      background: #dfcda6;
      color: #34252a;
    }
    .dock svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    @media (max-width: 700px) {
      .music-btn-floating {
        bottom: 74px;
        right: 16px;
        width: 42px;
        height: 42px;
      }
      .dock {
        bottom: 12px;
        padding: 4px;
        gap: 2px;
      }
      .dock a {
        width: 40px;
        height: 40px;
      }
    }
  </style>
</head>
<body class="locked">
  @include('templates.partials.preview-banner')

  <!-- COVER SECTION -->
  <section class="cover" id="cover">
    <div class="cover-inner">
      <p class="eyebrow">THE WEDDING CELEBRATION OF</p>
      <div class="monogram">{{ substr($groom['nickname'] ?? 'A', 0, 1) }} <i>&amp;</i> {{ substr($bride['nickname'] ?? 'C', 0, 1) }}</div>
      <div class="hero-photo">
        <img src="{{ $coverPhoto }}" alt="Foto mempelai">
      </div>
      <div class="script">{{ $groom['nickname'] ?? 'Aditya' }} &amp; {{ $bride['nickname'] ?? 'Clarissa' }}</div>
      <p class="date">{{ $formattedDate }}</p>
      <p style="margin: 18px 0 22px;">Kepada Yth.<br><b style="font-size: 1.15rem; color: #dfcda6;">{{ $guestName ?? 'Bapak/Ibu/Saudara/i' }}</b></p>
      <button class="btn gold" id="open" onclick="openInvitation()">Buka Undangan</button>
      <p class="brand" style="margin-top: 24px;">Janoer Koening</p>
    </div>
  </section>

  <main id="main">
    <!-- SECTION INTRO / COUNTDOWN -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown'))
    <section class="section intro reveal" id="countdown">
      <p class="eyebrow rose">SAVE THE MOMENT</p>
      <h1>Menuju Hari Bahagia</h1>
      <p>Dengan penuh rasa syukur, kami mengundang Anda menjadi bagian dari hari istimewa kami.</p>
      <div class="countdown" data-date="{{ $eventDate }}T{{ $eventTime }}:00+07:00">
        <div><b id="days">00</b>Hari</div>
        <div><b id="hours">00</b>Jam</div>
        <div><b id="minutes">00</b>Menit</div>
        <div><b id="seconds">00</b>Detik</div>
      </div>
    </section>
    @endif

    <!-- SECTION QUOTE -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('quote'))
    <section class="section quote reveal" id="ayat">
      <span class="ornament">❦</span>
      <p class="arabic">وَمِنْ آيَاتِهِ أَنْ خَلَقَ لَكُم مِّنْ أَنفُسِكُمْ أَزْوَاجًا لِّتَسْكُنُوا إِلَيْهَا وَجَعَلَ بَيْنَكُم مَّوَدَّةً وَرَحْمَةً</p>
      <p>“{{ $quoteText }}”</p>
      <small>{{ $quoteSource }}</small>
    </section>
    @endif

    <!-- SECTION MEMPELAI -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('couple'))
    <section class="section couple reveal" id="pengantin">
      <p class="eyebrow rose">THE BRIDE &amp; GROOM</p>
      <h1>Dua Hati, Satu Janji</h1>
      <div class="couples">
        <article>
          <img src="{{ $groom['photo'] }}" alt="{{ $groom['name'] }}">
          <small>THE GROOM</small>
          <h2>{{ $groom['name'] }}</h2>
          <p>{{ $groom['parents'] }}</p>
          @if(!empty($groom['instagram']))
          <p style="margin-top: 6px;"><a href="https://instagram.com/{{ ltrim($groom['instagram'], '@') }}" target="_blank" rel="noopener" style="color: #b99a60; text-decoration: none;">{{ $groom['instagram'] }}</a></p>
          @endif
        </article>
        <div class="amp">&amp;</div>
        <article>
          <img src="{{ $bride['photo'] }}" alt="{{ $bride['name'] }}">
          <small>THE BRIDE</small>
          <h2>{{ $bride['name'] }}</h2>
          <p>{{ $bride['parents'] }}</p>
          @if(!empty($bride['instagram']))
          <p style="margin-top: 6px;"><a href="https://instagram.com/{{ ltrim($bride['instagram'], '@') }}" target="_blank" rel="noopener" style="color: #b99a60; text-decoration: none;">{{ $bride['instagram'] }}</a></p>
          @endif
        </article>
      </div>
    </section>
    @endif

    <!-- SECTION ACARA -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('event'))
    <section class="section events reveal" id="jadwal">
      <p class="eyebrow rose">SAVE THE DATE</p>
      <h1>Hari Istimewa Kami</h1>
      <div class="cards">
        @foreach($events as $idx => $ev)
        @php
            $evCarbon = !empty($ev['date']) ? \Carbon\Carbon::parse($ev['date']) : $carbonDate;
        @endphp
        <article class="{{ $idx === 1 ? 'featured' : '' }}">
          <small>{{ strtoupper($ev['title'] ?? 'ACARA') }}</small>
          <h2>{{ $evCarbon->locale('id')->isoFormat('dddd, D MMMM Y') }}</h2>
          <b>{{ $ev['start_time'] ?? '08.00' }} – {{ $ev['end_time'] ?? 'Selesai' }} {{ $ev['timezone'] ?? 'WIB' }}</b>
          <p><strong>{{ $ev['venue'] ?? '' }}</strong><br>{{ $ev['address'] ?? '' }}</p>
          @php
            $calLink = 'https://calendar.google.com/calendar/render?action=TEMPLATE&text=' . urlencode(($ev['title'] ?? 'Acara') . ' ' . ($bride['nickname'] ?? '') . ' & ' . ($groom['nickname'] ?? '')) . '&dates=' . $evCarbon->format('Ymd') . 'T010000Z/' . $evCarbon->format('Ymd') . 'T070000Z&location=' . urlencode(($ev['venue'] ?? '') . ', ' . ($ev['address'] ?? ''));
          @endphp
          <div style="display: flex; gap: 12px; justify-content: center; margin-top: 14px; flex-wrap: wrap;">
            @if(!empty($ev['maps_url']))
            <a href="{{ $ev['maps_url'] }}" target="_blank" rel="noopener">Petunjuk Lokasi ↗</a>
            @endif
            <a href="{{ $calLink }}" target="_blank" rel="noopener">+ Kalender ↗</a>
          </div>
        </article>
        @endforeach
      </div>
    </section>
    @endif

    <!-- SECTION KISAH CINTA -->
    @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('story')) && !empty($stories) && count($stories) > 0)
    <section class="section story reveal" id="kisah">
      <p class="eyebrow rose">OUR LOVE STORY</p>
      <h1>Kisah yang Kami Rajut</h1>
      <div class="timeline">
        @foreach($stories as $st)
        <article>
          <time>{{ $st['year'] ?? '' }}</time>
          <div>
            <h2>{{ $st['title'] ?? 'Kisah Cinta' }}</h2>
            <p>{{ $st['story'] ?? ($st['description'] ?? '') }}</p>
          </div>
        </article>
        @endforeach
      </div>
    </section>
    @endif

    <!-- SECTION GALERI -->
    @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gallery')) && !empty($galleries) && count($galleries) > 0)
    <section class="section gallery reveal" id="galeri">
      <p class="eyebrow">FRAGMENTS OF FOREVER</p>
      <h1>Galeri Kenangan</h1>
      <div class="gallery-grid">
        @foreach($galleries as $idx => $gPhoto)
        <button type="button" onclick="openLightbox('{{ $gPhoto }}')">
          <img src="{{ $gPhoto }}" alt="Kenangan {{ $idx + 1 }}">
        </button>
        @endforeach
      </div>
    </section>
    @endif

    <!-- SECTION LIVE STREAMING BANNER -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('streaming'))
    <section class="section live reveal" id="live">
      <p class="eyebrow rose">JOIN US FROM ANYWHERE</p>
      <h1>Saksikan Secara Live</h1>
      <div class="live-frame">
        <div>
          <span>● LIVE STREAMING</span>
          <div class="mini">{{ substr($groom['nickname'] ?? 'A', 0, 1) }} <i>&amp;</i> {{ substr($bride['nickname'] ?? 'C', 0, 1) }}</div>
          <h2>{{ $groom['nickname'] ?? 'Aditya' }} &amp; {{ $bride['nickname'] ?? 'Clarissa' }}</h2>
          <p>{{ $carbonDate->locale('id')->isoFormat('D MMMM Y') }} · {{ $eventTime }} WIB</p>
          <a class="btn gold" href="{{ $liveUrl }}">Buka Live Streaming</a>
        </div>
      </div>
    </section>
    @endif

    <!-- SECTION TANDA KASIH -->
    @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gift')) && $hasGifts)
    <section class="section gifts reveal" id="hadiah">
      <p class="eyebrow rose">A GIFT FROM THE HEART</p>
      <h1>Tanda Kasih</h1>
      <p>Doa dan kehadiran Anda adalah hadiah terindah. Jika berkenan memberi tanda kasih:</p>

      <div style="text-align: center; margin: 24px 0 10px;">
        <button type="button" class="btn gold" onclick="toggleGiftAccordion(this)">
          <span class="gift-btn-label">Buka Rekening &amp; Hadiah</span>
        </button>
      </div>

      <div id="gift-accordion-content" class="gift-box-wrapper hidden">
        <div class="cards">
          @foreach($gifts as $idx => $g)
          <article>
            <small>{{ strtoupper($g['bank_name'] ?? ($g['bank'] ?? 'TRANSFER')) }}</small>
            <h2>{{ $g['account_holder'] ?? ($g['name'] ?? 'Mempelai') }}</h2>
            <code id="rek{{ $idx }}">{{ $g['account_number'] ?? ($g['number'] ?? '') }}</code>
            <button class="copy" type="button" data-copy="{{ $g['account_number'] ?? ($g['number'] ?? '') }}">Salin Rekening</button>
          </article>
          @endforeach
        </div>

        @if(!empty($invitation->qris_image_url) || !empty($invitation->qris_image))
        <div style="text-align: center; margin: 30px auto; max-width: 320px; background: #fffdf9; padding: 22px; border: 1px solid rgba(85,39,53,0.2);">
          <strong style="color: #552735; display: block; margin-bottom: 10px; font-family: 'Cormorant Garamond', serif; font-size: 1.4rem;">QRIS Tanda Kasih</strong>
          <img src="{{ $invitation->qris_image_url ?? $invitation->qris_image }}" alt="QRIS" style="max-width: 220px; width: 100%; border-radius: 6px;">
        </div>
        @endif

        @if(!empty($invitation->address))
        <div style="max-width: 700px; margin: 30px auto 0; padding: 28px 20px; background: #fffdf9; border: 1px solid rgba(85,39,53,0.2); text-align: center;">
          <small style="color: #b9878c; letter-spacing: 0.2em; text-transform: uppercase;">Kirim Hadiah Fisik</small>
          <p id="alamatText" style="margin: 8px 0 16px; color: #403331;">{{ $invitation->address }}</p>
          <button class="copy" type="button" data-copy="{{ $invitation->address }}">Salin Alamat</button>
        </div>
        @endif
      </div>
    </section>
    @endif

    <!-- SECTION RSVP & UCAPAN -->
    @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('wishes')) && ($invitation->is_rsvp_active ?? true))
    <section class="section rsvp reveal" id="rsvp">
      <p class="eyebrow rose">LEAVE YOUR WISHES</p>
      <h1>RSVP &amp; Ucapan</h1>
      @if(session('wish_success'))
        <div style="background: rgba(46,125,50,0.15); border: 1px solid #4caf50; color: #2e7d32; padding: 12px; border-radius: 6px; margin-bottom: 16px; font-weight: 500;">
          {{ session('wish_success') }}
        </div>
      @endif
      @if(session('wish_error'))
        <div style="background: rgba(198,40,40,0.15); border: 1px solid #e57373; color: #c62828; padding: 12px; border-radius: 6px; margin-bottom: 16px; font-weight: 500;">
          {{ session('wish_error') }}
        </div>
      @endif
      <form id="form" method="POST" action="{{ !empty($invitation->slug) ? route('invitation.wish', $invitation->slug) : '#' }}">
        @csrf
        <input name="name" value="{{ $guestName ?? '' }}" required placeholder="Nama Anda">
        <select name="attendance" required>
          <option value="">Konfirmasi Kehadiran</option>
          <option value="Hadir" selected>Hadir</option>
          <option value="Berhalangan hadir">Berhalangan hadir</option>
          <option value="Masih Ragu">Masih Ragu</option>
        </select>
        <input name="guest_count" type="number" min="1" max="5" value="1" placeholder="Jumlah Tamu">
        <textarea name="message" required rows="4" placeholder="Ucapan dan doa terbaik Anda..."></textarea>
        <button class="btn dark" type="submit">Kirim Ucapan</button>
      </form>
      <div id="wishes">
        @foreach($wishes as $w)
        <article>
          <b>{{ $w->name }} · {{ ucfirst($w->attendance ?? 'Hadir') }}</b>
          <span>{{ $w->message }}</span>
        </article>
        @endforeach
      </div>
    </section>
    @endif

    <!-- FOOTER -->
    <footer>
      <div class="ornament">❦</div>
      <div class="monogram">{{ substr($groom['nickname'] ?? 'A', 0, 1) }} <i>&amp;</i> {{ substr($bride['nickname'] ?? 'C', 0, 1) }}</div>
      <div class="script">{{ $groom['nickname'] ?? 'Aditya' }} &amp; {{ $bride['nickname'] ?? 'Clarissa' }}</div>
      <p>{{ $formattedDate }}</p>
      <hr>
      <div style="margin-top: 24px; 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.png') }}" alt="Janoer Koening" style="height: 32px; width: auto; margin: 0 auto; opacity: 0.9;">
        </a>
        <p style="margin: 8px 0 4px; font-weight: 600; letter-spacing: 0.15em; color: #dfcda6;">JANOER KOENING</p>
        <p style="margin: 0; font-size: 13px; color: rgba(255,255,255,0.7);">Merangkai Kisah, Mengundang Bahagia.</p>
        <small style="display: block; margin-top: 8px; font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); text-transform: uppercase;">Digital Wedding Invitation by Janoer Koening</small>
      </div>
    </footer>

    <!-- Dock Navigasi -->
    <nav class="dock" id="dock" aria-label="Navigasi">
      <a href="#countdown" title="Beranda"><svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg></a>
      <a href="#pengantin" title="Mempelai"><svg viewBox="0 0 24 24"><path d="M12 21s-7-4.4-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.6-9.5 9-9.5 9z"/></svg></a>
      <a href="#jadwal" title="Acara"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg></a>
      <a href="#galeri" title="Galeri"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="M21 16l-5-5-8 8"/></svg></a>
      <a href="#rsvp" title="Ucapan"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg></a>
    </nav>
  </main>

  <!-- Lightbox -->
  <div class="lightbox" id="lightbox" onclick="closeLightbox()"><button id="close" onclick="closeLightbox()">×</button><img id="lightboxImg" alt="Galeri"></div>
  <div class="toast" id="toast"></div>

  <!-- Audio Player Floating -->
  @if(!empty($audioUrl))
  <audio id="weddingMusicPlayer" src="{{ $audioUrl }}" preload="auto" loop></audio>
  <button id="floatingMusicBtn" class="music-btn-floating" onclick="toggleMusic()" aria-label="Toggle Musik">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
    </svg>
  </button>
  @endif

  <script src="{{ asset('templates/vip/exclusive13/js/script.js') }}"></script>
  <script>
    function openInvitation() {
      const cover = document.getElementById('cover');
      const main = document.getElementById('main');
      if (cover) cover.style.display = 'none';
      if (main) main.style.display = 'block';
      document.body.classList.remove('locked');
      playMusic();
    }

    let isPlaying = false;
    function playMusic() {
      const audio = document.getElementById("weddingMusicPlayer");
      const btn = document.getElementById("floatingMusicBtn");
      if (audio) {
        audio.play().then(() => {
          isPlaying = true;
          if (btn) btn.classList.add("rotating");
        }).catch(() => {
          isPlaying = false;
        });
      }
    }
    function toggleMusic() {
      const audio = document.getElementById("weddingMusicPlayer");
      const btn = document.getElementById("floatingMusicBtn");
      if (!audio) return;
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        if (btn) btn.classList.remove("rotating");
      } else {
        audio.play();
        isPlaying = true;
        if (btn) btn.classList.add("rotating");
      }
    }

    function toggleGiftAccordion(btn) {
      const content = document.getElementById("gift-accordion-content");
      if (content) {
        content.classList.toggle("hidden");
        const label = btn.querySelector(".gift-btn-label");
        if (label) {
          label.textContent = content.classList.contains("hidden") 
            ? "Buka Rekening & Hadiah" 
            : "Tutup Rekening & Hadiah";
        }
      }
    }

    function openLightbox(src) {
      const lb = document.getElementById("lightbox");
      const img = document.getElementById("lightboxImg");
      if (lb && img) {
        img.src = src;
        lb.classList.add("show");
      }
    }
    function closeLightbox() {
      const lb = document.getElementById("lightbox");
      if (lb) lb.classList.remove("show");
    }

    const dock = document.getElementById("dock");
    window.addEventListener("scroll", () => {
      if (dock) dock.classList.toggle("show", window.scrollY > 300);
    }, { passive: true });
  </script>
</body>
</html>