@php
    $bride = $invitation->bride ?? [
        'name' => 'Sarah Zulaikha, S.Farm., Apt.',
        'nickname' => 'Sarah',
        'parents' => 'Bapak Dt. Maruhun Basa (Alm) & Ibu Hj. Nurlela',
        'photo' => 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80',
        'instagram' => '@sarahzulaikha',
    ];
    $groom = $invitation->groom ?? [
        'name' => 'M. Fikri Al-Ghazali, M.T.',
        'nickname' => 'Fikri',
        'parents' => 'Bapak H. Anwar Sutan Palindih & Ibu Hj. Rosdiana',
        'photo' => 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=600&q=80',
        'instagram' => '@fikrialghazali',
    ];
    $coverPhoto = $invitation->cover_photo ?? 'https://images.unsplash.com/photo-1583939003579-730e3918a45a?auto=format&fit=crop&w=800&q=80';
    $events = $invitation->events ?? [
        [
            'title' => 'Akad Ijab Kabul',
            'date' => '2026-10-24',
            'start_time' => '08:30',
            'end_time' => '10:00',
            'timezone' => 'WIB',
            'venue' => 'Masjid Raya Jamik Tarok',
            'address' => 'Tarok Dipo, Guguk Panjang, Bukittinggi',
            'maps_url' => 'https://maps.google.com/?q=Bukittinggi+Sumatera+Barat',
        ],
        [
            'title' => 'Manjapuik & Basandiang',
            'date' => '2026-10-24',
            'start_time' => '10:30',
            'end_time' => '12:00',
            'timezone' => 'WIB',
            'venue' => 'Rumah Gadang Keluarga Sarah',
            'address' => 'Jl. Sudirman No. 1, Benteng Pasar Atas, Bukittinggi',
            'maps_url' => 'https://maps.google.com/?q=Bukittinggi+Sumatera+Barat',
        ],
        [
            'title' => 'Baralek Gadang',
            'date' => '2026-10-24',
            'start_time' => '12:00',
            'end_time' => '17:00',
            'timezone' => 'WIB',
            'venue' => 'Gedung Tri Arga / Balai Adat Bukittinggi',
            'address' => 'Jl. Sudirman No. 1, Benteng Pasar Atas, Bukittinggi',
            'maps_url' => 'https://maps.google.com/?q=Bukittinggi+Sumatera+Barat',
        ],
    ];
    $primaryEvent = $events[0] ?? null;
    $eventDate = $primaryEvent['date'] ?? '2026-10-24';
    $eventTime = $primaryEvent['start_time'] ?? '08:30';
    $carbonDate = \Carbon\Carbon::parse($eventDate);
    $formattedDate = $carbonDate->locale('id')->isoFormat('dddd, D MMMM Y');

    $galleries = $invitation->gallery ?? [
        'https://images.unsplash.com/photo-1583939003579-730e3918a45a?auto=format&fit=crop&w=600&q=80',
        'https://images.unsplash.com/photo-1519741497674-611481863552?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-1606800052052-a08af7148866?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 Nagari',
            'bank' => 'Bank Nagari',
            'account_number' => '1234567890',
            'number' => '1234567890',
            'account_holder' => 'Sutan Rajo Mudo, S.T.',
            'name' => 'Sutan Rajo Mudo, S.T.',
        ],
        [
            'bank_name' => 'Bank Mandiri',
            'bank' => 'Bank Mandiri',
            'account_number' => '9876543210',
            'number' => '9876543210',
            'account_holder' => 'Puti Reno Nilam, S.Pd.',
            'name' => 'Puti Reno Nilam, S.Pd.',
        ],
    ];
    $hasGifts = !empty($gifts) || !empty($invitation->qris_image_url) || !empty($invitation->qris_image);

    $stories = $invitation->stories ?? [
        [
            'year' => 'Agustus 2020',
            'title' => 'Tatap Pandang di Ranah Minang',
            'story' => 'Bapasuo patamo kali dalam kagiatan adaik di Bukittinggi. Kasantiangan budi Sarah sarato kasopanan Fikri mambuek hati samo tapauik dalam sanun kasiah.',
        ],
        [
            'year' => 'Mei 2023',
            'title' => 'Marantau Kasiah, Manyimpan Janji',
            'story' => 'Walau jarak tabantang dek tuntutan karajo sarato kuliah, niat baiak tatap taguah. Komunikasi nan diikek doa manjago kasiah tatap suci di jalan Allah.',
        ],
        [
            'year' => 'Februari 2026',
            'title' => 'Maminang & Batuka Tando',
            'story' => 'Keluarga gadang Marapulai tibo mambao siriah langkok sarato cincin ameh panando ikatan. Kaduo pihak sapakaik manantukan ari baiak untuak baralek.',
        ],
        [
            'year' => 'Oktober 2026',
            'title' => 'Basandiang di Rumah Gadang',
            'story' => 'Hari nan dinanti-nanti tibo. Sarah bapakain Sunting Ameh Gadang dan Fikri basuntiang Deta Saluak, basandiang rasmi manjadi sapasang laki bini.',
        ],
    ];

    $defaultQuoteText = 'Dan di antara tanda-tanda (kebesaran)-Nya ialah Dia menciptakan pasangan-pasangan untukmu dari jenismu sendiri, agar kamu cenderung dan merasa tenteram kepadanya, dan Dia menjadikan 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' => 'Mak Datuak Marajo',
            'attendance' => 'hadir',
            'message' => 'Barakallahu lakuma. Salamaik manampuah hiduik baru kamanakan Fikri & Sarah. Saua sakasua, rukun sampai ka anak cucu.',
            'created_at' => now()->subHours(2),
        ],
        (object)[
            'name' => 'Rang Mudo Suku Chaniago',
            'attendance' => 'hadir',
            'message' => 'Salamaik Baralek Gadang! Siap maramiakan pasambahan jo arak-arakan Payuang Kuniang!',
            'created_at' => now()->subDay(),
        ]
    ];
