@php
    $bride = $invitation->bride ?? [
        'name' => 'Ni Kadek Ayu Dewi Lestari, S.E',
        'nickname' => 'Dewi',
        'parents' => 'Bapak I Nyoman Suardana & Ibu Ni Luh Sri Wahyuni',
        '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 ?? '@dewilestari',
    ];
    $groom = $invitation->groom ?? [
        'name' => 'I Made Arya Wiguna Putra, S.T',
        'nickname' => 'Arya',
        'parents' => 'Bapak I Gede Wiranata & Ibu Ni Made Ratna Dewi',
        '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 ?? '@aryawiguna',
    ];
    $coverPhoto = $invitation->cover_photo ?? ($invitation->hero_photo_url ?? 'https://images.unsplash.com/photo-1537633552985-df8429e8048b?auto=format&fit=crop&w=800&q=80');
    
    $events = $invitation->events ?? [
        [
            'title' => 'Upacara Pawiwahan',
            'date' => '2026-12-20',
            'start_time' => '09:00',
            'end_time' => '12:00',
            'timezone' => 'WITA',
            'venue' => 'Kediaman Mempelai Pria',
            'address' => 'Banjar Dauh Puri, Denpasar',
            'maps_url' => 'https://maps.google.com',
        ],
        [
            'title' => 'Resepsi Pawiwahan',
            'date' => '2026-12-20',
            'start_time' => '18:00',
            'end_time' => '21:00',
            'timezone' => 'WITA',
            'venue' => 'Wantilan Taman Sari',
            'address' => 'Jl. Raya Sanur No. 8, Denpasar',
            'maps_url' => 'https://maps.google.com',
        ],
    ];
    $primaryEvent = $events[0] ?? null;
    $eventDate = $primaryEvent['date'] ?? '2026-12-20';
    $eventTime = $primaryEvent['start_time'] ?? '09: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-1537633552985-df8429e8048b?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' => '1234567890',
            'number' => '1234567890',
            'account_holder' => 'Ni Kadek Ayu Dewi Lestari',
            'name' => 'Ni Kadek Ayu Dewi Lestari',
        ],
        [
            'bank_name' => 'Bank BPD Bali',
            'bank' => 'Bank BPD Bali',
            'account_number' => '9876543210',
            'number' => '9876543210',
            'account_holder' => 'I Made Arya Wiguna Putra',
            'name' => 'I Made Arya Wiguna Putra',
        ],
    ];
    $hasGifts = !empty($gifts) || !empty($invitation->qris_image_url) || !empty($invitation->qris_image);

    $stories = $invitation->stories ?? [
        [
            'year' => '2019',
            'title' => 'Pertama Bertemu',
            'story' => 'Kami bertemu dalam kegiatan sekaa teruna di banjar. 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 di antara kami berdua.',
        ],
        [
            'year' => '2023',
            'title' => 'Saling Menguatkan',
            'story' => 'Melewati berbagai proses kedewasaan dan tradisi bersama keluarga besar yang senantiasa memberi restu.',
        ],
        [
            'year' => '2025',
            'title' => 'Ngidih (Meminang)',
            'story' => 'Kedua keluarga bertemu, menyampaikan niat baik, dan saling merestui untuk melangkah ke jenjang pawiwahan.',
        ],
        [
            'year' => '2026',
            'title' => 'Pawiwahan',
            'story' => 'Dengan doa leluhur dan restu Ida Sang Hyang Widhi Wasa, kami melangkah ke kehidupan baru bersama.',
        ],
    ];

    $defaultQuoteText = 'Dalam keluarga di mana suami berbahagia bersama istrinya dan istri berbahagia bersama suaminya, di sanalah kebahagiaan akan kekal selamanya.';
    $defaultQuoteSource = 'Manawa Dharmasastra III.60';
    $quoteText = !empty($invitation->quote) ? $invitation->quote : $defaultQuoteText;
    $quoteSource = !empty($invitation->quote_author) ? $invitation->quote_author : $defaultQuoteSource;

    $wishes = $invitation->wishes ?? [
        (object)[
            'name' => 'Keluarga Besar Banjar Dauh Puri',
            'attendance' => 'hadir',
            'message' => 'Rahajeng Pawiwahan Dewi & Arya. Semoga langgeng riwekasan, bahagia lahir batin selamanya.',
            'created_at' => now()->subHours(2),
        ],
        (object)[
            'name' => 'Wayan Sudarma & Keluarga',
            'attendance' => 'hadir',
            'message' => 'Dumogi rahayu lan ngemanggihin kerahayuan ring sang maduwe karya. Selamat menempuh hidup baru!',
            'created_at' => now()->subDay(),
        ]
    ];
