@php
    $bride = $invitation->bride ?? [
        'name' => 'Natasha Wulandari, S.Psi',
        'nickname' => 'Natasha',
        'father' => 'Bapak Bambang Wiratama',
        'mother' => 'Ibu Retno Handayani',
        'parents' => 'Bapak Bambang Wiratama & Ibu Retno Handayani',
        'instagram' => '@natashawln',
        'photo' => 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80',
    ];
    $groom = $invitation->groom ?? [
        'name' => 'Gideon Mahesa, S.Ak',
        'nickname' => 'Gideon',
        'father' => 'Bapak Hadi Susanto',
        'mother' => 'Ibu Maya Anggraini',
        'parents' => 'Bapak Hadi Susanto & Ibu Maya Anggraini',
        'instagram' => '@gideonmhs',
        'photo' => 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=600&q=80',
    ];

    $events = $invitation->events ?? [
        [
            'title' => 'Akad Nikah',
            'date' => '2026-12-20',
            'start_time' => '08:00',
            'end_time' => '10:00',
            'timezone' => 'WIB',
            'venue' => 'Masjid Agung Nurul Huda',
            'address' => 'Jl. Melati No. 12, Tangerang',
            'maps_url' => 'https://maps.google.com',
        ],
        [
            'title' => 'Resepsi',
            'date' => '2026-12-20',
            'start_time' => '11:00',
            'end_time' => '14:00',
            'timezone' => 'WIB',
            'venue' => 'The Grand Salon Ballroom',
            'address' => 'Jl. Anggrek No. 5, Tangerang',
            'maps_url' => 'https://maps.google.com',
        ],
    ];

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

    $stories = $invitation->stories ?? [
        [
            'year' => '2019',
            'title' => 'Pertama Bertemu',
            'story' => 'Kami bertemu di sebuah acara kampus. Awalnya hanya saling sapa, tanpa tahu cerita ini baru dimulai.',
        ],
        [
            'year' => '2021',
            'title' => 'Mulai Dekat',
            'story' => 'Obrolan demi obrolan membuat kami saling mengerti, dan perlahan tumbuh rasa nyaman.',
        ],
        [
            'year' => '2025',
            'title' => 'Lamaran',
            'story' => 'Dengan restu kedua keluarga, Gideon melamar Natasha dalam suasana sederhana yang penuh haru.',
        ],
        [
            'year' => '2026',
            'title' => 'Hari Bahagia',
            'story' => 'Dengan niat tulus, kami melangkah ke jenjang pernikahan dan memohon doa restu Anda.',
        ],
    ];

    $galleryPhotos = $invitation->gallery_photos ?? [
        'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=800&q=80',
        'https://images.unsplash.com/photo-1583939003579-730e3918a45a?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1522673607200-164d1b6ce486?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?auto=format&fit=crop&w=600&q=80',
    ];

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

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

    $wishes = $invitation->wishes ?? [
        (object)[
            'name' => 'Keluarga Besar Wiratama & Susanto',
            'attendance' => 'Hadir',
            'message' => 'Barakallahu lakuma wa baraka alaikuma. Semoga sakinah, mawaddah, warahmah selalu menyertai kalian berdua.',
            '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 ?? 'exclusive14') 
        : (!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/exclusive14/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.0">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Undangan Pernikahan | {{ $bride['nickname'] ?? 'Natasha' }} &amp; {{ $groom['nickname'] ?? 'Gideon' }}</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=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Mrs+Saint+Delafield&family=Questrial&family=Rufina:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ asset('templates/vip/exclusive14/style.css') }}">
  <style>
    .music-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #8a2441;
      border: 2px solid #cfa95a;
      box-shadow: 0 4px 18px rgba(0,0,0,0.4);
      display: grid;
      place-items: center;
      cursor: pointer;
      color: #cfa95a;
      z-index: 9999;
      transition: all 0.3s ease;
    }
    .music-btn.playing {
      animation: spin-disc 6s linear infinite;
    }
    @keyframes spin-disc {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .p-oval figure img, .oval figure img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .gallery.reveal {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      max-width: 900px;
      margin: 30px auto;
    }
    .gallery.reveal .g {
      aspect-ratio: 1;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid rgba(207, 169, 90, 0.4);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      cursor: pointer;
      position: relative;
    }
    .gallery.reveal .g img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .gallery.reveal .g:hover img {
      transform: scale(1.06);
    }
    @media(max-width: 600px) {
      .gallery.reveal {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
    }
    body.locked {
      overflow: hidden;
      height: 100vh;
    }
    .gift-box-wrapper.hidden {
      display: none !important;
    }
    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translate(-50%, 20px);
      background: rgba(42, 17, 26, 0.95);
      color: #cfa95a;
      border: 1px solid #cfa95a;
      padding: 12px 24px;
      border-radius: 30px;
      font-size: 11px;
      letter-spacing: 0.1em;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
      z-index: 10000;
      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }
    .toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    @media (max-width: 650px) {
      .music-btn {
        bottom: 74px;
        right: 16px;
        width: 42px;
        height: 42px;
      }
    }
  </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="22" height="22" 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>

  <!-- Lampu kristal, segel lilin, fleur-de-lis, dan sudut rococo -->
  <script src="{{ asset('templates/vip/exclusive14/royal.js') }}"></script>

  <!-- ============ COVER ============ -->
  <header class="hero" id="home" data-sparkles="18">
    <i class="glow"></i>
    <svg class="chand" viewBox="0 0 300 250"><use href="#chandelier"/></svg>
    <div class="frame" data-orn="lg"></div>

    <div class="hero-inner">
      <div class="seal">
        <svg viewBox="0 0 100 100"><use href="#seal"/></svg>
        <b>{{ substr($bride['nickname'] ?? 'N', 0, 1) }}&amp;{{ substr($groom['nickname'] ?? 'G', 0, 1) }}</b>
      </div>
      <p class="eyebrow">The Wedding Of</p>

      <div class="oval-wrap">
        <svg class="fl" viewBox="0 0 60 80"><use href="#fleur"/></svg>
        <div class="oval">
          <figure>
            <img src="{{ $invitation->hero_photo_url ?? asset('templates/vip/exclusive14/images/cover.jpg') }}" alt="Foto {{ $bride['nickname'] }} dan {{ $groom['nickname'] }}" onerror="this.src='https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=800&q=80'">
          </figure>
        </div>
      </div>

      <h1 class="names gold"><span>{{ $bride['nickname'] ?? 'Natasha' }}</span><em>&amp;</em><span>{{ $groom['nickname'] ?? 'Gideon' }}</span></h1>
      <p class="dateline">{{ $formattedDate }}</p>

      <div class="guest-card">
        <span>Kepada Yth.</span>
        <b id="guest">{{ $guestName ?? 'Bapak/Ibu/Saudara/i' }}</b>
        <small>Mohon maaf apabila ada kesalahan penulisan nama dan gelar</small>
      </div>
      <a href="#countdown" class="btn" id="openInvitationBtn">Buka Undangan</a>
    </div>
  </header>

  <!-- ============ 1. COUNTDOWN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown'))
  <section class="section ivory center" id="countdown">
    <div class="container">
      <div class="reveal">
        <p class="kicker">Save The Date</p>
        <div class="rb-wrap"><div class="rb"><span>Menghitung Hari</span></div></div>
        <svg class="flourish" viewBox="0 0 240 30"><use href="#flour"/></svg>
      </div>
      <div class="cameos reveal">
        <div class="cameo"><div><b class="gold" id="d">00</b><span>Hari</span></div></div>
        <div class="cameo"><div><b class="gold" id="h">00</b><span>Jam</span></div></div>
        <div class="cameo"><div><b class="gold" id="m">00</b><span>Menit</span></div></div>
        <div class="cameo"><div><b class="gold" id="s">00</b><span>Detik</span></div></div>
      </div>
      <p class="count-note reveal">{{ $formattedDateLong }}</p>
    </div>
  </section>
  @endif

  <!-- ============ 2. QUOTES / AYAT SUCI ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('quote'))
  <section class="section velvet center" id="ayat" data-sparkles="10">
    <div class="container reveal">
      <div class="quote-frame" data-orn="lg">
        <svg class="fl" viewBox="0 0 60 80"><use href="#fleur"/></svg>
        <p class="salam">Assalamu'alaikum Warahmatullahi Wabarakatuh</p>
        <p class="quote">
          “{{ $invitation->quote ?? 'Dan di antara tanda-tanda kekuasaan-Nya ialah Dia menciptakan untukmu pasangan-pasangan dari jenismu sendiri, supaya kamu merasa tenteram kepadanya, dan dijadikan-Nya di antaramu rasa kasih dan sayang.' }}”
        </p>
        <p class="source">{{ $invitation->quote_author ?? 'QS. Ar-Rum : 21' }}</p>
      </div>
    </div>
  </section>
  @endif

  <!-- ============ 3. INFORMASI PENGANTIN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('couple'))
  <section class="section blush" id="pengantin">
    <div class="container">
      <div class="reveal">
        <p class="kicker">Bismillahirrahmanirrahim</p>
        <div class="rb-wrap"><div class="rb"><span>Sang Mempelai</span></div></div>
        <svg class="flourish" viewBox="0 0 240 30"><use href="#flour"/></svg>
      </div>
      <div class="couple">
        <article class="person reveal">
          <div class="portrait">
            <svg class="fl" viewBox="0 0 60 80"><use href="#fleur"/></svg>
            <div class="p-oval">
              <figure>
                <img src="{{ $bride['photo'] ?? 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80' }}" alt="{{ $bride['name'] }}">
              </figure>
            </div>
          </div>
          <h3>{{ $bride['name'] ?? 'Natasha Wulandari, S.Psi' }}</h3>
          <p class="role">Mempelai Wanita</p>
          <p class="par">
            Putri dari<br>
            {{ $bride['parents'] ?? (($bride['father'] ?? 'Bapak Bambang Wiratama') . ' & ' . ($bride['mother'] ?? 'Ibu Retno Handayani')) }}
          </p>
          @if(!empty($bride['instagram']))
          <p style="margin-top: 10px;">
            <a href="https://instagram.com/{{ ltrim($bride['instagram'], '@') }}" target="_blank" rel="noopener" style="color: #9a7a34; font-size: 0.9rem; text-decoration: none;">
              {{ $bride['instagram'] }}
            </a>
          </p>
          @endif
        </article>
        <article class="person reveal">
          <div class="portrait">
            <svg class="fl" viewBox="0 0 60 80"><use href="#fleur"/></svg>
            <div class="p-oval">
              <figure>
                <img src="{{ $groom['photo'] ?? 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=600&q=80' }}" alt="{{ $groom['name'] }}">
              </figure>
            </div>
          </div>
          <h3>{{ $groom['name'] ?? 'Gideon Mahesa, S.Ak' }}</h3>
          <p class="role">Mempelai Pria</p>
          <p class="par">
            Putra dari<br>
            {{ $groom['parents'] ?? (($groom['father'] ?? 'Bapak Hadi Susanto') . ' & ' . ($groom['mother'] ?? 'Ibu Maya Anggraini')) }}
          </p>
          @if(!empty($groom['instagram']))
          <p style="margin-top: 10px;">
            <a href="https://instagram.com/{{ ltrim($groom['instagram'], '@') }}" target="_blank" rel="noopener" style="color: #9a7a34; font-size: 0.9rem; text-decoration: none;">
              {{ $groom['instagram'] }}
            </a>
          </p>
          @endif
        </article>
      </div>
    </div>
  </section>
  @endif

  <!-- ============ 4. JADWAL ACARA ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('event'))
  <section class="section velvet" id="jadwal" data-sparkles="10">
    <div class="container">
      <div class="reveal">
        <p class="kicker">Rangkaian Acara</p>
        <div class="rb-wrap"><div class="rb"><span>Jadwal Acara</span></div></div>
        <svg class="flourish" viewBox="0 0 240 30"><use href="#flour"/></svg>
      </div>
      <div class="events">
        @foreach($events as $event)
        <article class="card reveal">
          <div class="seal">
            <svg viewBox="0 0 100 100"><use href="#seal"/></svg>
            <b>{{ \Carbon\Carbon::parse($event['date'] ?? '2026-12-20')->format('d') }}</b>
          </div>
          <h3>{{ $event['title'] }}</h3>
          <p class="time">{{ $event['start_time'] ?? '08.00' }} – {{ $event['end_time'] ?? '10.00' }} {{ $event['timezone'] ?? 'WIB' }}</p>
          <p>
            <strong>{{ $event['venue'] ?? 'Masjid Agung' }}</strong><br>
            {{ $event['address'] ?? 'Tangerang' }}
          </p>
          <div class="links">
            <a class="btn small ghost" href="{{ $event['maps_url'] ?? 'https://maps.google.com' }}" target="_blank" rel="noopener">Lokasi</a>
            <a class="btn small ghost" target="_blank" rel="noopener" href="https://calendar.google.com/calendar/render?action=TEMPLATE&text={{ urlencode($event['title'] . ' ' . ($bride['nickname'] ?? '') . ' & ' . ($groom['nickname'] ?? '')) }}&dates={{ \Carbon\Carbon::parse($event['date'] ?? '2026-12-20')->format('Ymd') }}T010000Z/{{ \Carbon\Carbon::parse($event['date'] ?? '2026-12-20')->format('Ymd') }}T050000Z&location={{ urlencode($event['venue'] ?? '') }}">+ Kalender</a>
          </div>
        </article>
        @endforeach
      </div>

      @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('streaming'))
      <div class="letter-banner reveal" data-orn>
        <div class="lead">
          <div class="seal sm"><svg viewBox="0 0 100 100"><use href="#seal"/></svg><b style="font-size:.78rem;letter-spacing:.08em">LIVE</b></div>
          <div>
            <h3>Live Streaming</h3>
            <p>Tidak bisa hadir? Saksikan acara kami secara langsung dari mana saja.</p>
          </div>
        </div>
        <a class="btn" id="liveLink" href="{{ $liveUrl }}">Tonton Live</a>
      </div>
      @endif
    </div>
  </section>
  @endif

  <!-- ============ 5. KISAH CINTA (TIMELINE) ============ -->
  @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('story')) && !empty($stories) && count($stories) > 0)
  <section class="section ivory" id="kisah">
    <div class="container">
      <div class="reveal">
        <p class="kicker">Our Story</p>
        <div class="rb-wrap"><div class="rb"><span>Kisah Cinta</span></div></div>
        <svg class="flourish" viewBox="0 0 240 30"><use href="#flour"/></svg>
      </div>
      <div class="timeline">
        @php $romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI']; @endphp
        @foreach($stories as $idx => $story)
        <div class="t-item reveal">
          <div class="t-seal">
            <svg viewBox="0 0 100 100"><use href="#seal"/></svg>
            <b>{{ $romanNumerals[$idx % count($romanNumerals)] }}</b>
          </div>
          <div class="t-box">
            <div class="t-year gold">{{ $story['year'] }}</div>
            <h3>{{ $story['title'] }}</h3>
            <p>{{ $story['story'] }}</p>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif

  <!-- ============ 6. GALERI FOTO ============ -->
  @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gallery')) && !empty($galleryPhotos) && count($galleryPhotos) > 0)
  <section class="section velvet" id="galeri">
    <div class="container">
      <div class="reveal">
        <p class="kicker">Moments</p>
        <div class="rb-wrap"><div class="rb"><span>Galeri Foto</span></div></div>
        <svg class="flourish" viewBox="0 0 240 30"><use href="#flour"/></svg>
      </div>
      <div class="gallery reveal">
        @foreach($galleryPhotos as $gPhoto)
        <div class="g">
          <img src="{{ $gPhoto }}" alt="Galeri Foto" loading="lazy">
        </div>
        @endforeach
      </div>
      <p class="hint">Sentuh foto untuk memperbesar tampilan.</p>
    </div>
  </section>
  @endif

  <!-- ============ 7. INFO TANDA KASIH ============ -->
  @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gift')) && $hasGifts)
  <section class="section blush" id="hadiah">
    <div class="container">
      <div class="reveal">
        <p class="kicker">Wedding Gift</p>
        <div class="rb-wrap"><div class="rb"><span>Tanda Kasih</span></div></div>
        <svg class="flourish" viewBox="0 0 240 30"><use href="#flour"/></svg>
      </div>
      <p class="gift-note reveal">Doa restu Anda adalah hadiah terindah bagi kami. Bila berkenan memberi tanda kasih, dapat melalui:</p>
      
      <div class="reveal" style="text-align: center; margin: 24px 0 10px;">
        <button type="button" class="btn" onclick="toggleGiftAccordion(this)" style="font-size: 0.72rem; padding: 12px 28px;">
          <span class="gift-btn-label">Kirim Hadiah / Buka Rekening</span>
        </button>
      </div>

      <div id="gift-accordion-content" class="gift-box-wrapper hidden" style="margin-top: 24px;">
        <div class="envs">
          @foreach($gifts as $i => $gift)
          @php
              $bName = strtoupper($gift['bank_name'] ?? ($gift['bank'] ?? 'BCA'));
              $accNo = $gift['account_number'] ?? ($gift['number'] ?? '1234 5678 90');
              $accHolder = $gift['account_holder'] ?? ($gift['name'] ?? 'Mempelai');
              $bCode = str_contains($bName, 'MANDIRI') ? 'MDR' : (str_contains($bName, 'BNI') ? 'BNI' : 'BCA');
          @endphp
          <div class="env reveal">
            <div class="env-flap"></div>
            <div class="seal"><svg viewBox="0 0 100 100"><use href="#seal"/></svg><b style="font-size:.85rem">{{ $bCode }}</b></div>
            <strong>{{ $gift['bank_name'] ?? $gift['bank'] ?? 'Bank' }}</strong>
            <span class="no" id="rek{{ $i }}">{{ $accNo }}</span>
            <em>a.n. {{ $accHolder }}</em>
            <button class="btn small ghost" data-copy="rek{{ $i }}">Salin</button>
          </div>
          @endforeach
        </div>

        @if(!empty($invitation->qris_image_url) || !empty($invitation->qris_image))
        <div class="reveal" style="text-align: center; margin: 30px auto 10px;">
          <p style="font-size: 0.95rem; color: #9a7a34; margin-bottom: 12px; font-weight: 500;">Atau Pindai QRIS:</p>
          <img src="{{ $invitation->qris_image_url ?? $invitation->qris_image }}" alt="QRIS" style="max-width: 220px; width: 100%; border-radius: 8px; border: 1.5px solid #cfa95a; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
        </div>
        @endif

        @if(!empty($invitation->address) || !empty($invitation->gift_address))
        <div class="address reveal" style="margin-top: 24px;">
          <b>Kirim Hadiah</b>
          <p id="alamat">{{ $invitation->gift_address ?? ($invitation->address ?? 'Jl. Melati No. 12, Tangerang (a.n. Natasha)') }}</p>
          <button class="btn small ghost" data-copy="alamat" data-keep="1">Salin Alamat</button>
        </div>
        @endif
      </div>
    </div>
  </section>
  @endif

  <!-- ============ 8. RSVP & UCAPAN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('wishes'))
  <section class="section velvet" id="rsvp">
    <div class="container narrow">
      <div class="reveal">
        <p class="kicker">Konfirmasi</p>
        <div class="rb-wrap"><div class="rb"><span>RSVP &amp; Ucapan</span></div></div>
        <svg class="flourish" viewBox="0 0 240 30"><use href="#flour"/></svg>
      </div>
      <div class="letter reveal" data-orn="lg" style="margin-top:50px">
        <div class="seal"><svg viewBox="0 0 100 100"><use href="#seal"/></svg><b style="font-size:.9rem">RSVP</b></div>
        @if(session('wish_success'))
          <div style="background: rgba(46,125,50,0.25); border: 1px solid #4caf50; color: #a5d6a7; padding: 14px; border-radius: 6px; margin-bottom: 20px; text-align: center;">
            {{ session('wish_success') }}
          </div>
        @endif
        @if(session('wish_error'))
          <div style="background: rgba(198,40,40,0.25); border: 1px solid #e57373; color: #ef9a9a; padding: 14px; border-radius: 6px; margin-bottom: 20px; text-align: center;">
            {{ session('wish_error') }}
          </div>
        @endif
        <form class="rsvp" id="rsvpForm" method="POST" action="{{ $rsvpAction }}">
          @csrf
          <div class="field">
            <label for="nama">Nama</label>
            <input id="nama" type="text" name="name" value="{{ $guestName ?? '' }}" placeholder="Nama lengkap" required>
          </div>
          <div class="field">
            <span>Kehadiran</span>
            <div class="seg">
              <label><input type="radio" name="attendance" value="hadir" checked><span>Hadir</span></label>
              <label><input type="radio" name="attendance" value="tidak_hadir"><span>Tidak Hadir</span></label>
              <label><input type="radio" name="attendance" value="ragu"><span>Ragu</span></label>
            </div>
          </div>
          <div class="field">
            <label for="jumlah">Jumlah Tamu</label>
            <input id="jumlah" type="number" name="guest_count" min="1" max="5" value="1">
          </div>
          <div class="field">
            <label for="ucapan">Ucapan &amp; Doa</label>
            <textarea id="ucapan" name="message" rows="3" placeholder="Tulis ucapan untuk kedua mempelai" required></textarea>
          </div>
          <button type="submit" class="btn">Kirim</button>
        </form>
      </div>

      <div class="wishes" id="wishes">
        @foreach($wishes as $w)
        <div class="wish">
          <strong>{{ $w->name }}</strong>
          <small>{{ ucfirst($w->attendance ?? 'Hadir') }}</small>
          <p>{{ $w->message }}</p>
        </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif

  <!-- ============ 9. PENUTUP (FOOTER) ============ -->
  <footer class="footer" data-sparkles="14" style="border-top:1px solid rgba(207,169,90,.5)">
    <i class="glow"></i>
    <svg class="chand" viewBox="0 0 300 250"><use href="#chandelier"/></svg>
    <div class="footer-in reveal">
      <div class="seal sm">
        <svg viewBox="0 0 100 100"><use href="#seal"/></svg>
        <b>{{ substr($bride['nickname'] ?? 'N', 0, 1) }}&amp;{{ substr($groom['nickname'] ?? 'G', 0, 1) }}</b>
      </div>
      <p style="margin-top:20px">Merupakan kehormatan dan kebahagiaan bagi kami apabila Bapak/Ibu/Saudara/i berkenan hadir dan memberikan doa restu.</p>
      <h2 class="names small gold" style="margin-top:22px"><span>{{ $bride['nickname'] ?? 'Natasha' }}</span><em>&amp;</em><span>{{ $groom['nickname'] ?? 'Gideon' }}</span></h2>
      <p class="copy">Wassalamu'alaikum Warahmatullahi Wabarakatuh</p>
      <p class="thanks">Terima Kasih</p>
      @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('streaming'))
      <a class="btn" id="liveLink2" href="{{ $liveUrl }}">Tonton Live Streaming</a>
      @endif
      
      <div style="margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(207,169,90,0.3); 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: var(--gold, #cfa95a);">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>
    </div>
  </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>

  <!-- Lightbox galeri -->
  <div class="lightbox" id="lightbox"><img alt=""></div>

  <!-- Toast Notifikasi -->
  <div class="toast" id="toast">Nomor rekening berhasil disalin!</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") || btn;
        if (content.classList.contains("hidden")) {
          label.textContent = "Kirim Hadiah / Buka Rekening";
        } else {
          label.textContent = "Tutup Rekening & Hadiah";
        }
      }
    }

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

    // Audio Player Toggle
    const audio = document.getElementById("weddingMusicPlayer");
    const musicBtn = document.getElementById("musicToggleBtn");
    const openBtn = document.getElementById("openInvitationBtn");
    let isPlaying = false;

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

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

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

    if (openBtn) {
      openBtn.addEventListener("click", () => {
        document.body.classList.remove("locked");
        playAudio();
      });
    }

    // Countdown Timer
    const weddingDate = new Date("{{ $eventDate }}T08:00:00+07:00").getTime();
    const pad = n => String(n).padStart(2, "0");
    function tick() {
      const diff = Math.max(0, weddingDate - Date.now());
      document.getElementById("d").textContent = pad(Math.floor(diff / 864e5));
      document.getElementById("h").textContent = pad(Math.floor(diff % 864e5 / 36e5));
      document.getElementById("m").textContent = pad(Math.floor(diff % 36e5 / 6e4));
      document.getElementById("s").textContent = pad(Math.floor(diff % 6e4 / 1e3));
    }
    tick(); setInterval(tick, 1000);

    // Animasi muncul saat di-scroll
    const io = new IntersectionObserver(es => {
      es.forEach(e => { if (e.isIntersecting) { e.target.classList.add("show"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach(el => io.observe(el));

    // Dock muncul setelah melewati cover
    const dock = document.getElementById("dock");
    addEventListener("scroll", () => dock.classList.toggle("show", scrollY > innerHeight * .6), { passive: true });

    // Salin rekening / alamat
    document.querySelectorAll("[data-copy]").forEach(btn => {
      btn.addEventListener("click", () => {
        let el = document.getElementById(btn.dataset.copy);
        if (!el) return;
        let text = el.textContent;
        if (!btn.dataset.keep) text = text.replace(/\s/g, "");
        navigator.clipboard.writeText(text).then(() => {
          const old = btn.textContent; btn.textContent = "Tersalin ✓";
          showToast(btn.dataset.keep ? "Alamat berhasil disalin!" : "Nomor rekening berhasil disalin!");
          setTimeout(() => btn.textContent = old, 1500);
        });
      });
    });

    // Lightbox: klik foto galeri untuk memperbesar
    const lb = document.getElementById("lightbox");
    document.querySelectorAll(".g img").forEach(img => {
      img.addEventListener("click", () => { lb.querySelector("img").src = img.src; lb.classList.add("open"); });
    });
    if (lb) lb.addEventListener("click", () => lb.classList.remove("open"));
  </script>
</body>
</html>