@endphp
<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Baralek Gadang - {{ $groom['nickname'] ?? 'Fikri' }} &amp; {{ $bride['nickname'] ?? 'Sarah' }} | Adat Minangkabau</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=Cinzel:wght@500;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Great+Vibes&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            minang: {
              crimson: '#630D19',
              maroon: '#45060F',
              velvet: '#2B0409',
              gold: '#D4AF37',
              goldShine: '#FCE794',
              goldDark: '#997B1A',
              emerald: '#083B28',
              black: '#140103'
            }
          },
          fontFamily: {
            serif: ['"Cormorant Garamond"', 'serif'],
            script: ['"Great Vibes"', 'cursive'],
            cinzel: ['"Cinzel"', 'serif'],
            sans: ['"Plus Jakarta Sans"', 'sans-serif']
          }
        }
      }
    }
  </script>

  <style>
    /* Golden Dust Particle Canvas */
    #gold-particles-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 25;
    }

    /* Pucuak Rebung & Songket Motif Border */
    .songket-border-top {
      height: 18px;
      width: 100%;
      background: linear-gradient(90deg, #D4AF37, #FCE794, #997B1A, #FCE794, #D4AF37);
      --mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 90deg, #0000 91deg) 50% / 18px 100%;
      -webkit-mask: var(--mask);
      mask: var(--mask);
    }
    .songket-border-bottom {
      height: 18px;
      width: 100%;
      background: linear-gradient(90deg, #D4AF37, #FCE794, #997B1A, #FCE794, #D4AF37);
      --mask: conic-gradient(from 135deg at top, #0000, #000 1deg 90deg, #0000 91deg) 50% / 18px 100%;
      -webkit-mask: var(--mask);
      mask: var(--mask);
    }

    /* Animated Swaying Sunting Minang */
    @keyframes suntingSwayLeft {
      0%, 100% { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(3deg) translateY(-2px) scale(1.02); }
    }
    @keyframes suntingSwayRight {
      0%, 100% { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(-3deg) translateY(-2px) scale(1.02); }
    }
    @keyframes royalGlow {
      0%, 100% { filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4)); }
      50% { filter: drop-shadow(0 0 25px rgba(252, 231, 148, 0.85)); }
    }

    .sunting-sway-left {
      transform-origin: top left;
      animation: suntingSwayLeft 6.5s ease-in-out infinite;
    }
    .sunting-sway-right {
      transform-origin: top right;
      animation: suntingSwayRight 7s ease-in-out infinite;
    }
    .royal-glow {
      animation: royalGlow 4s ease-in-out infinite;
    }

    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }

    .app-frame {
      max-width: 480px;
      min-height: 100vh;
      margin: 0 auto;
      box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
      position: relative;
      background-color: #2B0409;
    }
  </style>
