@php
    $bride = $invitation->bride ?? [
        'name' => 'Sabrina Maheswari, M.M',
        'nickname' => 'Sabrina',
        'parents' => 'Bapak Wahyu Pranoto & Ibu Dian Kusumawati',
        'photo' => $invitation->bride_photo_url ?? ($invitation->bride_photo ?? 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80'),
        'instagram' => $invitation->bride_instagram ?? '@sabrinamaheswari',
    ];
    $groom = $invitation->groom ?? [
        'name' => 'Julian Pradipta, S.T',
        'nickname' => 'Julian',
        'parents' => 'Bapak Rizal Hakim & Ibu Anita Permata',
        'photo' => $invitation->groom_photo_url ?? ($invitation->groom_photo ?? 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=600&q=80'),
        'instagram' => $invitation->groom_instagram ?? '@julianpradipta',
    ];
    $coverPhoto = $invitation->cover_photo ?? ($invitation->hero_photo_url ?? 'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=800&q=80');

    $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' => 'Jl. Melati No. 12, Tangerang',
            'maps_url' => 'https://maps.google.com',
        ],
        [
            'title' => 'Resepsi Rose Gold Noir',
            'date' => '2026-12-20',
            'start_time' => '11:00',
            'end_time' => '14:00',
            'timezone' => 'WIB',
            'venue' => 'The Obsidian Ballroom',
            'address' => 'Grand Meridian Hotel, Jl. Anggrek No. 5, Tangerang',
            '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 ?? [
        'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=600&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);
    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' => '1234 5678 90',
            'number' => '1234 5678 90',
            'account_holder' => 'Sabrina Maheswari',
            'name' => 'Sabrina Maheswari',
        ],
        [
            'bank_name' => 'Bank Mandiri',
            'bank' => 'Bank Mandiri',
            'account_number' => '9876 5432 10',
            'number' => '9876 5432 10',
            'account_holder' => 'Julian Pradipta',
            'name' => 'Julian Pradipta',
        ],
    ];
    $hasGifts = !empty($gifts) || !empty($invitation->qris_image_url) || !empty($invitation->qris_image);

    $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, Julian melamar Sabrina 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.',
        ],
    ];

    $defaultQuoteText = '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.';
    $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 Wahyu & Rizal',
            'attendance' => 'Hadir',
            'message' => 'Selamat menempuh hidup baru untuk Sabrina & Julian! 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 ?? 'exclusive12') 
        : (!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/exclusive12/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.0">
  <title>Undangan Pernikahan | {{ $bride['nickname'] ?? 'Sabrina' }} &amp; {{ $groom['nickname'] ?? 'Julian' }}</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=Ballet&family=Gloock&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ asset('templates/vip/exclusive12/style.css') }}">
  <style>
    #coverOverlay {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 60px 20px;
      overflow-y: auto;
      background: radial-gradient(circle at 50% 25%, #24141e 0%, #150910 65%, #0a0307 100%);
      transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
    }
    #coverOverlay.hidden-cover {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    body.is-locked {
      overflow: hidden;
      height: 100vh;
    }
    .photo-in img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .pc figure img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .gift-box-wrapper.hidden {
      display: none !important;
    }
    .music-btn-floating {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 9999;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: #17171c;
      color: #f6d5c6;
      border: 1.5px solid #d9a48f;
      display: grid;
      place-items: center;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
      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); }
    }
    .toast-copy {
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%) translateY(30px);
      background: #17171c;
      color: #f6d5c6;
      border: 1px solid #d9a48f;
      font-weight: 600;
      padding: 10px 24px;
      border-radius: 999px;
      font-size: 0.8rem;
      letter-spacing: 0.05em;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
      z-index: 999999;
    }
    .toast-copy.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    @media (max-width: 650px) {
      .music-btn-floating {
        bottom: 74px;
        right: 16px;
        width: 42px;
        height: 42px;
      }
      #coverOverlay {
        padding: 50px 16px;
      }
    }
  </style>
