@php
    $bride = $invitation->bride ?? [
        'name' => 'Citra Maharani, S.Ds',
        'nickname' => 'Citra',
        'father' => 'Bapak Surya Wijaya',
        'mother' => 'Ibu Ratna Dewi',
        'parents' => 'Bapak Surya Wijaya & Ibu Ratna Dewi',
        'instagram' => '@citra.maharani',
        'photo' => 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=700&q=85',
    ];
    $groom = $invitation->groom ?? [
        'name' => 'Adit Pratama, S.T',
        'nickname' => 'Adit',
        'father' => 'Bapak Indra Gunawan',
        'mother' => 'Ibu Sri Rahayu',
        'parents' => 'Bapak Indra Gunawan & Ibu Sri Rahayu',
        'instagram' => '@adit.pratama',
        'photo' => 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=700&q=85',
    ];

    $events = $invitation->events ?? [
        [
            'title' => 'Akad Nikah',
            'date' => '2026-12-20',
            'start_time' => '08.00',
            'end_time' => '10.00',
            'timezone' => 'WIB',
            'venue' => 'The Champagne Garden',
            'address' => 'Jl. Contoh Bahagia No. 20, Jakarta',
            'maps_url' => 'https://maps.google.com/?q=Jakarta',
        ],
        [
            'title' => 'Resepsi',
            'date' => '2026-12-20',
            'start_time' => '11.00',
            'end_time' => '14.00',
            'timezone' => 'WIB',
            'venue' => 'The Champagne Garden',
            'address' => 'Jl. Contoh Bahagia No. 20, Jakarta',
            'maps_url' => 'https://maps.google.com/?q=Jakarta',
        ],
    ];

    $primaryEvent = $events[0] ?? null;
    $eventDate = $primaryEvent['date'] ?? '2026-12-20';
    $carbonDate = \Carbon\Carbon::parse($eventDate);
    $formattedDate = $carbonDate->locale('id')->isoFormat('dddd, D MMMM Y');

    $stories = $invitation->stories ?? [
        [
            'year' => '2019',
            'title' => 'Sebuah pertemuan',
            'story' => 'Kami berkenalan tanpa rencana istimewa. Namun, percakapan kecil hari itu menjadi awal dari cerita yang terus kami syukuri.',
            'image' => 'https://images.unsplash.com/photo-1522673607200-164d1b6ce486?auto=format&fit=crop&w=700&q=85'
        ],
        [
            'year' => '2022',
            'title' => 'Belajar memilih satu sama lain',
            'story' => 'Hari demi hari mengajarkan kami arti mendengar, bertumbuh, dan menemukan rumah dalam diri satu sama lain.',
            'image' => 'https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?auto=format&fit=crop&w=700&q=85'
        ],
        [
            'year' => '2026',
            'title' => 'Menuju selamanya',
            'story' => 'Dengan restu keluarga dan hati yang mantap, kami memilih untuk menulis bab berikutnya bersama.',
            'image' => 'https://images.unsplash.com/photo-1523438885200-e635ba2c371e?auto=format&fit=crop&w=700&q=85'
        ],
    ];

    $galleryPhotos = $invitation->gallery_photos ?? [
        'https://images.unsplash.com/photo-1537633552985-df8429e8048b?auto=format&fit=crop&w=900&q=85',
        'https://images.unsplash.com/photo-1529636798458-92182e662485?auto=format&fit=crop&w=700&q=85',
        'https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=700&q=85',
        'https://images.unsplash.com/photo-1465495976277-4387d4b0e4a6?auto=format&fit=crop&w=700&q=85',
        'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=700&q=85',
    ];

    $rawBankAccounts = !empty($invitation->bank_accounts) ? $invitation->bank_accounts : (!empty($invitation->gifts) ? $invitation->gifts : null);
    $gifts = !empty($rawBankAccounts) ? $rawBankAccounts : [
        [
            'bank_name' => 'BCA',
            'account_number' => '1234 5678 90',
            'account_holder' => 'Citra Maharani',
        ],
        [
            'bank_name' => 'Bank Mandiri',
            'account_number' => '9876 5432 10',
            'account_holder' => 'Adit Pratama',
        ],
    ];

    $hasGifts = !empty($gifts) || !empty($invitation->qris_image_url) || !empty($invitation->qris_image);

    $wishes = $invitation->wishes ?? [
        (object)[
            'name' => 'Keluarga Besar Pratama & Maharani',
            'attendance' => 'hadir',
            'message' => 'Selamat menempuh hidup baru untuk Adit & Citra! Semoga sakinah, mawaddah, warahmah serta senantiasa dalam limpahan berkah.',
            '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 ?? 'exclusive15') 
        : (!empty($invitation->slug) ? route('invitation.live', $invitation->slug) : '#');
    if ($guestName ?? null) {
        $liveUrl .= (str_contains($liveUrl, '?') ? '&' : '?') . 'to=' . urlencode($guestName);
    }

    $audioUrl = $invitation->audio_url ?? asset('templates/vip/exclusive15/music/wedding-song.mp3');
    $rsvpAction = !empty($invitation->slug) ? route('invitation.wish', $invitation->slug) : '#';
@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() }}">
  <meta name="theme-color" content="#f6eee6">
  <title>{{ $groom['nickname'] ?? 'Adit' }} &amp; {{ $bride['nickname'] ?? 'Citra' }} — Janoer Koening</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;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ asset('templates/vip/exclusive15/css/style.css') }}">
  <style>
    /* Bottom Floating Dock */
    .dock {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(120px);
      background: rgba(43, 31, 26, 0.92);
      border: 1px solid rgba(223, 195, 168, 0.5);
      border-radius: 30px;
      padding: 6px 12px;
      display: flex;
      gap: 8px;
      z-index: 999;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .dock.show {
      transform: translateX(-50%) translateY(0);
    }
    .dock a {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #f1d7b9;
      text-decoration: none;
      transition: all 0.25s ease;
    }
    .dock a:hover {
      background: rgba(223, 195, 168, 0.2);
      color: #fff;
    }
    .dock svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Wishes List */
    .wishes-wrapper {
      margin-top: 36px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-height: 400px;
      overflow-y: auto;
      padding-right: 6px;
    }
    .wish-card {
      background: #fffaf5;
      border: 1px solid rgba(193, 154, 107, 0.3);
      padding: 16px 20px;
      border-radius: 4px;
      text-align: left;
    }
    .wish-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    .wish-name {
      font-weight: 600;
      color: #3b2b25;
      font-size: 0.95rem;
    }
    .wish-badge {
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 3px 8px;
      background: #f1dfd1;
      color: #6d4a3b;
      border-radius: 20px;
      font-weight: 500;
    }
    .wish-msg {
      font-size: 0.9rem;
      color: #55443d;
      margin: 0;
      line-height: 1.5;
    }

    .music-btn {
      position: fixed;
      top: 24px;
      right: 24px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(70, 58, 53, 0.85);
      backdrop-filter: blur(8px);
      border: 1.5px solid var(--champagne);
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
      display: grid;
      place-items: center;
      cursor: pointer;
      color: #f6eee6;
      z-index: 9999;
      transition: all 0.3s ease;
    }
    .music-btn.playing {
      animation: spin-music 5s linear infinite;
    }
    @keyframes spin-music {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .lightbox-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(30, 24, 20, 0.94);
      z-index: 999999;
      place-items: center;
      padding: 20px;
    }
    .lightbox-modal.open {
      display: grid;
    }
    .lightbox-modal img {
      max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
      border-radius: 4px;
      border: 1.5px solid var(--champagne);
    }
    body.locked {
      overflow: hidden;
      height: 100vh;
    }
    .gift-box-wrapper.hidden {
      display: none !important;
    }
  </style>
</head>
<body class="locked">
  @include('templates.partials.preview-banner')

  <!-- AUDIO PLAYER -->
  <audio id="weddingMusicPlayer" src="{{ $audioUrl }}" preload="auto" loop></audio>

  <!-- FLOATING MUSIC BUTTON -->
  <button type="button" class="music-btn" id="musicToggleBtn" aria-label="Putar / Jeda Musik">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 18V5l12-2v13"></path>
      <circle cx="6" cy="18" r="3"></circle>
      <circle cx="18" cy="16" r="3"></circle>
    </svg>
  </button>

  <div class="topline"><span>JANOER KOENING</span><span>WEDDING INVITATION</span></div>
  <main>
    <section class="hero" id="home">
      <div class="hero-photo" role="img" aria-label="Foto romantis pasangan pengantin" style="background-image: url('{{ $invitation->hero_photo_url ?? asset('templates/vip/exclusive15/images/cover.jpg') }}');"></div>
      <div class="hero-shade"></div>
      <img class="floral floral-left" src="{{ asset('templates/vip/exclusive15/assets/floral-corner.svg') }}" alt="" aria-hidden="true">
      <img class="floral floral-right" src="{{ asset('templates/vip/exclusive15/assets/floral-corner.svg') }}" alt="" aria-hidden="true">
      <div class="hero-content">
        <p class="eyebrow light">THE WEDDING OF</p>
        <h1><span>{{ $groom['nickname'] ?? 'Adit' }}</span><i>&amp;</i><span>{{ $bride['nickname'] ?? 'Citra' }}</span></h1>
        <p class="hero-date">{{ $formattedDate }}</p>
        <div class="hero-rule"><span></span><b>✦</b><span></span></div>
        @if($guestName ?? null)
        <p style="font-size: 0.95rem; margin-bottom: 12px; color: #fff3e8;">
          Kepada Yth. Bapak/Ibu/Saudara/i:<br>
          <strong style="font-size: 1.15rem; color: #f1d7b9;">{{ $guestName }}</strong>
        </p>
        @endif
        <p class="hero-note">Dengan penuh rasa syukur, kami mengundang Anda<br class="desktop"> untuk menjadi bagian dari hari bahagia kami.</p>
        <button class="open-invitation" id="openInvitation">Buka Undangan <span>↗</span></button>
      </div>
      <div class="hero-bottom"><span>SCROLL TO DISCOVER</span><span class="scroll-line"></span></div>
    </section>

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown') || $invitation->isSectionVisible('quote'))
    <section class="intro section-pad" id="countdown">
      @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('quote'))
      <p class="eyebrow">A PROMISE OF FOREVER</p>
      <h2>Two hearts, <em>one beautiful story.</em></h2>
      <p class="intro-copy">“{{ $invitation->quote ?? 'Dan di antara tanda-tanda kekuasaan-Nya ialah Dia menciptakan untukmu pasangan hidup dari jenismu sendiri, supaya kamu merasa tenteram kepadanya.' }}”</p>
      <p class="verse">— {{ $invitation->quote_author ?? 'QS. Ar-Rum: 21' }} —</p>
      @endif

      @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown'))
      <div class="countdown" aria-label="Hitung mundur menuju hari pernikahan">
        <div><strong id="days">00</strong><span>HARI</span></div>
        <div><strong id="hours">00</strong><span>JAM</span></div>
        <div><strong id="minutes">00</strong><span>MENIT</span></div>
        <div><strong id="seconds">00</strong><span>DETIK</span></div>
      </div>
      <p class="countdown-caption">Menghitung hari menuju awal selamanya</p>
      @endif
    </section>
    @endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('couple'))
    <section class="couple section-pad" id="pengantin">
      <div class="section-heading">
        <p class="eyebrow">THE PEOPLE WE BECOME</p>
        <h2>Meet the <em>couple</em></h2>
        <p>Dua perjalanan, satu tujuan, dan cinta yang memilih untuk pulang.</p>
      </div>
      <div class="couple-grid">
        <article class="person">
          <div class="portrait portrait-groom" style="background-image: url('{{ $groom['photo'] ?? 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=700&q=85' }}');"></div>
          <p class="person-role">THE GROOM</p><h3>{{ $groom['name'] ?? 'Adit Pratama' }}</h3>
          <p>Putra dari {{ $groom['parents'] ?? (($groom['father'] ?? 'Bapak Indra') . ' dan ' . ($groom['mother'] ?? 'Ibu Sri')) }}</p>
          @if(!empty($groom['instagram']))
          <a class="text-link" href="https://instagram.com/{{ ltrim($groom['instagram'], '@') }}" target="_blank" rel="noopener">{{ $groom['instagram'] }}</a>
          @endif
        </article>
        <div class="couple-mark">{{ substr($groom['nickname'] ?? 'A', 0, 1) }} <span>♥</span> {{ substr($bride['nickname'] ?? 'C', 0, 1) }}</div>
        <article class="person">
          <div class="portrait portrait-bride" style="background-image: url('{{ $bride['photo'] ?? 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=700&q=85' }}');"></div>
          <p class="person-role">THE BRIDE</p><h3>{{ $bride['name'] ?? 'Citra Maharani' }}</h3>
          <p>Putri dari {{ $bride['parents'] ?? (($bride['father'] ?? 'Bapak Surya') . ' dan ' . ($bride['mother'] ?? 'Ibu Ratna')) }}</p>
          @if(!empty($bride['instagram']))
          <a class="text-link" href="https://instagram.com/{{ ltrim($bride['instagram'], '@') }}" target="_blank" rel="noopener">{{ $bride['instagram'] }}</a>
          @endif
        </article>
      </div>
    </section>
    @endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('event'))
    <section class="event section-pad" id="jadwal">
      <div class="event-image"></div>
      <div class="event-panel">
        <p class="eyebrow">SAVE THE DATE</p><h2>Celebrate <em>with us</em></h2>
        <p class="event-lead">Kami berharap kehadiran Anda untuk merayakan hari istimewa ini.</p>
        @foreach($events as $idx => $ev)
        <div class="event-item">
          <span class="event-icon">{{ str_pad($idx + 1, 2, '0', STR_PAD_LEFT) }}</span>
          <div>
            <h3>{{ $ev['title'] }}</h3>
            <p>{{ \Carbon\Carbon::parse($ev['date'] ?? '2026-12-20')->locale('id')->isoFormat('dddd, D MMMM Y') }}<br>{{ $ev['start_time'] ?? '08.00' }} – {{ $ev['end_time'] ?? '10.00' }} {{ $ev['timezone'] ?? 'WIB' }}</p>
          </div>
        </div>
        @endforeach
        <div class="venue">
          <strong>{{ strtoupper($events[0]['venue'] ?? 'THE CHAMPAGNE GARDEN') }}</strong>
          <span>{{ $events[0]['address'] ?? 'Jl. Contoh Bahagia No. 20, Jakarta' }}</span>
        </div>
        <div style="display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap;">
          <a class="outline-button" href="{{ $events[0]['maps_url'] ?? 'https://maps.google.com' }}" target="_blank" rel="noreferrer">Lihat Lokasi ↗</a>
          @php
            $ev0 = $events[0];
            $ev0Date = \Carbon\Carbon::parse($ev0['date'] ?? '2026-12-20');
            $ev0CalLink = 'https://calendar.google.com/calendar/render?action=TEMPLATE&text=' . urlencode(($ev0['title'] ?? 'Acara') . ' ' . ($bride['nickname'] ?? '') . ' & ' . ($groom['nickname'] ?? '')) . '&dates=' . $ev0Date->format('Ymd') . 'T010000Z/' . $ev0Date->format('Ymd') . 'T070000Z&location=' . urlencode(($ev0['venue'] ?? '') . ', ' . ($ev0['address'] ?? ''));
          @endphp
          <a class="outline-button" href="{{ $ev0CalLink }}" target="_blank" rel="noopener">+ Kalender ↗</a>
        </div>
      </div>
    </section>
    @endif

    @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('story')) && !empty($stories) && count($stories) > 0)
    <section class="story section-pad" id="kisah">
      <div class="section-heading">
        <p class="eyebrow">A LITTLE BIT OF MAGIC</p><h2>Our love <em>story</em></h2>
        <p>Hal-hal indah sering dimulai dari momen yang sederhana.</p>
      </div>
      <div class="timeline">
        @foreach($stories as $sIdx => $s)
        <article class="timeline-item {{ $sIdx % 2 === 1 ? 'reverse' : '' }}">
          <div class="timeline-dot">{{ str_pad($sIdx + 1, 2, '0', STR_PAD_LEFT) }}</div>
          <div class="timeline-copy">
            <span>{{ $s['year'] }}</span>
            <h3>{{ $s['title'] }}</h3>
            <p>{{ $s['story'] }}</p>
          </div>
          <div class="timeline-photo" style="background-image: url('{{ $s['image'] ?? (!empty($galleryPhotos) ? $galleryPhotos[$sIdx % count($galleryPhotos)] : ($coverPhoto ?? 'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=600&q=80')) }}');"></div>
        </article>
        @endforeach
      </div>
    </section>
    @endif

    @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gallery')) && !empty($galleryPhotos) && count($galleryPhotos) > 0)
    <section class="gallery section-pad" id="galeri">
      <div class="section-heading">
        <p class="eyebrow">FRAGMENTS OF FOREVER</p><h2>Our <em>moments</em></h2><p>Potongan kecil dari perjalanan yang kami cintai.</p>
      </div>
      <div class="gallery-grid">
        @php $gClasses = ['gallery-a', 'gallery-b', 'gallery-c', 'gallery-d', 'gallery-e']; @endphp
        @foreach($galleryPhotos as $gI => $gPic)
          @if($gI < 5)
          <button class="gallery-photo {{ $gClasses[$gI] }}" style="background-image: url('{{ $gPic }}');" data-img="{{ $gPic }}" aria-label="Foto galeri {{ $gI + 1 }}"></button>
          @endif
        @endforeach
      </div>
      <p class="gallery-note">Sentuh foto untuk melihat momen lebih dekat.</p>
    </section>
    @endif

    @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gift')) && $hasGifts)
    <section class="gift section-pad" id="hadiah">
      <div class="gift-flower" aria-hidden="true"></div>
      <div class="section-heading">
        <p class="eyebrow">SHARING THE LOVE</p><h2>Wedding <em>gift</em></h2>
        <p class="gift-copy">Doa dan restu Anda adalah hadiah terindah. Namun jika ingin memberikan tanda kasih secara digital, Anda dapat menggunakan rekening berikut:</p>
      </div>
      
      <div style="text-align: center; margin-bottom: 24px;">
        <button type="button" class="open-invitation" onclick="toggleGiftAccordion(this)" style="margin-top: 0; background: #6b5449; color: #fffaf5; border-color: #c19a6b; padding: 13px 28px; font-weight: 500;">
          <span class="gift-btn-label">Kirim Hadiah / Buka Rekening</span> <span style="margin-left: 10px;">🎁</span>
        </button>
      </div>

      <div id="gift-accordion-content" class="gift-box-wrapper hidden">
        <div style="display: flex; flex-direction: column; gap: 24px; max-width: 440px; margin: auto;">
          @foreach($gifts as $gIdx => $g)
          <div class="bank-card">
            <div class="bank-top"><span>WEDDING ACCOUNT</span><span>{{ strtoupper($g['bank_name'] ?? 'BANK') }}</span></div>
            <p class="bank-label">TRANSFER DIGITAL</p>
            <h3>{{ $g['bank_name'] ?? 'Bank' }}</h3>
            <p class="account-number" id="accNo{{ $gIdx }}">{{ $g['account_number'] ?? '1234 5678 90' }}</p>
            <span class="account-name">a.n. {{ $g['account_holder'] ?? 'Mempelai' }}</span>
            <br>
            <button class="copy-button" type="button" data-copy="accNo{{ $gIdx }}">Salin No. Rekening <span>↗</span></button>
          </div>
          @endforeach

          @if(!empty($invitation->qris_image_url) || !empty($invitation->qris_image))
          <div style="text-align: center; margin-top: 10px; padding: 22px; background: #fffaf5; border: 1px solid rgba(193, 154, 107, 0.3); border-radius: 6px;">
            <p style="font-size: 0.85rem; color: #806347; margin-bottom: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;">Pindai QRIS</p>
            <img src="{{ $invitation->qris_image_url ?? $invitation->qris_image }}" alt="QRIS" style="max-width: 210px; width: 100%; border-radius: 6px; border: 1px solid #d8ba98;">
          </div>
          @endif

          @if(!empty($invitation->address) || !empty($invitation->gift_address))
          <div style="margin-top: 10px; padding: 22px; background: #fffaf5; border: 1px solid rgba(193, 154, 107, 0.3); border-radius: 6px; text-align: center;">
            <p style="font-size: 0.85rem; color: #806347; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px;">Kirim Hadiah Fisik</p>
            <p id="alamatFisik" style="font-size: 0.95rem; color: #3b2b25; margin-bottom: 14px; line-height: 1.5;">{{ $invitation->gift_address ?? ($invitation->address ?? 'Jl. Contoh Bahagia No. 20, Jakarta') }}</p>
            <button class="copy-button" type="button" data-copy="alamatFisik">Salin Alamat <span>↗</span></button>
          </div>
          @endif
        </div>
      </div>
    </section>
    @endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('wishes'))
    <section class="rsvp section-pad" id="rsvp">
      <div class="rsvp-side">
        <p class="eyebrow light">WE HOPE YOU CAN MAKE IT</p>
        <h2>RSVP &amp; <em>wishes</em></h2>
        <p>Bantu kami mempersiapkan hari istimewa ini dengan konfirmasi kehadiran Anda.</p>
        <div class="rsvp-flower" aria-hidden="true">❦</div>
      </div>
      <div>
        @if(session('wish_success'))
          <div style="background: rgba(76,175,80,0.15); border: 1px solid #81c784; color: #2e7d32; padding: 14px; border-radius: 4px; margin-bottom: 20px;">
            {{ session('wish_success') }}
          </div>
        @endif
        @if(session('wish_error'))
          <div style="background: rgba(239,83,80,0.15); border: 1px solid #e57373; color: #c62828; padding: 14px; border-radius: 4px; margin-bottom: 20px;">
            {{ session('wish_error') }}
          </div>
        @endif
        <form class="rsvp-form" id="rsvpForm" method="POST" action="{{ $rsvpAction }}">
          @csrf
          <label>
            NAMA LENGKAP
            <input type="text" name="name" value="{{ $guestName ?? '' }}" placeholder="Nama Anda" required>
          </label>
          <label>
            KONFIRMASI KEHADIRAN
            <select name="attendance" required>
              <option value="hadir">Hadir dengan senang hati</option>
              <option value="tidak_hadir">Maaf, belum bisa hadir</option>
              <option value="ragu">Masih mengusahakan hadir</option>
            </select>
          </label>
          <label>
            JUMLAH TAMU
            <input type="number" name="guest_count" min="1" max="5" value="1">
          </label>
          <label>
            DOA DAN UCAPAN
            <textarea rows="4" name="message" placeholder="Tuliskan ucapan dan doa terbaik Anda di sini…" required></textarea>
          </label>
          <button class="submit-button" type="submit">Kirim Konfirmasi <span>↗</span></button>
          <p class="form-note" id="formNote">Terima kasih telah berbagi doa dan sukacita bersama kami.</p>
        </form>

        <div class="wishes-wrapper" id="wishes">
          @foreach($wishes as $w)
          <article class="wish-card">
            <div class="wish-head">
              <span class="wish-name">{{ $w->name }}</span>
              <span class="wish-badge">{{ ucfirst($w->attendance ?? 'hadir') }}</span>
            </div>
            <p class="wish-msg">{{ $w->message }}</p>
          </article>
          @endforeach
        </div>
      </div>
    </section>
    @endif

    <section class="closing section-pad">
      <img class="closing-floral" src="{{ asset('templates/vip/exclusive15/assets/floral-corner.svg') }}" alt="" aria-hidden="true">
      <p class="eyebrow">THANK YOU</p>
      <h2>Until we <em>celebrate</em></h2>
      <p>Merupakan kehormatan bagi kami apabila Anda berkenan hadir dan memberikan doa restu di hari bahagia kami.</p>
      <h3>{{ $groom['nickname'] ?? 'Adit' }} <i>&amp;</i> {{ $bride['nickname'] ?? 'Citra' }}</h3>
      @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('streaming'))
      <a class="live-link" href="{{ $liveUrl }}">Lihat Siaran Langsung (Live Streaming) <span>↗</span></a>
      @endif
    </section>
  </main>

  <footer>
    <div style="text-align: center; margin-bottom: 12px;">
      <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: 30px; width: auto; opacity: 0.9;">
      </a>
    </div>
    <span>© {{ date('Y') }} JANOER KOENING</span>
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('streaming'))
    <a href="{{ $liveUrl }}">LIVE STREAMING ↗</a>
    @endif
    <span>MERANGKAI KISAH, MENGUNDANG BAHAGIA</span>
  </footer>

  <!-- DOCK NAVIGASI -->
  <nav class="dock" id="dock" aria-label="Navigasi">
    <a href="#home" 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>

  <div class="toast" id="toast">Nomor rekening berhasil disalin.</div>

  <!-- LIGHTBOX MODAL -->
  <div class="lightbox-modal" id="lightboxModal">
    <img id="lightboxImg" src="" alt="Zoom Foto">
  </div>

  <script>
    // Toggle Gift Accordion
    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")
            ? "Kirim Hadiah / Buka Rekening"
            : "Tutup Rekening & Hadiah";
        }
      }
    }

    // Music Controls
    const audio = document.getElementById("weddingMusicPlayer");
    const musicBtn = document.getElementById("musicToggleBtn");
    const openBtn = document.getElementById("openInvitation");
    let isPlaying = false;

    function playMusic() {
      if (audio) {
        audio.play().then(() => {
          isPlaying = true;
          if (musicBtn) musicBtn.classList.add("playing");
        }).catch(e => console.log("Music play prevented:", e));
      }
    }

    function pauseMusic() {
      if (audio) {
        audio.pause();
        isPlaying = false;
        if (musicBtn) musicBtn.classList.remove("playing");
      }
    }

    if (musicBtn) {
      musicBtn.addEventListener("click", () => {
        if (isPlaying) pauseMusic();
        else playMusic();
      });
    }

    if (openBtn) {
      openBtn.addEventListener("click", () => {
        document.body.classList.remove("locked");
        playMusic();
        document.getElementById("countdown")?.scrollIntoView({ behavior: "smooth" });
      });
    }

    // Countdown
    const weddingDate = new Date("{{ $eventDate }}T08:00:00+07:00").getTime();
    function updateCountdown() {
      const diff = Math.max(0, weddingDate - Date.now());
      const d = Math.floor(diff / 864e5);
      const h = Math.floor((diff % 864e5) / 36e5);
      const m = Math.floor((diff % 36e5) / 6e4);
      const s = Math.floor((diff % 6e4) / 1e3);

      const dEl = document.getElementById("days");
      const hEl = document.getElementById("hours");
      const mEl = document.getElementById("minutes");
      const sEl = document.getElementById("seconds");

      if (dEl) dEl.textContent = String(d).padStart(2, "0");
      if (hEl) hEl.textContent = String(h).padStart(2, "0");
      if (mEl) mEl.textContent = String(m).padStart(2, "0");
      if (sEl) sEl.textContent = String(s).padStart(2, "0");
    }
    updateCountdown();
    setInterval(updateCountdown, 1000);

    // Toast
    const toast = document.getElementById("toast");
    function showToast(msg) {
      if (!toast) return;
      toast.textContent = msg;
      toast.classList.add("show");
      setTimeout(() => toast.classList.remove("show"), 2800);
    }

    // Copy Account / Address
    document.querySelectorAll("[data-copy]").forEach(btn => {
      btn.addEventListener("click", () => {
        const id = btn.getAttribute("data-copy");
        const text = document.getElementById(id)?.textContent?.trim() || "";
        const copyText = (id === "alamatFisik") ? text : text.replace(/\s+/g, "");
        navigator.clipboard.writeText(copyText).then(() => {
          showToast(id === "alamatFisik" ? "Alamat berhasil disalin!" : "Nomor rekening berhasil disalin!");
        }).catch(() => {
          showToast("Tersalin: " + copyText);
        });
      });
    });

    // Lightbox
    const lbModal = document.getElementById("lightboxModal");
    const lbImg = document.getElementById("lightboxImg");
    document.querySelectorAll(".gallery-photo").forEach(p => {
      p.addEventListener("click", () => {
        const url = p.getAttribute("data-img") || p.style.backgroundImage.slice(5, -2);
        if (url && lbImg && lbModal) {
          lbImg.src = url;
          lbModal.classList.add("open");
        }
      });
    });
    if (lbModal) {
      lbModal.addEventListener("click", () => lbModal.classList.remove("open"));
    }

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