</head>
<body class="bg-minang-black text-neutral-100 font-sans antialiased overflow-x-hidden selection:bg-minang-gold selection:text-minang-maroon">
  @include('templates.partials.preview-banner')

  @if(isset($isPreview) && $isPreview)
  <div class="fixed top-0 inset-x-0 z-[100] bg-minang-maroon text-minang-goldShine text-xs py-1.5 text-center font-cinzel tracking-wider uppercase border-b border-minang-gold/40">
    Mode Pratinjau Desain (Preview Mode)
  </div>
  @endif

  <!-- Interactive Floating Golden Shimmer & Particles Canvas -->
  <canvas id="gold-particles-canvas"></canvas>

  <!-- Audio Element -->
  @if(!empty($invitation->audio_url))
  <audio id="minang-bgm" src="{{ $invitation->audio_url }}" loop preload="auto"></audio>
  <button id="btn-audio-toggle" onclick="toggleMusic()" aria-label="Toggle Musik Minang" class="fixed top-5 right-5 z-40 w-11 h-11 rounded-full bg-minang-maroon/90 border border-minang-gold text-minang-goldShine shadow-2xl flex items-center justify-center transition-transform hover:scale-105 active:scale-95 group">
    <i id="audio-icon" class="fa-solid fa-compact-disc text-xl transition duration-500"></i>
  </button>
  @endif

  <!-- Floating Navigation Dock -->
  <div class="fixed bottom-4 inset-x-0 z-40 flex justify-center pointer-events-none">
    <nav class="pointer-events-auto bg-minang-maroon/95 backdrop-blur-md border border-minang-gold/50 px-5 py-2.5 rounded-full shadow-2xl flex items-center gap-4 text-minang-goldShine text-xs">
      <a href="#cover-hero" class="hover:text-white transition" title="Beranda"><i class="fa-solid fa-landmark"></i></a>
      <a href="#quotes" class="hover:text-white transition" title="Petatah Minang"><i class="fa-solid fa-quran"></i></a>
      <a href="#mempelai" class="hover:text-white transition" title="Anak Daro & Marapulai"><i class="fa-solid fa-user-group"></i></a>
      <a href="#jadwal" class="hover:text-white transition" title="Baralek Gadang"><i class="fa-solid fa-calendar-check"></i></a>
      <a href="#kisah" class="hover:text-white transition" title="Janjang Kasiah"><i class="fa-solid fa-heart"></i></a>
      <a href="#galeri" class="hover:text-white transition" title="Galeri Foto"><i class="fa-solid fa-images"></i></a>
      <a href="#gift" class="hover:text-white transition" title="Tando Kasiah"><i class="fa-solid fa-gift"></i></a>
      <a href="#rsvp" class="hover:text-white transition" title="RSVP & Doa"><i class="fa-solid fa-envelope-open-text"></i></a>
    </nav>
  </div>

  <!-- FULLSCREEN COVER MODAL OVERLAY -->
  <div id="cover-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-minang-black text-neutral-100 transition-all duration-1000">
    <div class="absolute inset-0 bg-cover bg-center opacity-30 mix-blend-luminosity" style="background-image: url('{{ $coverPhoto }}');"></div>
    <div class="absolute inset-0 bg-gradient-to-b from-minang-black/95 via-minang-maroon/85 to-minang-black/95"></div>

    <!-- Ornamental Swaying Corner Sunting Gold Wreaths -->
    <div class="absolute top-0 left-0 w-32 sm:w-44 pointer-events-none sunting-sway-left z-10 opacity-90">
      <svg viewBox="0 0 160 160" fill="none" class="w-full h-full text-minang-gold">
        <path d="M0,0 Q50,15 75,65 Q90,100 135,115" stroke="#D4AF37" stroke-width="2" fill="none"/>
        <path d="M10,0 Q60,30 70,90 Q75,115 100,150" stroke="#FCE794" stroke-width="1.5" fill="none"/>
        <circle cx="75" cy="65" r="6" fill="#FCE794" stroke="#997B1A"/>
        <circle cx="68" cy="58" r="5" fill="#D4AF37"/>
        <circle cx="82" cy="60" r="5" fill="#D4AF37"/>
        <circle cx="125" cy="110" r="7" fill="#FCE794" stroke="#997B1A"/>
        <circle cx="100" cy="150" r="6" fill="#D4AF37"/>
        <path d="M30,15 Q50,8 55,25 Q40,30 30,15 Z" fill="#D4AF37"/>
        <path d="M65,40 Q85,35 90,52 Q72,56 65,40 Z" fill="#FCE794" opacity="0.8"/>
      </svg>
    </div>

    <div class="absolute top-0 right-0 w-32 sm:w-44 pointer-events-none sunting-sway-right z-10 opacity-90 transform -scale-x-100">
      <svg viewBox="0 0 160 160" fill="none" class="w-full h-full text-minang-gold">
        <path d="M0,0 Q50,15 75,65 Q90,100 135,115" stroke="#D4AF37" stroke-width="2" fill="none"/>
        <circle cx="75" cy="65" r="6" fill="#FCE794" stroke="#997B1A"/>
        <circle cx="68" cy="58" r="5" fill="#D4AF37"/>
        <circle cx="82" cy="60" r="5" fill="#D4AF37"/>
        <path d="M30,15 Q50,8 55,25 Q40,30 30,15 Z" fill="#D4AF37"/>
      </svg>
    </div>

    <!-- Center Card -->
    <div class="relative z-20 w-11/12 max-w-md p-8 sm:p-9 text-center rounded-[2.5rem] border border-minang-gold/50 bg-minang-maroon/90 backdrop-blur-xl shadow-2xl">
      <div class="w-24 h-16 mx-auto mb-3 flex items-center justify-center royal-glow">
        <svg viewBox="0 0 100 60" fill="none" class="w-full h-full">
          <path d="M5,42 Q20,38 35,40 Q50,2 50,2 Q50,2 65,40 Q80,38 95,42 L90,52 L10,52 Z" fill="#D4AF37" stroke="#FCE794" stroke-width="1.5"/>
          <path d="M22,40 Q35,12 35,12 Q35,12 48,40" stroke="#FCE794" stroke-width="1" fill="none"/>
          <path d="M52,40 Q65,12 65,12 Q65,12 78,40" stroke="#FCE794" stroke-width="1" fill="none"/>
        </svg>
      </div>

      <p class="font-cinzel text-[10px] tracking-[0.35em] text-minang-goldShine uppercase font-bold mb-1">Baralek Gadang • Adat Minangkabau</p>
      <h1 class="font-script text-5xl sm:text-6xl text-minang-goldShine my-1">{{ $groom['nickname'] ?? 'Fikri' }} &amp; {{ $bride['nickname'] ?? 'Sarah' }}</h1>
      <p class="font-serif italic text-xs text-neutral-300">"Kanduang dibao sarato, cinto diikek janji arek basamo"</p>

      <div class="w-24 h-px bg-gradient-to-r from-transparent via-minang-gold to-transparent mx-auto my-4"></div>

      <div class="p-3.5 rounded-2xl bg-black/50 border border-minang-gold/40 my-4">
        <span class="text-[11px] uppercase tracking-widest text-neutral-300">Kepada Yth. Dunsanak/Bapak/Ibu:</span>
        <h2 id="guest-name-badge" class="font-serif text-2xl font-bold text-minang-goldShine capitalize mt-0.5 tracking-wide">{{ $guestName ?? 'Tamu Kehormatan' }}</h2>
      </div>

      <button id="btn-open-invitation" onclick="openInvitation()" class="group relative inline-flex items-center gap-2.5 px-8 py-3.5 rounded-full bg-gradient-to-r from-minang-gold via-minang-goldShine to-minang-gold text-minang-velvet font-semibold shadow-xl hover:shadow-minang-gold/40 transform hover:-translate-y-0.5 active:translate-y-0 transition duration-300">
        <i class="fa-solid fa-envelope-open text-sm group-hover:rotate-12 transition"></i>
        <span class="font-cinzel tracking-widest text-xs uppercase font-bold">Bukak Undangan</span>
      </button>
    </div>
  </div>

  <!-- MAIN APP CONTAINER -->
  <div class="app-frame overflow-hidden border-x border-minang-gold/30">

    <!-- TOP SONGKET ACCENT -->
    <div class="songket-border-top sticky top-0 z-30 opacity-90"></div>

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown'))
<!-- HERO SECTION & COUNTDOWN -->
    <section id="section-countdown" class="relative pt-12 pb-16 px-6 text-center overflow-hidden bg-gradient-to-b from-minang-velvet via-minang-maroon to-minang-velvet">
    <div id="cover-hero"></div>
      <div class="w-28 h-16 mx-auto mb-3 flex items-center justify-center royal-glow">
        <svg viewBox="0 0 100 60" fill="none" class="w-full h-full">
          <path d="M5,42 Q20,38 35,40 Q50,2 50,2 Q50,2 65,40 Q80,38 95,42 L90,52 L10,52 Z" fill="#D4AF37" stroke="#FCE794" stroke-width="1.5"/>
          <path d="M22,40 Q35,12 35,12 Q35,12 48,40" stroke="#FCE794" stroke-width="1" fill="none"/>
          <path d="M52,40 Q65,12 65,12 Q65,12 78,40" stroke="#FCE794" stroke-width="1" fill="none"/>
        </svg>
      </div>

      <div class="inline-flex items-center gap-2 px-3.5 py-1 rounded-full bg-minang-gold/15 border border-minang-gold/50 text-minang-goldShine text-[10px] tracking-[0.25em] uppercase font-cinzel mb-3">
        <i class="fa-solid fa-crown text-minang-gold text-[9px]"></i> Baralek Gadang Minangkabau
      </div>

      <p class="font-serif italic text-sm text-minang-goldShine/90">The Royal Wedding of</p>
      <h1 class="font-script text-6xl text-minang-goldShine drop-shadow-md my-1">{{ $groom['nickname'] ?? 'Fikri' }} &amp; {{ $bride['nickname'] ?? 'Sarah' }}</h1>
      <p class="font-cinzel tracking-[0.2em] text-xs text-neutral-300 uppercase mb-6">
        {{ $formattedDate }}
      </p>

      <!-- Anak Daro & Marapulai Portrait Frame -->
      <div class="relative mx-auto w-52 h-52 mb-8">
        <svg viewBox="0 0 200 200" class="absolute inset-0 w-full h-full royal-glow">
          <circle cx="100" cy="100" r="92" fill="none" stroke="#D4AF37" stroke-width="2" stroke-dasharray="5,4"/>
          <circle cx="100" cy="8" r="5" fill="#FCE794" stroke="#997B1A"/>
          <circle cx="192" cy="100" r="5" fill="#FCE794" stroke="#997B1A"/>
          <circle cx="100" cy="192" r="5" fill="#FCE794" stroke="#997B1A"/>
          <circle cx="8" cy="100" r="5" fill="#FCE794" stroke="#997B1A"/>
        </svg>
        <div class="w-full h-full p-2.5">
          <img src="{{ $coverPhoto }}" 
               alt="{{ $groom['nickname'] }} & {{ $bride['nickname'] }}" 
               class="w-full h-full object-cover rounded-full border-2 border-minang-gold shadow-2xl">
        </div>
      </div>

      <!-- COUNTDOWN TIMER -->
      <div class="rounded-3xl p-6 bg-minang-black/70 border border-minang-gold/40 shadow-2xl backdrop-blur-md">
        <p class="font-cinzel text-[11px] uppercase tracking-widest text-minang-goldShine mb-4">Mambilang Hari Manuju Janji Suci</p>
        <div class="grid grid-cols-4 gap-2 text-center" id="countdown-box">
          <div class="p-2.5 rounded-2xl bg-minang-maroon/80 border border-minang-gold/30">
            <span id="cd-days" class="block font-serif text-3xl font-bold text-minang-goldShine">00</span>
            <span class="text-[9px] uppercase font-cinzel text-neutral-300">Hari</span>
          </div>
          <div class="p-2.5 rounded-2xl bg-minang-maroon/80 border border-minang-gold/30">
            <span id="cd-hours" class="block font-serif text-3xl font-bold text-minang-goldShine">00</span>
            <span class="text-[9px] uppercase font-cinzel text-neutral-300">Jam</span>
          </div>
          <div class="p-2.5 rounded-2xl bg-minang-maroon/80 border border-minang-gold/30">
            <span id="cd-minutes" class="block font-serif text-3xl font-bold text-minang-goldShine">00</span>
            <span class="text-[9px] uppercase font-cinzel text-neutral-300">Minit</span>
          </div>
          <div class="p-2.5 rounded-2xl bg-minang-maroon/80 border border-minang-gold/30">
            <span id="cd-seconds" class="block font-serif text-3xl font-bold text-minang-goldShine">00</span>
            <span class="text-[9px] uppercase font-cinzel text-neutral-300">Datiak</span>
          </div>
        </div>
      </div>
    </section>