</head>
<body class="is-locked">
  @include('templates.partials.preview-banner')

  <!-- Ornamen berlian, kilau bintang, dan siku bersudut -->
  <script src="{{ asset('templates/vip/exclusive12/luxe.js') }}"></script>

  <!-- COVER OVERLAY PEMBUKA -->
  <div id="coverOverlay" class="hero" data-sparkles="24">
    <i class="beam b1"></i><i class="beam b2"></i>
    <div class="frame" data-brk></div>

    <div class="hero-inner">
      <svg class="gem" viewBox="0 0 60 50"><use href="#dia"/></svg>
      <div class="mono rg">{{ substr($bride['nickname'] ?? 'S', 0, 1) }}&amp;{{ substr($groom['nickname'] ?? 'J', 0, 1) }}</div>
      <p class="eyebrow">The Wedding Of</p>

      <div class="photo-wrap">
        <div class="photo-cut">
          <figure class="photo-in">
            <img src="{{ $coverPhoto }}" alt="Foto Mempelai">
          </figure>
        </div>
      </div>

      <h1 class="names rg"><span>{{ $bride['nickname'] ?? 'Sabrina' }}</span><em>&amp;</em><span>{{ $groom['nickname'] ?? 'Julian' }}</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="javascript:void(0)" class="btn" onclick="openInvitation()">Buka Undangan</a>
    </div>
  </div>

  <main id="mainContent">
    <header class="hero" id="home" data-sparkles="24">
      <i class="beam b1"></i><i class="beam b2"></i>
      <div class="frame" data-brk></div>

      <div class="hero-inner">
        <svg class="gem" viewBox="0 0 60 50"><use href="#dia"/></svg>
        <div class="mono rg">{{ substr($bride['nickname'] ?? 'S', 0, 1) }}&amp;{{ substr($groom['nickname'] ?? 'J', 0, 1) }}</div>
        <p class="eyebrow">The Wedding Of</p>

        <div class="photo-wrap">
          <div class="photo-cut">
            <figure class="photo-in">
              <img src="{{ $coverPhoto }}" alt="Foto Mempelai">
            </figure>
          </div>
        </div>

        <h1 class="names rg"><span>{{ $bride['nickname'] ?? 'Sabrina' }}</span><em>&amp;</em><span>{{ $groom['nickname'] ?? 'Julian' }}</span></h1>
        <p class="dateline">{{ $formattedDate }}</p>
      </div>
    </header>

    <!-- SECTION COUNTDOWN -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown'))
    <section class="section pearl center" id="countdown">
      <div class="container reveal">
        <p class="kicker">Save The Date</p>
        <h2 class="title">Menghitung Hari</h2>
        <div class="gem-rule"><svg viewBox="0 0 60 50"><use href="#dia"/></svg></div>
        <div class="tiles">
          <div class="tile-wrap"><div class="tile"><b class="rg" id="d">00</b><span>Hari</span></div></div>
          <div class="tile-wrap"><div class="tile"><b class="rg" id="h">00</b><span>Jam</span></div></div>
          <div class="tile-wrap"><div class="tile"><b class="rg" id="m">00</b><span>Menit</span></div></div>
          <div class="tile-wrap"><div class="tile"><b class="rg" id="s">00</b><span>Detik</span></div></div>
        </div>
        <p class="count-note">{{ $formattedDate }}</p>
      </div>
    </section>
    @endif

    <!-- SECTION QUOTES / AYAT -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('quote'))
    <section class="section onyx center" id="ayat" data-sparkles="10">
      <div class="container reveal">
        <div class="quote-frame" data-brk>
          <svg class="gem" viewBox="0 0 60 50"><use href="#dia"/></svg>
          <p class="salam">Assalamu'alaikum Warahmatullahi Wabarakatuh</p>
          <p class="quote">“{{ $quoteText }}”</p>
          <p class="source">{{ $quoteSource }}</p>
        </div>
      </div>
    </section>
    @endif

    <!-- SECTION PENGANTIN -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('couple'))
    <section class="section marble" id="pengantin">
      <div class="container">
        <div class="reveal">
          <p class="kicker">Bismillahirrahmanirrahim</p>
          <h2 class="title">Sang Mempelai</h2>
          <div class="gem-rule"><svg viewBox="0 0 60 50"><use href="#dia"/></svg></div>
        </div>
        <div class="couple">
          <article class="person reveal">
            <div class="pw"><div class="pc"><figure><img src="{{ $bride['photo'] }}" alt="{{ $bride['name'] }}"></figure></div></div>
            <div class="plate-wrap"><div class="plate"><div><h3 class="rg">{{ $bride['name'] }}</h3><p class="role">Mempelai Wanita</p></div></div></div>
            <p class="par">{{ $bride['parents'] }}</p>
            @if(!empty($bride['instagram']))
            <p style="margin-top: 8px;"><a href="https://instagram.com/{{ ltrim($bride['instagram'], '@') }}" target="_blank" rel="noopener" style="color: var(--rg-dark); font-weight: 500; text-decoration: none;">{{ $bride['instagram'] }}</a></p>
            @endif
          </article>
          <article class="person reveal">
            <div class="pw"><div class="pc"><figure><img src="{{ $groom['photo'] }}" alt="{{ $groom['name'] }}"></figure></div></div>
            <div class="plate-wrap"><div class="plate"><div><h3 class="rg">{{ $groom['name'] }}</h3><p class="role">Mempelai Pria</p></div></div></div>
            <p class="par">{{ $groom['parents'] }}</p>
            @if(!empty($groom['instagram']))
            <p style="margin-top: 8px;"><a href="https://instagram.com/{{ ltrim($groom['instagram'], '@') }}" target="_blank" rel="noopener" style="color: var(--rg-dark); font-weight: 500; text-decoration: none;">{{ $groom['instagram'] }}</a></p>
            @endif
          </article>
        </div>
      </div>
    </section>
    @endif

    <!-- SECTION JADWAL ACARA -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('event'))
    <section class="section graphite" id="jadwal">
      <div class="container">
        <div class="reveal">
          <p class="kicker">Rangkaian Acara</p>
          <h2 class="title">Jadwal Acara</h2>
          <div class="gem-rule"><svg viewBox="0 0 60 50"><use href="#dia"/></svg></div>
        </div>
        <div class="events">
          @foreach($events as $ev)
          @php
              $evCarbon = !empty($ev['date']) ? \Carbon\Carbon::parse($ev['date']) : $carbonDate;
          @endphp
          <article class="ticket reveal">
            <div class="stub"><b class="rg">{{ $evCarbon->format('d') }}</b><span>{{ $evCarbon->locale('id')->isoFormat('MMM Y') }}</span><small>VIP Pass</small></div>
            <div class="tk-info">
              <i class="bars"></i>
              <h3>{{ $ev['title'] ?? 'Acara' }}</h3>
              <p class="time">{{ $ev['start_time'] ?? '08:00' }} – {{ $ev['end_time'] ?? 'Selesai' }} {{ $ev['timezone'] ?? 'WIB' }}</p>
              <p><strong>{{ $ev['venue'] ?? '' }}</strong><br>{{ $ev['address'] ?? '' }}</p>
              <div class="links">
                @if(!empty($ev['maps_url']))
                <a class="btn small ghost" href="{{ $ev['maps_url'] }}" target="_blank" rel="noopener">Petunjuk Lokasi</a>
                @endif
              </div>
            </div>
          </article>
          @endforeach
        </div>

        @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('streaming'))
        <div class="access reveal" data-brk>
          <div>
            <h3><span class="live-dot"></span>Live Streaming Eksklusif</h3>
            <p>Saksikan prosesi sakral pernikahan kami secara langsung dari mana saja.</p>
          </div>
          <a class="btn" id="liveLink" href="{{ $liveUrl }}">Tonton Live</a>
        </div>
        @endif
      </div>
    </section>
    @endif

    <!-- SECTION KISAH CINTA -->
    @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('story')) && !empty($stories) && count($stories) > 0)
    <section class="section pearl" id="kisah">
      <div class="container">
        <div class="reveal">
          <p class="kicker">Our Story</p>
          <h2 class="title">Kisah Cinta</h2>
          <div class="gem-rule"><svg viewBox="0 0 60 50"><use href="#dia"/></svg></div>
        </div>
        <div class="timeline">
          @foreach($stories as $st)
          <div class="t-item reveal">
            <div class="t-gem"><svg viewBox="0 0 60 50"><use href="#dia"/></svg></div>
            <div class="t-box">
              <div class="t-year rg">{{ $st['year'] ?? '' }}</div>
              <h3>{{ $st['title'] ?? 'Kisah Cinta' }}</h3>
              <p>{{ $st['story'] ?? ($st['description'] ?? '') }}</p>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </section>
    @endif

    <!-- SECTION GALERI FOTO -->
    @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gallery')) && !empty($galleries) && count($galleries) > 0)
    <section class="section onyx" id="galeri">
      <div class="container">
        <div class="reveal">
          <p class="kicker">Moments</p>
          <h2 class="title">Galeri Foto</h2>
          <div class="gem-rule"><svg viewBox="0 0 60 50"><use href="#dia"/></svg></div>
        </div>
        <div class="gallery reveal">
          @foreach($galleries as $gPhoto)
          <div class="g">
            <img src="{{ $gPhoto }}" alt="Foto Galeri" onclick="openLightbox(this.src)">
          </div>
          @endforeach
        </div>
      </div>
    </section>
    @endif

    <!-- SECTION TANDA KASIH / WEDDING GIFT -->
    @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gift')) && $hasGifts)
    <section class="section marble" id="hadiah">
      <div class="container">
        <div class="reveal">
          <p class="kicker">Wedding Gift</p>
          <h2 class="title">Tanda Kasih</h2>
          <div class="gem-rule"><svg viewBox="0 0 60 50"><use href="#dia"/></svg></div>
        </div>
        <p class="gift-note reveal">Doa restu Anda adalah hadiah terindah bagi kami. Bila berkenan memberi tanda kasih, dapat melalui:</p>
        
        <div style="text-align: center; margin: 20px 0;">
          <button type="button" class="btn" 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)
            <div class="luxcard reveal">
              <div class="lc-top">
                <div class="lc-chip">
                  <span class="chip"></span>
                  <svg viewBox="0 0 24 24"><use href="#wave"/></svg>
                </div>
                <strong>{{ $g['bank_name'] ?? ($g['bank'] ?? 'Bank') }}</strong>
              </div>
              <div class="lc-no rg" id="rek{{ $idx }}">{{ $g['account_number'] ?? ($g['number'] ?? '') }}</div>
              <div class="lc-bot">
                <div>
                  <small>Atas Nama</small>
                  <em>{{ $g['account_holder'] ?? ($g['name'] ?? 'Mempelai') }}</em>
                </div>
                <button class="btn small" type="button" onclick="copyGift('rek{{ $idx }}')">Salin Rekening</button>
              </div>
            </div>
            @endforeach
          </div>

          @if(!empty($invitation->qris_image_url) || !empty($invitation->qris_image))
          <div class="reveal" style="text-align: center; margin: 30px auto; max-width: 320px; background: rgba(255,255,255,0.9); padding: 20px; border-radius: 16px; border: 1px solid var(--rg);">
            <strong style="color: var(--rg-dark); display: block; margin-bottom: 10px;">QRIS Tanda Kasih</strong>
            <img src="{{ $invitation->qris_image_url ?? $invitation->qris_image }}" alt="QRIS" style="max-width: 220px; width: 100%; border-radius: 10px;">
          </div>
          @endif

          @if(!empty($invitation->address))
          <div class="address reveal">
            <b>Kirim Hadiah Fisik</b>
            <p id="alamat">{{ $invitation->address }}</p>
            <button class="btn small ghost" type="button" onclick="copyText('alamat')">Salin Alamat</button>
          </div>
          @endif
        </div>
      </div>
    </section>
    @endif

    <!-- SECTION RSVP & UCAPAN -->
    @if((!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('wishes')) && ($invitation->is_rsvp_active ?? true))
    <section class="section graphite" id="rsvp">
      <div class="container narrow">
        <div class="reveal">
          <p class="kicker">Konfirmasi</p>
          <h2 class="title">RSVP &amp; Ucapan</h2>
          <div class="gem-rule"><svg viewBox="0 0 60 50"><use href="#dia"/></svg></div>
        </div>
        <div class="rsvp-frame reveal" data-brk>
          <form class="rsvp" id="rsvpForm" method="POST" action="{{ !empty($invitation->slug) ? route('invitation.wish', $invitation->slug) : '#' }}">
            @csrf
            <div class="field">
              <label for="nama">Nama Lengkap</label>
              <input id="nama" type="text" name="name" value="{{ $guestName ?? '' }}" placeholder="Nama lengkap Anda" required>
            </div>
            <div class="field">
              <span>Kehadiran</span>
              <div class="seg">
                <label class="opt"><input type="radio" name="attendance" value="Hadir" checked required><span>Hadir</span></label>
                <label class="opt"><input type="radio" name="attendance" value="Tidak Hadir"><span>Tidak Hadir</span></label>
                <label class="opt"><input type="radio" name="attendance" value="Ragu"><span>Masih 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="4" placeholder="Tuliskan ucapan dan doa terbaik Anda..." required></textarea>
            </div>
            <button type="submit" class="btn">Kirim Ucapan</button>
          </form>

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

    <!-- FOOTER -->
    <footer class="footer" data-sparkles="18">
      <div class="frame" data-brk></div>
      <div class="footer-in reveal">
        <svg class="gem" viewBox="0 0 60 50"><use href="#dia"/></svg>
        <div class="mono rg">{{ substr($bride['nickname'] ?? 'S', 0, 1) }}&amp;{{ substr($groom['nickname'] ?? 'J', 0, 1) }}</div>
        <p style="margin-top:16px">Merupakan kehormatan dan kebahagiaan bagi kami apabila Bapak/Ibu/Saudara/i berkenan hadir dan memberikan doa restu.</p>
        <h2 class="names small rg" style="margin-top:22px"><span>{{ $bride['nickname'] ?? 'Sabrina' }}</span><em>&amp;</em><span>{{ $groom['nickname'] ?? 'Julian' }}</span></h2>
        <p class="copy">Wassalamu'alaikum Warahmatullahi Wabarakatuh</p>
        <p class="thanks">Terima Kasih</p>
        <a class="btn" id="liveLink2" href="{{ $liveUrl }}">Tonton Live Streaming</a>
      </div>

      <div style="margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(217,164,143,0.3); text-align: center; position: relative; z-index: 5;">
        <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="font-size: 11px; margin-top: 8px; letter-spacing: 0.08em; color: var(--rg); text-transform: uppercase; font-family: 'Hanken Grotesk', sans-serif;">Digital Wedding Invitation by Janoer Koening</p>
      </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>
  </main>

  <!-- Lightbox galeri -->
  <div class="lightbox" id="lightbox" onclick="closeLightbox()"><img id="lightboxImg" alt=""></div>
  <div id="toastCopy" class="toast-copy">Tersalin ✓</div>

  @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>
    const weddingDate = new Date("{{ $eventDate }}T{{ $eventTime }}:00").getTime() || new Date("2026-12-20T08:00:00+07:00").getTime();
    const pad = n => String(n).padStart(2, "0");
    function tick() {
      const diff = Math.max(0, weddingDate - Date.now());
      const dEl = document.getElementById("d");
      if (dEl) {
        dEl.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);

    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));

    const dock = document.getElementById("dock");
    window.addEventListener("scroll", () => {
      if (dock) dock.classList.toggle("show", window.scrollY > window.innerHeight * 0.6);
    }, { passive: true });

    function openInvitation() {
      const cover = document.getElementById("coverOverlay");
      if (cover) {
        cover.classList.add("hidden-cover");
        document.body.classList.remove("is-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 showToast(msg) {
      const toast = document.getElementById("toastCopy");
      if (toast) {
        toast.textContent = msg;
        toast.classList.add("show");
        setTimeout(() => toast.classList.remove("show"), 1800);
      }
    }
    function copyGift(elId) {
      const el = document.getElementById(elId);
      if (el) {
        let text = el.textContent.replace(/\s/g, "");
        navigator.clipboard.writeText(text).then(() => {
          showToast("Nomor Rekening Tersalin ✓");
        }).catch(() => {
          showToast("Nomor: " + text);
        });
      }
    }
    function copyText(elId) {
      const el = document.getElementById(elId);
      if (el) {
        let text = el.textContent.trim();
        navigator.clipboard.writeText(text).then(() => {
          showToast("Alamat Tersalin ✓");
        }).catch(() => {
          showToast("Alamat: " + text);
        });
      }
    }

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

    const rsvpForm = document.getElementById("rsvpForm");
    if (rsvpForm) {
      rsvpForm.addEventListener("submit", function(e) {
        const action = this.getAttribute("action");
        if (!action || action === "#") {
          e.preventDefault();
          const f = new FormData(this);
          const box = document.createElement("div"); box.className = "wish";
          const n = document.createElement("strong"); n.className = "rg"; n.textContent = f.get("name") || "Tamu Undangan";
          const s = document.createElement("small"); s.textContent = (f.get("attendance") || "Hadir").toUpperCase();
          const p = document.createElement("p"); p.textContent = f.get("message") || "";
          box.append(n, s, p);
          document.getElementById("wishes").prepend(box);
          this.reset();
          showToast("Ucapan terkirim (Demo) ✓");
        }
      });
    }
  </script>
</body>
</html>