@endphp
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Undangan Pawiwahan | {{ $bride['nickname'] ?? 'Dewi' }} &amp; {{ $groom['nickname'] ?? 'Arya' }}</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=Abril+Fatface&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ asset('templates/elegant/hindu01/css/style.css') }}">
  <style>
    /* COVER OVERLAY */
    #coverOverlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 60px 20px 80px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 12%, rgba(185,154,91,.35), transparent 50%),
        linear-gradient(180deg, #1c1c1c, #111111);
      color: #ececec;
      transition: opacity .8s ease, visibility .8s ease;
    }
    #coverOverlay .eyebrow { color: var(--gold); }
    #coverOverlay .salam { font-family: var(--font-serif); font-style: italic; font-size: 2.2rem; color: var(--gold-light); margin-bottom: 24px; }
    #coverOverlay .names { color: var(--white); }
    #coverOverlay .date { color: var(--gold-light); }
    #coverOverlay .guest { color: #aaa; }
    #coverOverlay .guest b { color: var(--white); }

    /* Floating music button */
    .music-btn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 999;
      width: 48px;
      height: 48px;
      border-radius: 0;
      background: var(--black);
      color: var(--white);
      display: grid;
      place-items: center;
      box-shadow: 4px 4px 0 var(--gold);
      border: 2px solid var(--gold);
      cursor: pointer;
      transition: transform .3s ease;
    }
    .music-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--gold); }
    .hidden { display: none !important; }
  </style>