@endif

    <!-- SECTION: AYAT SUCI & PETATAH MINANG -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('quote'))
    <section id="section-quote" class="py-14 px-6 relative bg-minang-maroon border-t border-minang-gold/30 text-center">
      <div class="max-w-xl mx-auto p-8 rounded-3xl bg-black/40 border border-minang-gold/40 shadow-2xl relative reveal">
        <i class="fa-solid fa-quote-left text-2xl text-minang-gold/50 mb-4 block"></i>
        <p class="font-serif italic text-sm sm:text-base leading-relaxed text-neutral-200 mb-4">
          “{!! nl2br(e($quoteText)) !!}”
        </p>
        <div>
          <span class="font-cinzel text-[11px] tracking-[0.25em] text-minang-goldShine font-bold uppercase">— {{ $quoteSource }} —</span>
        </div>
      </div>
    </section>
    @endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('couple'))
<!-- SECTION: MEMPELAI -->
    <section id="section-couple" class="py-14 px-6 bg-minang-velvet relative text-center">
    <div id="mempelai"></div>
      <div class="mb-10 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-minang-goldShine font-bold">Mempelai nan Basandiang</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">Anak Daro &amp; Marapulai</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-minang-gold to-transparent mx-auto my-2.5"></div>
      </div>

      <div class="space-y-8">
        <!-- Anak Daro -->
        <div class="p-7 rounded-[2rem] bg-minang-maroon/70 border border-minang-gold/40 shadow-xl reveal">
          <div class="relative w-40 h-40 mx-auto rounded-full p-2 border-2 border-minang-gold bg-minang-black mb-4 shadow-lg">
            <img src="{{ $bride['photo'] ?? 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=500&q=80' }}" 
                 alt="{{ $bride['name'] }}" 
                 class="w-full h-full object-cover rounded-full">
            <div class="absolute -bottom-2 inset-x-0 mx-auto w-max px-4 py-0.5 rounded-full bg-minang-gold text-minang-velvet font-cinzel text-[10px] font-bold uppercase tracking-wider shadow">
              Anak Daro
            </div>
          </div>
          <h3 class="font-serif text-2xl font-bold text-minang-goldShine mb-0.5">{{ $bride['name'] }}</h3>
          <div class="text-xs text-neutral-300 space-y-1 mb-4">
            <p>Putri kanduang dari:</p>
            <p class="font-serif font-bold text-base text-white">{{ $bride['parents'] ?? 'Bapak Dt. Maruhun Basa & Ibu Hj. Nurlela' }}</p>
          </div>
          @if(!empty($bride['instagram']))
          <span class="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full bg-minang-black text-minang-goldShine text-xs font-cinzel uppercase border border-minang-gold/40">
            <i class="fa-brands fa-instagram text-xs"></i> {{ $bride['instagram'] }}
          </span>
          @endif
        </div>

        <!-- Marapulai -->
        <div class="p-7 rounded-[2rem] bg-minang-maroon/70 border border-minang-gold/40 shadow-xl reveal">
          <div class="relative w-40 h-40 mx-auto rounded-full p-2 border-2 border-minang-gold bg-minang-black mb-4 shadow-lg">
            <img src="{{ $groom['photo'] ?? 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=500&q=80' }}" 
                 alt="{{ $groom['name'] }}" 
                 class="w-full h-full object-cover rounded-full">
            <div class="absolute -bottom-2 inset-x-0 mx-auto w-max px-4 py-0.5 rounded-full bg-minang-gold text-minang-velvet font-cinzel text-[10px] font-bold uppercase tracking-wider shadow">
              Marapulai
            </div>
          </div>
          <h3 class="font-serif text-2xl font-bold text-minang-goldShine mb-0.5">{{ $groom['name'] }}</h3>
          <div class="text-xs text-neutral-300 space-y-1 mb-4">
            <p>Putra kanduang dari:</p>
            <p class="font-serif font-bold text-base text-white">{{ $groom['parents'] ?? 'Bapak H. Anwar Sutan Palindih & Ibu Hj. Rosdiana' }}</p>
          </div>
          @if(!empty($groom['instagram']))
          <span class="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full bg-minang-black text-minang-goldShine text-xs font-cinzel uppercase border border-minang-gold/40">
            <i class="fa-brands fa-instagram text-xs"></i> {{ $groom['instagram'] }}
          </span>
          @endif
        </div>
      </div>
    </section>
@endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('event'))
<!-- SECTION: JADWAL BARALEK -->
    <section id="section-event" class="py-14 px-6 bg-minang-black text-neutral-100 relative">
    <div id="jadwal"></div>
      <div class="text-center mb-10 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-minang-goldShine font-bold">Rangkaian Acara</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">Jadwal Baralek</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-minang-gold to-transparent mx-auto my-2.5"></div>
      </div>

      <div class="space-y-6">
        @foreach($events as $event)
        <div class="p-6 rounded-3xl bg-minang-maroon/60 border border-minang-gold/40 text-center shadow-lg reveal">
          <div class="w-12 h-12 mx-auto rounded-full bg-minang-gold/20 text-minang-goldShine flex items-center justify-center text-lg mb-3 border border-minang-gold/50">
            <i class="fa-solid fa-crown"></i>
          </div>
          <h3 class="font-serif text-2xl font-bold text-minang-goldShine">{{ $event['title'] }}</h3>
          <p class="font-cinzel text-[11px] text-neutral-300 mb-2">{{ \Carbon\Carbon::parse($event['date'])->locale('id')->isoFormat('dddd, D MMMM Y') }}</p>
          <div class="font-serif text-2xl font-bold text-white mb-2">{{ $event['start_time'] ?? '08:30' }} - {{ $event['end_time'] ?? 'Selesai' }} {{ $event['timezone'] ?? 'WIB' }}</div>
          <p class="text-xs text-neutral-300 leading-relaxed mb-4"><strong>{{ $event['venue'] }}</strong><br>{{ $event['address'] }}</p>
          @if(!empty($event['maps_url']))
          <a href="{{ $event['maps_url'] }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-minang-gold text-minang-velvet font-cinzel text-[10px] font-bold uppercase tracking-wider hover:bg-minang-goldShine transition shadow">
            <i class="fa-solid fa-map-location-dot"></i> Buka Peta Lokasi
          </a>
          @endif
        </div>
        @endforeach
      </div>
    </section>
@endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('story'))
<!-- SECTION: KISAH CINTA -->
    @if(!empty($stories) && count($stories) > 0)
    <section id="section-story" class="py-14 px-6 bg-minang-velvet text-neutral-100 relative">
    <div id="kisah"></div>
      <div class="text-center mb-12 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-minang-goldShine font-bold">Untaian Kasiah</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">Janjang Janji Basamo</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-minang-gold to-transparent mx-auto my-2.5"></div>
      </div>

      <div class="relative border-l-2 border-minang-gold/40 ml-4 space-y-9 pl-6">
        @foreach($stories as $st)
        <div class="relative group reveal">
          <div class="absolute -left-[33px] top-1 w-6 h-6 rounded-full bg-minang-gold text-minang-velvet flex items-center justify-center text-[10px] font-bold shadow">
            <i class="fa-solid fa-heart"></i>
          </div>
          <div class="p-5 rounded-2xl bg-minang-maroon/60 border border-minang-gold/30 shadow">
            <span class="inline-block px-2.5 py-0.5 rounded-full bg-minang-gold text-minang-velvet font-cinzel text-[9px] font-bold mb-1.5">{{ $st['year'] ?? '' }}</span>
            <h4 class="font-serif text-xl font-bold text-minang-goldShine">{{ $st['title'] ?? '' }}</h4>
            <p class="text-xs text-neutral-300 mt-1.5 leading-relaxed">{{ $st['story'] ?? ($st['description'] ?? '') }}</p>
          </div>
        </div>
        @endforeach
      </div>
    </section>
    @endif
@endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gallery'))
<!-- SECTION: GALERI FOTO -->
    @if(!empty($galleries) && count($galleries) > 0)
    <section id="section-gallery" class="py-14 px-6 bg-minang-maroon relative">
    <div id="galeri"></div>
      <div class="text-center mb-10 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-minang-goldShine font-bold">Kenangan Abadi</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">Galeri Ranah Kasiah</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-minang-gold to-transparent mx-auto my-2.5"></div>
      </div>

      <div class="grid grid-cols-2 gap-3 sm:gap-4">
        @foreach($galleries as $index => $img)
        <div class="group relative overflow-hidden rounded-2xl aspect-square cursor-pointer border border-minang-gold/40 shadow-md reveal" onclick="openLightbox('{{ $img }}', 'Dokumentasi Minang {{ $index + 1 }}')">
          <img src="{{ $img }}" alt="Galeri {{ $index + 1 }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
          <div class="absolute inset-0 bg-minang-velvet/40 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
            <span class="w-8 h-8 rounded-full bg-minang-gold text-minang-velvet flex items-center justify-center text-xs"><i class="fa-solid fa-eye"></i></span>
          </div>
        </div>
        @endforeach
      </div>
    </section>
    @endif
@endif

    <!-- LIGHTBOX PREVIEW MODAL -->
    <div id="lightbox-modal" class="fixed inset-0 z-50 bg-black/90 hidden items-center justify-center p-4 backdrop-blur-md" onclick="closeLightbox()">
      <button class="absolute top-6 right-6 text-white text-3xl hover:text-minang-gold transition" onclick="closeLightbox()">
        <i class="fa-solid fa-xmark"></i>
      </button>
      <div class="max-w-md w-full text-center" onclick="event.stopPropagation()">
        <img id="lightbox-img" src="" alt="Popup Foto" class="max-w-full max-h-[70vh] mx-auto rounded-2xl border border-minang-gold/50 shadow-2xl object-contain">
        <p id="lightbox-caption" class="text-minang-goldShine font-serif text-lg mt-3 italic"></p>
      </div>
    </div>

    <!-- SECTION: TANDO KASIAH -->
    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gift'))
    @if($hasGifts)
    <section id="section-gift" class="py-14 px-6 bg-minang-velvet text-neutral-100 relative text-center">
      <div class="mb-6 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-minang-goldShine font-bold">Tando Kasiah</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">Kado &amp; Amplop Digital</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-minang-gold to-transparent mx-auto my-2.5"></div>
        <p class="text-xs text-neutral-300 max-w-md mx-auto">
          Doa restu dunsanak marupokan hadiah paliang baharago untuak kami. Namun kok nio mambarian tando kasiah, silakan klik tombol di bawah ko:
        </p>
      </div>

      <div class="mb-8 reveal">
        <button type="button" onclick="toggleGiftAccordion(this)" class="px-6 py-2.5 rounded-full bg-minang-gold text-minang-velvet font-cinzel text-xs font-bold uppercase tracking-wider hover:bg-minang-goldShine transition shadow-lg inline-flex items-center gap-2">
          <i class="fa-solid fa-gift"></i>
          <span class="gift-btn-label">Kirim Hadiah / Buka Rekening</span>
        </button>
      </div>

      <div id="gift-accordion-content" class="hidden transition-all duration-300">
        <div class="space-y-5 reveal max-w-xl mx-auto">
          @foreach($gifts as $i => $gift)
          <div class="p-6 rounded-3xl bg-minang-maroon/80 border border-minang-gold/50 shadow-xl text-left relative overflow-hidden">
            <div class="flex justify-between items-center mb-4">
              <span class="font-cinzel font-bold text-lg text-minang-goldShine">{{ $gift['bank_name'] ?? $gift['bank'] ?? 'Bank' }}</span>
              <i class="fa-solid fa-building-columns text-xl text-minang-gold/60"></i>
            </div>
            <span class="text-[11px] text-neutral-300">Nomor Rekening:</span>
            <div class="flex items-center justify-between mt-1 mb-3">
              <span class="font-mono text-xl font-bold text-white tracking-wider" id="rek_{{ $loop->index }}">{{ $gift['account_number'] ?? $gift['number'] ?? '-' }}</span>
              <button onclick="copyGiftNumber('rek_{{ $loop->index }}', this)" class="px-3 py-1 rounded-full bg-minang-gold text-minang-velvet font-cinzel text-[10px] font-bold uppercase tracking-wider hover:bg-minang-goldShine transition shadow inline-flex items-center gap-1">
                <i class="fa-regular fa-copy"></i> <span>Salin</span>
              </button>
            </div>
            <p class="text-xs text-neutral-300">Atas Nama: <strong class="text-minang-goldShine">{{ $gift['account_holder'] ?? $gift['name'] ?? '-' }}</strong></p>
          </div>
          @endforeach
        </div>

        @if(!empty($invitation->qris_image_url) || !empty($invitation->qris_image))
        <div class="mt-8 p-6 rounded-3xl bg-minang-maroon/80 border border-minang-gold/50 shadow-xl text-center max-w-sm mx-auto reveal">
          <span class="font-cinzel font-bold text-lg text-minang-goldShine block mb-2">QRIS Kado Digital</span>
          <img src="{{ $invitation->qris_image_url ?: $invitation->qris_image }}" alt="QRIS" class="max-w-[200px] mx-auto rounded-xl border border-minang-gold/50 shadow block">
          <p class="text-xs text-neutral-300 mt-3">a.n. {{ $invitation->groom_nickname ?? $invitation->groom_name ?? 'Mempelai' }} &amp; {{ $invitation->bride_nickname ?? $invitation->bride_name ?? 'Mempelai' }}</p>
        </div>
        @endif
      </div>
    </section>
    @endif
    @endif

    @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('wishes'))