</head>
<body>
  @include('templates.partials.preview-banner')

  <!-- ====== Ornamen pura: Candi Bentar, Meru, Padmasana, kamboja ====== -->
  <svg width="0" height="0" style="position:absolute" aria-hidden="true">
    <defs>
      <linearGradient id="gGold" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stop-color="#8c7036"/>
        <stop offset=".45" stop-color="#e9d6a4"/>
        <stop offset=".7" stop-color="#b99a5b"/>
        <stop offset="1" stop-color="#8c7036"/>
      </linearGradient>
      <radialGradient id="gKW" cx=".5" cy=".95" r=".95">
        <stop offset="0" stop-color="#f1d27a"/>
        <stop offset=".3" stop-color="#ffffff"/>
        <stop offset="1" stop-color="#f1f1f1"/>
      </radialGradient>

      <!-- Sayap Candi Bentar (hitam) -->
      <symbol id="gateHalf" viewBox="0 0 120 260" style="overflow:visible">
        <path d="M0 260 V220 H10 V190 H22 V160 H36 V130 H52 V100 H70 V70 H90 V40 H104 V16 L112 0 L120 16 V260Z" fill="#141414"/>
        <g stroke="#fff" stroke-opacity=".2" stroke-width="1.4" fill="none">
          <path d="M10 220 H120 M22 190 H120 M36 160 H120 M52 130 H120 M70 100 H120 M90 70 H120 M104 40 H120"/>
        </g>
        <g fill="#fff" fill-opacity=".16">
          <rect x="60" y="204" width="14" height="12" rx="2"/>
          <rect x="78" y="174" width="14" height="12" rx="2"/>
          <rect x="94" y="144" width="14" height="12" rx="2"/>
          <rect x="102" y="114" width="10" height="10" rx="2"/>
        </g>
      </symbol>

      <!-- Meru (menara bertingkat) -->
      <symbol id="meru" viewBox="0 0 120 200" style="overflow:visible">
        <g fill="currentColor">
          <path d="M8 126 L112 126 L100 110 L20 110Z"/>
          <path d="M16 108 L104 108 L94 94 L26 94Z"/>
          <path d="M24 92 L96 92 L88 79 L32 79Z"/>
          <path d="M31 77 L89 77 L82 65 L38 65Z"/>
          <path d="M37 63 L83 63 L77 52 L43 52Z"/>
          <path d="M43 50 L77 50 L72 40 L48 40Z"/>
          <path d="M48 38 L72 38 L68 29 L52 29Z"/>
          <path d="M57 29 L60 4 L63 29Z"/>
          <rect x="34" y="126" width="52" height="40"/>
          <rect x="20" y="166" width="80" height="12"/>
          <rect x="10" y="178" width="100" height="10"/>
          <rect x="2" y="188" width="116" height="10"/>
        </g>
        <rect x="52" y="140" width="16" height="26" fill="#fff" fill-opacity=".85"/>
      </symbol>

      <!-- Padmasana (singgasana suci) -->
      <symbol id="padmasana" viewBox="0 0 120 170" style="overflow:visible">
        <g fill="currentColor">
          <rect x="4"  y="150" width="112" height="14"/>
          <rect x="14" y="136" width="92"  height="14"/>
          <rect x="24" y="122" width="72"  height="14"/>
          <path d="M34 122 V84 H86 V122Z"/>
          <rect x="26" y="76" width="68" height="10"/>
          <rect x="30" y="58" width="10" height="18"/>
          <rect x="80" y="58" width="10" height="18"/>
          <path d="M44 76 V30 C44 14 60 4 60 4 C60 4 76 14 76 30 V76Z"/>
        </g>
        <circle cx="60" cy="40" r="8" fill="#fff" fill-opacity=".9"/>
        <path d="M60 52 V70 M52 60 H68" stroke="#fff" stroke-opacity=".7" stroke-width="2"/>
        <path d="M40 104 H80" stroke="#fff" stroke-opacity=".5" stroke-width="2"/>
      </symbol>

      <!-- Kamboja putih bergaris -->
      <path id="kp" d="M50 52 C28 46 20 22 36 8 C52 -4 70 22 50 52Z"/>
      <g id="kpW">
        <use href="#kp" fill="url(#gKW)" stroke="#161616" stroke-width="1.3"/>
        <path d="M50 48 C44 34 42 22 42 12" stroke="#161616" stroke-opacity=".35" stroke-width="1.1" fill="none"/>
      </g>
      <symbol id="kamboja" viewBox="0 0 100 100" style="overflow:visible">
        <use href="#kpW"/>
        <use href="#kpW" transform="rotate(72 50 50)"/>
        <use href="#kpW" transform="rotate(144 50 50)"/>
        <use href="#kpW" transform="rotate(216 50 50)"/>
        <use href="#kpW" transform="rotate(288 50 50)"/>
        <circle cx="50" cy="50" r="4.5" fill="#e8c35a" stroke="#161616" stroke-width=".8"/>
      </symbol>

      <!-- Daun kamboja -->
      <symbol id="leaf" viewBox="0 0 120 36" style="overflow:visible">
        <path d="M2 18 C30 0 90 0 118 18 C90 36 30 36 2 18Z" fill="#1b1b1b"/>
        <path d="M6 18 H114" stroke="#fff" stroke-opacity=".5" stroke-width="1.3"/>
      </symbol>

      <!-- Rangkaian kamboja untuk pojok -->
      <symbol id="cluster" viewBox="0 0 260 220" style="overflow:visible">
        <use href="#leaf" x="10"  y="90"  width="120" height="36" transform="rotate(-30 70 108)"/>
        <use href="#leaf" x="60"  y="40"  width="120" height="36" transform="rotate(20 120 58)"/>
        <use href="#leaf" x="0"   y="140" width="110" height="33" transform="rotate(-70 55 156)"/>
        <use href="#leaf" x="120" y="110" width="120" height="36" transform="rotate(40 180 128)"/>
        <use href="#kamboja" x="-20" y="-20" width="130" height="130" transform="rotate(15 45 45)"/>
        <use href="#kamboja" x="100" y="40"  width="110" height="110" transform="rotate(-10 155 95)"/>
        <use href="#kamboja" x="30"  y="110" width="90"  height="90"  transform="rotate(30 75 155)"/>
        <use href="#kamboja" x="170" y="-10" width="80"  height="80"  transform="rotate(20 210 30)"/>
      </symbol>

      <!-- Garis ukiran (patra) -->
      <symbol id="ukir" viewBox="0 0 200 30" style="overflow:visible">
        <g fill="none" stroke="#161616" stroke-width="2" stroke-linecap="round">
          <path d="M92 15 C82 15 74 3 58 5 C44 7 40 23 54 25 C66 27 68 14 58 13"/>
          <path d="M108 15 C118 15 126 3 142 5 C156 7 160 23 146 25 C134 27 132 14 142 13"/>
          <path d="M50 15 H8 M150 15 H192"/>
        </g>
        <path d="M100 6 L109 15 L100 24 L91 15Z" fill="#161616"/>
      </symbol>
    </defs>
  </svg>

  <!-- ============ MODAL COVER OVERLAY ============ -->
  <div id="coverOverlay">
    <div class="poleng"></div>
    <div class="corner tl"><svg viewBox="0 0 260 220"><use href="#cluster"/></svg></div>
    <div class="corner tr"><svg viewBox="0 0 260 220"><use href="#cluster"/></svg></div>

    <div class="hero-inner">
      <p class="salam">Om Swastiastu</p>
      <p class="eyebrow">Pawiwahan</p>

      <div class="gate">
        <svg class="half left"  viewBox="0 0 120 260"><use href="#gateHalf"/></svg>
        <svg class="half right" viewBox="0 0 120 260"><use href="#gateHalf"/></svg>
        <div class="kori cover-photo">
          <figure class="kori-in">
            <span>Foto Mempelai</span>
            <img src="{{ $coverPhoto }}" alt="Foto {{ $bride['nickname'] }} dan {{ $groom['nickname'] }}">
          </figure>
        </div>
      </div>

      <h1 class="names">{{ $bride['nickname'] }} <i>&amp;</i> {{ $groom['nickname'] }}</h1>
      <svg class="ukir" viewBox="0 0 200 30"><use href="#ukir"/></svg>
      <p class="date">{{ $formattedDate }}</p>
      <p class="guest">Kepada Yth.<br><b id="guest">{{ $guestName ?? 'Bapak/Ibu/Saudara/i' }}</b></p>
      <button type="button" onclick="openInvitation()" class="btn light">Buka Undangan</button>
    </div>

    <div class="poleng bottom"></div>
  </div>

  <!-- ============ COVER HERO ============ -->
  <header class="hero" id="home">
    <div class="poleng"></div>

    <div class="corner tl"><svg viewBox="0 0 260 220"><use href="#cluster"/></svg></div>
    <div class="corner tr"><svg viewBox="0 0 260 220"><use href="#cluster"/></svg></div>
    <svg class="meru ml" viewBox="0 0 120 200"><use href="#meru"/></svg>
    <svg class="meru mr" viewBox="0 0 120 200"><use href="#meru"/></svg>

    <div class="hero-inner">
      <p class="salam">Om Swastiastu</p>
      <p class="eyebrow">Pawiwahan</p>

      <div class="gate">
        <svg class="half left"  viewBox="0 0 120 260"><use href="#gateHalf"/></svg>
        <svg class="half right" viewBox="0 0 120 260"><use href="#gateHalf"/></svg>
        <div class="kori cover-photo">
          <figure class="kori-in">
            <span>Foto Mempelai</span>
            <img src="{{ $coverPhoto }}" alt="Foto {{ $bride['nickname'] }} dan {{ $groom['nickname'] }}">
          </figure>
        </div>
      </div>

      <h1 class="names">{{ $bride['nickname'] }} <i>&amp;</i> {{ $groom['nickname'] }}</h1>
      <svg class="ukir" viewBox="0 0 200 30"><use href="#ukir"/></svg>
      <p class="date">{{ $formattedDate }}</p>
      <p class="guest">Kepada Yth.<br><b>{{ $guestName ?? 'Bapak/Ibu/Saudara/i' }}</b></p>
      <a href="#countdown" class="btn">Lihat Rangkaian Acara</a>
    </div>

    <div class="poleng bottom"></div>
  </header>

  <!-- ============ 1. COUNTDOWN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown'))
  <section class="section black center" id="countdown">
    <div class="container reveal">
      <p class="kicker">Rahajeng Rahina</p>
      <h2 class="title">Menghitung Hari</h2>
      <div class="countdown">
        <div><b id="d">00</b><span>Rahina</span></div>
        <div><b id="h">00</b><span>Jam</span></div>
        <div><b id="m">00</b><span>Menit</span></div>
        <div><b id="s">00</b><span>Detik</span></div>
      </div>
    </div>
  </section>
  @endif

  <!-- ============ 2. QUOTES / AYAT SUCI ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('quote'))
  <section class="section white center" id="ayat">
    <div class="container narrow reveal">
      <svg class="mini" viewBox="0 0 100 100"><use href="#kamboja"/></svg>
      <p class="salam-dark">Om Swastiastu</p>
      <p class="quote">
        “{{ $quoteText }}”
      </p>
      <p class="source">{{ $quoteSource }}</p>
      <svg class="ukir" viewBox="0 0 200 30"><use href="#ukir"/></svg>
      <p class="pepatah">Sarve bhavantu sukhinah</p>
      <p class="arti">Semoga semua makhluk hidup berbahagia.</p>
    </div>
  </section>
  @endif

  <!-- ============ 3. INFORMASI PENGANTIN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('couple'))
  <section class="section paper" id="pengantin">
    <div class="container">
      <p class="kicker center reveal">Rahajeng Pawiwahan</p>
      <h2 class="title reveal">Mempelai</h2>
      <div class="couple">
        <article class="person reveal">
          <div class="kori photo">
            <figure class="kori-in">
              <img src="{{ $bride['photo'] }}" alt="{{ $bride['name'] }}">
            </figure>
          </div>
          <h3>{{ $bride['name'] }}</h3>
          <p class="role">Mempelai Wanita</p>
          <p>Putri dari<br>{{ $bride['parents'] }}</p>
        </article>

        <div class="and reveal">&amp;</div>

        <article class="person reveal">
          <div class="kori photo">
            <figure class="kori-in">
              <img src="{{ $groom['photo'] }}" alt="{{ $groom['name'] }}">
            </figure>
          </div>
          <h3>{{ $groom['name'] }}</h3>
          <p class="role">Mempelai Pria</p>
          <p>Putra dari<br>{{ $groom['parents'] }}</p>
        </article>
      </div>
    </div>
  </section>
  @endif

  <!-- ============ 4. JADWAL ACARA ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('event'))
  <section class="section black" id="jadwal">
    <div class="container">
      <p class="kicker center reveal">Rangkaian Acara</p>
      <h2 class="title reveal">Jadwal Acara</h2>
      <div class="events">
        @foreach($events as $ev)
        <article class="card reveal">
          <div class="card-band"></div>
          @if($loop->first)
          <svg class="card-icon" viewBox="0 0 120 200"><use href="#meru"/></svg>
          @else
          <svg class="card-icon flower" viewBox="0 0 100 100"><use href="#kamboja"/></svg>
          @endif
          <h3>{{ $ev['title'] }}</h3>
          <p class="when">{{ \Carbon\Carbon::parse($ev['date'])->locale('id')->isoFormat('dddd, D MMMM Y') }}</p>
          <p class="time">{{ $ev['start_time'] ?? '' }} – {{ $ev['end_time'] ?? 'Selesai' }} {{ $ev['timezone'] ?? 'WITA' }}</p>
          <p class="where"><strong>{{ $ev['venue'] ?? '' }}</strong><br>{{ $ev['address'] ?? '' }}</p>
          @if(!empty($ev['maps_url']))
          <div style="margin-top: 18px;">
            <a class="btn light small" style="margin-top:0;" href="{{ $ev['maps_url'] }}" target="_blank" rel="noopener">Lihat Lokasi</a>
          </div>
          @endif
        </article>
        @endforeach
      </div>
      <p class="adat reveal" style="text-align: center; margin-top: 24px; color: var(--gold-light); font-size: .9rem;">Rangkaian adat: Mekala-kalaan · Mepamit</p>
    </div>
  </section>
  @endif

  <!-- ============ 5. KISAH CINTA (TIMELINE) ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('story'))
  @if(!empty($stories) && count($stories) > 0)
  <section class="section white" id="kisah">
    <div class="container narrow">
      <p class="kicker center reveal">Our Story</p>
      <h2 class="title reveal">Kisah Cinta</h2>
      <div class="timeline">
        @foreach($stories as $st)
        <div class="t-item reveal">
          <div class="t-dot"><svg viewBox="0 0 100 100"><use href="#kamboja"/></svg></div>
          <div class="t-box">
            <span class="t-year">{{ $st['year'] ?? '' }}</span>
            <h3>{{ $st['title'] ?? '' }}</h3>
            <p>{{ $st['story'] ?? ($st['content'] ?? ($st['description'] ?? '')) }}</p>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif
  @endif

  <!-- ============ 6. GALERI FOTO ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gallery'))
  @if(!empty($galleries) && count($galleries) > 0)
  <section class="section paper" id="galeri">
    <div class="container">
      <p class="kicker center reveal">Moments</p>
      <h2 class="title reveal">Galeri Foto</h2>
      <div class="gallery">
        @foreach($galleries as $index => $img)
        <div class="g {{ $index == 1 ? 'tall' : ($index == 5 ? 'wide' : '') }} reveal">
          <img src="{{ $img }}" alt="Galeri Pawiwahan {{ $index + 1 }}">
        </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif
  @endif

  <!-- ============ 6B. LIVE STREAMING ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('streaming'))
    @include('templates.sections.streaming')
  @endif

  <!-- ============ 7. INFO TANDA KASIH ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gift'))
  @if($hasGifts)
  <section class="section black center" id="hadiah">
    <div class="container narrow reveal">
      <p class="kicker">Tanda Kasih</p>
      <h2 class="title">Tanda Kasih</h2>
      <p style="color: #ccc;">Doa restu Anda adalah anugerah terindah bagi kami. Bila berkenan memberi tanda kasih secara digital, silakan klik tombol di bawah:</p>
      
      <div style="text-align: center; margin: 24px 0 12px;">
        <button type="button" onclick="toggleGiftAccordion(this)" class="btn light">
          <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: 20px;">
        <div class="gifts">
          @foreach($gifts as $i => $gift)
          <div class="gift">
            <strong>{{ $gift['bank_name'] ?? $gift['bank'] ?? 'Bank' }}</strong>
            <span id="rek_{{ $loop->index }}">{{ $gift['account_number'] ?? $gift['number'] ?? '-' }}</span>
            <em>a.n. {{ $gift['account_holder'] ?? $gift['name'] ?? '-' }}</em>
            <button type="button" class="btn small" onclick="copyGiftNumber('rek_{{ $loop->index }}', this)">Salin Rekening</button>
          </div>
          @endforeach
        </div>

        @if(!empty($invitation->qris_image_url) || !empty($invitation->qris_image))
        <div class="gift" style="margin-top: 20px; text-align: center;">
          <strong>QRIS Tanda Kasih</strong>
          <img src="{{ $invitation->qris_image_url ?: $invitation->qris_image }}" alt="QRIS" style="max-width: 200px; margin: 12px auto; border-radius: 4px; display: block;">
          <em>a.n. {{ $bride['nickname'] }} &amp; {{ $groom['nickname'] }}</em>
        </div>
        @endif
      </div>
    </div>
  </section>
  @endif
  @endif

  <!-- ============ 8. RSVP & UCAPAN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('wishes'))
  <section class="section white" id="rsvp">
    <div class="container narrow">
      <p class="kicker center reveal">Konfirmasi</p>
      <h2 class="title reveal">RSVP &amp; Ucapan</h2>

      @if(session('wish_success'))
        <div style="margin: 16px 0; padding: 12px 16px; background: #e8f5e9; border: 1px solid #81c784; color: #2e7d32; border-radius: 12px; font-size: 13px; text-align: center;">
          {{ session('wish_success') }}
        </div>
      @elseif(session('wish_error'))
        <div style="margin: 16px 0; padding: 12px 16px; background: #ffebee; border: 1px solid #e57373; color: #c62828; border-radius: 12px; font-size: 13px; text-align: center;">
          {{ session('wish_error') }}
        </div>
      @endif

      <form class="rsvp reveal" id="rsvpForm" action="{{ route('invitation.wish', $invitation->slug ?? 'demo') }}" method="POST">
        @csrf
        <label>Nama
          <input type="text" name="name" placeholder="Nama lengkap" value="{{ $guestName ?? '' }}" required>
        </label>
        <label>Kehadiran
          <select name="attendance" required>
            <option value="hadir">Hadir</option>
            <option value="tidak_hadir">Tidak Hadir</option>
            <option value="ragu">Masih Ragu</option>
          </select>
        </label>
        <label>Jumlah Tamu
          <input type="number" name="guest_count" min="1" max="5" value="1">
        </label>
        <label>Ucapan &amp; Doa
          <textarea name="message" rows="4" placeholder="Tulis ucapan untuk kedua mempelai" required></textarea>
        </label>
        <button type="submit" class="btn">Kirim Ucapan</button>
      </form>

      <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">
    <div class="poleng"></div>
    <div class="footer-in reveal">
      <svg class="padma" viewBox="0 0 120 170"><use href="#padmasana"/></svg>
      <p>Merupakan kehormatan dan kebahagiaan bagi kami apabila Bapak/Ibu/Saudara/i berkenan hadir dan memberikan doa restu.</p>
      <h2 class="names small">{{ $bride['nickname'] }} <i>&amp;</i> {{ $groom['nickname'] }}</h2>
      <svg class="ukir light" viewBox="0 0 200 30"><use href="#ukir"/></svg>
      <p class="copy">Om Shanti, Shanti, Shanti, Om</p>
      <p class="thanks">Suksma</p>
    </div>
    <svg class="meru fl" viewBox="0 0 120 200"><use href="#meru"/></svg>
    <svg class="meru fr" viewBox="0 0 120 200"><use href="#meru"/></svg>
    <div class="poleng bottom"></div>

    <!-- JANOER KOENING BRANDING FOOTER -->
    <div style="margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); 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: 30px; width: auto; margin: 0 auto; opacity: 0.85;">
      </a>
      <p style="font-size: 11px; margin-top: 8px; letter-spacing: 0.08em; color: var(--gold-light); text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">Digital Wedding Invitation by Janoer Koening</p>
    </div>
  </footer>

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

  <!-- Background Music -->
  @if(!empty($invitation->audio_url))
  <audio id="bgMusic" src="{{ $invitation->audio_url }}" preload="auto" loop></audio>
  <button id="musicToggle" class="music-btn" aria-label="Toggle Music" onclick="toggleMusic()">
    <svg id="musicIcon" 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>
    // Countdown
    const eventTimeStr = "{{ $eventDate }}T{{ $eventTime }}:00";
    const weddingDate = new Date(eventTimeStr).getTime() || new Date("2026-12-20T09:00:00+08: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);

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

    // Salin nomor rekening & accordion
    function toggleGiftAccordion(btn) {
      const content = document.getElementById('gift-accordion-content');
      if (content) {
        content.classList.toggle('hidden');
        const isHidden = content.classList.contains('hidden');
        const label = btn.querySelector('.gift-btn-label') || btn;
        if (label) {
          label.textContent = isHidden ? 'Kirim Hadiah / Buka Rekening' : 'Tutup Rekening';
        }
      }
    }

    function copyGiftNumber(elId, btn) {
      const el = document.getElementById(elId);
      if (!el) return;
      const text = el.innerText.trim();
      navigator.clipboard.writeText(text).then(() => {
        const orig = btn.innerText;
        btn.innerText = 'Tersalin ✓';
        setTimeout(() => { btn.innerText = orig; }, 2000);
      }).catch(() => {
        prompt('Salin nomor rekening:', text);
      });
    }

    // Lightbox
    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"));
    }

    // Audio & Cover modal
    let isPlaying = false;
    const bgMusic = document.getElementById("bgMusic");

    function updateMusicIcon() {
      const icon = document.getElementById("musicIcon");
      if (!icon) return;
      if (isPlaying) {
        icon.innerHTML = '<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"/>';
      } else {
        icon.innerHTML = '<path d="M4.27 3L3 4.27l9 9v.28c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4v-1.73l4 4V21h-2v-3.73l2.73 2.73 1.27-1.27L4.27 3zM12 7V3h6v4h-6z"/>';
      }
    }

    function toggleMusic() {
      if (!bgMusic) return;
      if (isPlaying) {
        bgMusic.pause();
        isPlaying = false;
      } else {
        bgMusic.play();
        isPlaying = true;
      }
      updateMusicIcon();
    }

    function openInvitation() {
      const cov = document.getElementById("coverOverlay");
      if (cov) {
        cov.style.opacity = "0";
        cov.style.visibility = "hidden";
        setTimeout(() => cov.style.display = "none", 800);
      }
      if (bgMusic) {
        bgMusic.play().then(() => {
          isPlaying = true;
          updateMusicIcon();
        }).catch(() => {});
      }
    }
  </script>
</body>
</html>