<!-- SECTION: RSVP & BUKU UCAPAN -->
    <section id="section-wishes" class="py-14 px-6 bg-minang-black text-neutral-100 relative">
    <div id="rsvp"></div>
      <div class="text-center mb-10 reveal">
        <span class="font-cinzel text-[11px] tracking-[0.3em] uppercase text-minang-goldShine font-bold">Konfirmasi Hadia</span>
        <h2 class="font-serif text-3xl sm:text-4xl font-bold text-white mt-1">RSVP &amp; Buku Doa</h2>
        <div class="w-16 h-0.5 bg-gradient-to-r from-transparent via-minang-gold to-transparent mx-auto my-2.5"></div>
      </div>

      <!-- Form Box -->
      <div class="p-6 rounded-3xl bg-minang-maroon/70 border border-minang-gold/40 shadow-2xl mb-8 reveal">
        <form action="{{ route('invitation.wish', $invitation->slug ?? 'demo') }}" method="POST" class="space-y-4">
          @csrf
          <div>
            <label class="block font-cinzel text-[10px] font-bold text-minang-goldShine uppercase tracking-wider mb-1.5">Nama Lengkap Dunsanak</label>
            <input type="text" name="name" value="{{ $guestName ?? '' }}" required placeholder="Nama Anda" class="w-full px-4 py-3 rounded-xl border border-minang-gold/40 bg-black/60 text-white focus:border-minang-gold outline-none text-xs">
          </div>

          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block font-cinzel text-[10px] font-bold text-minang-goldShine uppercase tracking-wider mb-1.5">Konfirmasi</label>
              <select name="attendance" class="w-full px-3 py-3 rounded-xl border border-minang-gold/40 bg-black/60 text-white focus:border-minang-gold outline-none text-xs">
                <option value="hadir">Insya Allah Hadir</option>
                <option value="ragu">Masih Ragu</option>
                <option value="tidak_hadir">Ba'maaf Berhalangan</option>
              </select>
            </div>
            <div>
              <label class="block font-cinzel text-[10px] font-bold text-minang-goldShine uppercase tracking-wider mb-1.5">Jumlah Kehadiran</label>
              <input type="number" name="guest_count" min="1" max="5" value="1" class="w-full px-3 py-3 rounded-xl border border-minang-gold/40 bg-black/60 text-white focus:border-minang-gold outline-none text-xs">
            </div>
          </div>

          <div>
            <label class="block font-cinzel text-[10px] font-bold text-minang-goldShine uppercase tracking-wider mb-1.5">Untaian Doa &amp; Pasambahan</label>
            <textarea name="message" rows="3" required placeholder="Tuliskan kato doa restu untuak kaduo marapulai dan anak daro..." class="w-full px-4 py-3 rounded-xl border border-minang-gold/40 bg-black/60 text-white focus:border-minang-gold outline-none text-xs"></textarea>
          </div>

          <button type="submit" class="w-full py-3.5 rounded-xl bg-gradient-to-r from-minang-gold via-minang-goldShine to-minang-gold text-minang-velvet font-cinzel font-bold text-xs uppercase tracking-widest shadow-xl hover:brightness-110 transition duration-300">
            Kirimkan Doa &amp; Konfirmasi
          </button>
        </form>
      </div>

      <!-- Live Wishes List -->
      <div class="p-6 rounded-3xl bg-minang-maroon/50 border border-minang-gold/30 shadow-lg reveal">
        <div class="flex items-center justify-between mb-4 pb-2 border-b border-minang-gold/20">
          <h3 class="font-serif text-lg font-bold text-minang-goldShine flex items-center gap-2">
            <i class="fa-solid fa-comments text-minang-gold"></i>
            Doa Dunsanak ({{ count($wishes) }})
          </h3>
        </div>

        <div id="wishes-container" class="space-y-3.5 max-h-80 overflow-y-auto pr-1">
          @foreach($wishes as $w)
          <div class="p-3.5 rounded-2xl bg-black/40 border border-minang-gold/30 shadow-sm text-left">
            <div class="flex items-center justify-between mb-1">
              <h5 class="font-serif font-bold text-sm text-minang-goldShine">{{ $w->name }}</h5>
              <span class="text-[9px] font-cinzel px-2 py-0.5 rounded-full font-bold bg-green-900/60 text-green-300 border border-green-600/50">
                {{ ucfirst($w->attendance ?? 'hadir') }}
              </span>
            </div>
            <p class="text-xs text-neutral-200 leading-relaxed">{{ $w->message }}</p>
          </div>
          @endforeach
        </div>
      </div>
    </section>
@endif

    <!-- FOOTER -->
    <footer class="bg-minang-velvet text-neutral-200 py-16 px-6 text-center relative border-t border-minang-gold/30">
      <div class="w-14 h-14 mx-auto mb-4 rounded-full border border-minang-gold flex items-center justify-center text-minang-goldShine royal-glow">
        <i class="fa-solid fa-crown text-xl"></i>
      </div>

      <p class="font-serif italic text-base text-neutral-300 leading-relaxed mb-6">
        Tasabuik namo dalam adaik, tasirah janji dalam syarak. Gadang hati kami kok lai dunsanak kasadonyo tibo mamanuahi undangan baralek kami.
      </p>

      <span class="font-cinzel text-[10px] uppercase tracking-[0.25em] text-minang-goldShine">Turut Mengundang Kasadonyo</span>
      <h3 class="font-serif text-2xl font-bold text-white mt-1 mb-5">
        {{ $bride['parents'] ?? 'Keluarga Gadang Anak Daro' }} &amp; {{ $groom['parents'] ?? 'Keluarga Marapulai' }}
      </h3>

      <div class="w-20 h-px bg-gradient-to-r from-transparent via-minang-gold to-transparent mx-auto my-5"></div>

      <h2 class="font-script text-5xl text-minang-goldShine mb-2">{{ $groom['nickname'] ?? 'Fikri' }} &amp; {{ $bride['nickname'] ?? 'Sarah' }}</h2>
      <p class="text-[10px] text-neutral-400 font-cinzel uppercase tracking-widest">© {{ date('Y') }} Baralek Gadang Adat Minangkabau</p>
      <div style="margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.15); 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-white.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: rgba(255,255,255,0.75); text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">Digital Wedding Invitation by Janoer Koening</p>
      </div>
    </footer>

    <!-- BOTTOM SONGKET ACCENT -->
    <div class="songket-border-bottom opacity-90"></div>
  </div>

  <script>
    // Particle Canvas
    const canvas = document.getElementById('gold-particles-canvas');
    const ctx = canvas.getContext('2d');
    let width = canvas.width = window.innerWidth;
    let height = canvas.height = window.innerHeight;

    window.addEventListener('resize', () => {
      width = canvas.width = window.innerWidth;
      height = canvas.height = window.innerHeight;
    });

    const particles = [];
    const particleCount = 32;

    class GoldParticle {
      constructor() { this.reset(); }
      reset() {
        this.x = Math.random() * width;
        this.y = Math.random() * height;
        this.size = Math.random() * 3 + 1;
        this.speedY = Math.random() * 0.7 + 0.3;
        this.speedX = Math.random() * 0.8 - 0.4;
        this.opacity = Math.random() * 0.7 + 0.3;
        this.grow = Math.random() > 0.5;
      }
      update() {
        this.y -= this.speedY;
        this.x += this.speedX;
        if (this.grow) {
          this.opacity += 0.01;
          if (this.opacity >= 0.9) this.grow = false;
        } else {
          this.opacity -= 0.01;
          if (this.opacity <= 0.2) this.grow = true;
        }
        if (this.y < -10 || this.x < -10 || this.x > width + 10) {
          this.y = height + 10;
          this.x = Math.random() * width;
        }
      }
      draw() {
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(252, 231, 148, ${this.opacity})`;
        ctx.shadowBlur = 10;
        ctx.shadowColor = '#D4AF37';
        ctx.fill();
        ctx.restore();
      }
    }

    for (let i = 0; i < particleCount; i++) {
      particles.push(new GoldParticle());
    }

    function animateParticles() {
      ctx.clearRect(0, 0, width, height);
      particles.forEach(p => { p.update(); p.draw(); });
      requestAnimationFrame(animateParticles);
    }
    animateParticles();

    // Countdown
    const eventTimeStr = "{{ $eventDate }}T{{ $eventTime }}:00";
    const targetDate = new Date(eventTimeStr).getTime() || new Date("2026-10-24T08:30:00").getTime();
    const daysEl = document.getElementById('cd-days');
    const hoursEl = document.getElementById('cd-hours');
    const minsEl = document.getElementById('cd-minutes');
    const secsEl = document.getElementById('cd-seconds');

    setInterval(() => {
      const diff = targetDate - Date.now();
      if (diff <= 0) return;
      if (daysEl) daysEl.innerText = String(Math.floor(diff / 864e5)).padStart(2, '0');
      if (hoursEl) hoursEl.innerText = String(Math.floor(diff % 864e5 / 36e5)).padStart(2, '0');
      if (minsEl) minsEl.innerText = String(Math.floor(diff % 36e5 / 6e4)).padStart(2, '0');
      if (secsEl) secsEl.innerText = String(Math.floor(diff % 6e4 / 1e3)).padStart(2, '0');
    }, 1000);

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

    function toggleMusic() {
      if (!bgMusic) return;
      const icon = document.getElementById("audio-icon");
      if (isPlaying) {
        bgMusic.pause();
        isPlaying = false;
        if (icon) icon.classList.remove("fa-spin");
      } else {
        bgMusic.play().then(() => {
          isPlaying = true;
          if (icon) icon.classList.add("fa-spin");
        }).catch(() => {});
      }
    }

    function openInvitation() {
      const modal = document.getElementById("cover-modal");
      if (modal) {
        modal.style.opacity = "0";
        setTimeout(() => modal.style.display = "none", 800);
      }
      if (bgMusic) {
        bgMusic.play().then(() => {
          isPlaying = true;
          const icon = document.getElementById("audio-icon");
          if (icon) icon.classList.add("fa-spin");
        }).catch(() => {});
      }
    }

        function toggleGiftAccordion(btn) {
      const content = document.getElementById('gift-accordion-content');
      if (!content) return;
      const isHidden = content.classList.contains('hidden') || content.style.display === 'none';
      if (isHidden) {
        content.classList.remove('hidden');
        content.style.display = 'block';
        if (btn) {
          const label = btn.querySelector('.gift-btn-label');
          if (label) label.textContent = 'Tutup Rekening';
        }
      } else {
        content.classList.add('hidden');
        content.style.display = 'none';
        if (btn) {
          const label = btn.querySelector('.gift-btn-label');
          if (label) label.textContent = 'Kirim Hadiah / Buka Rekening';
        }
      }
    }
    function toggleGiftBox(btn) { toggleGiftAccordion(btn); }

    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.innerHTML;
        btn.innerHTML = '<i class="fa-solid fa-check"></i> <span>Tersalin! ✓</span>';
        setTimeout(() => { btn.innerHTML = orig; }, 2000);
      }).catch(() => {
        prompt('Salin nomor rekening:', text);
      });
    }

    function copyAccount(text, label) {
      navigator.clipboard.writeText(text).then(() => {
        alert(`${label} berhasil disalin: ${text}`);
      });
    }

    function openLightbox(src, caption) {
      const modal = document.getElementById('lightbox-modal');
      const img = document.getElementById('lightbox-img');
      const cap = document.getElementById('lightbox-caption');
      img.src = src;
      cap.innerText = caption;
      modal.classList.remove('hidden');
      modal.classList.add('flex');
    }

    function closeLightbox() {
      const modal = document.getElementById('lightbox-modal');
      modal.classList.add('hidden');
      modal.classList.remove('flex');
    }

    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('active');
        }
      });
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
  </script>
</body>
</html>