@php
    $bride = $invitation->bride ?? [
        'name' => 'Siti Nurbaya Azzahra, S.I.Kom',
        'nickname' => 'Siti',
        'parents' => 'Bapak H. Ahmad Dahlan & Ibu Hj. Aminah',
        'photo' => 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80',
        'instagram' => '@sitinurbaya',
    ];
    $groom = $invitation->groom ?? [
        'name' => 'M. Firman Pratama, S.T.',
        'nickname' => 'Firman',
        'parents' => 'Bapak H. Syamsudin & Ibu Hj. Halimah',
        'photo' => 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=600&q=80',
        'instagram' => '@firmanpratama',
    ];
    $coverPhoto = $invitation->cover_photo ?? 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=800&q=80';
    $events = $invitation->events ?? [
        [
            'title' => 'Akad Nikah',
            'date' => '2026-10-18',
            'start_time' => '08:00',
            'end_time' => '09:30',
            'timezone' => 'WIB',
            'venue' => 'Masjid Raya Al-Mashun Rawabelong',
            'address' => 'Jl. Rawabelong No. 12, Jakarta Barat',
            'maps_url' => 'https://maps.google.com',
        ],
        [
            'title' => 'Prosesi Palang Pintu & Buka Tabir',
            'date' => '2026-10-18',
            'start_time' => '10:00',
            'end_time' => '11:00',
            'timezone' => 'WIB',
            'venue' => 'Gedung Pusat Kebudayaan Betawi',
            'address' => 'Jl. Kebudayaan Betawi No. 8, Jakarta Pusat',
            'maps_url' => 'https://maps.google.com',
        ],
        [
            'title' => 'Resepsi Pernikahan',
            'date' => '2026-10-18',
            'start_time' => '11:30',
            'end_time' => '15:00',
            'timezone' => 'WIB',
            'venue' => 'Gedung Pusat Kebudayaan Betawi',
            'address' => 'Jl. Kebudayaan Betawi No. 8, Jakarta Pusat',
            'maps_url' => 'https://maps.google.com',
        ],
    ];
    $primaryEvent = $events[0] ?? null;
    $eventDate = $primaryEvent['date'] ?? '2026-10-18';
    $eventTime = $primaryEvent['start_time'] ?? '08:00';
    $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-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',
    ];

    $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' => 'Zaenab binti H. Sabeni',
            'name' => 'Zaenab binti H. Sabeni',
        ],
        [
            'bank_name' => 'Bank Mandiri',
            'bank' => 'Bank Mandiri',
            'account_number' => '9876543210',
            'number' => '9876543210',
            'account_holder' => 'Baihaki bin H. Rohim',
            'name' => 'Baihaki bin H. Rohim',
        ],
    ];
    $hasGifts = !empty($gifts) || !empty($invitation->qris_image_url) || !empty($invitation->qris_image);

    $stories = $invitation->stories ?? [
        [
            'year' => '2020',
            'title' => 'Pertama Jumpa',
            'story' => 'Ketemu waktu perhelatan festival seni budaya Betawi. Berawal dari sapaan hangat, berlanjut ke pertemanan akrab.',
        ],
        [
            'year' => '2022',
            'title' => 'Mulai Nyambung',
            'story' => 'Dari ngobrol santai seputar kuliner kerak telor sampe obrolan serius tentang cita-cita masa depan.',
        ],
        [
            'year' => '2025',
            'title' => 'Lamaran Bawa Roti Buaya',
            'story' => 'Abang Firman bersama keluarga datang membawa hantaran khas dan roti buaya sebagai tanda kesetiaan sejati.',
        ],
        [
            'year' => '2026',
            'title' => 'Hari Walimah',
            'story' => 'Insya Allah melangkah bersama di pelaminan adat Betawi, memohon berkah dan doa restu para tetua dan kerabat.',
        ],
    ];

    $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' => 'Kong Haji Udin & Keluarga',
            'attendance' => 'hadir',
            'message' => 'Alhamdulillah, selamat buat Firman dan Siti. Moga langgeng sampe kakek nenek, sakinah mawaddah warahmah!',
            'created_at' => now()->subHours(2),
        ],
        (object)[
            'name' => 'Keluarga Besar Rawabelong',
            'attendance' => 'hadir',
            'message' => 'Lancar-lancar sampai hari H ya Abang & None. Rukun terus selamanya!',
            '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>The Wedding of {{ $groom['nickname'] ?? 'Firman' }} &amp; {{ $bride['nickname'] ?? 'Siti' }} - Adat Tradisional Betawi</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;900&family=Playfair+Display:ital,wght@0,400;0,700;1,400&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: {
            maroon: {
              DEFAULT: '#731313',
              dark: '#4A0C0C',
              deep: '#360606',
              light: '#8F1D1D'
            },
            gold: {
              DEFAULT: '#D4AF37',
              light: '#F3E5AB',
              dark: '#997F24',
              accent: '#C59B27'
            },
            cream: {
              DEFAULT: '#FAF6EE',
              light: '#FDFBF7',
              dark: '#F0EAD6'
            }
          },
          fontFamily: {
            cinzel: ['"Cinzel"', 'serif'],
            playfair: ['"Playfair Display"', 'serif'],
            sans: ['"Plus Jakarta Sans"', 'sans-serif']
          }
        }
      }
    }
  </script>

  <style>
    /* Ornamen Gigi Balang Betawi via CSS Pattern */
    .gigi-balang-top {
      height: 18px;
      width: 100%;
      background-color: #D4AF37;
      --mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) 50% / 22px 100%;
      -webkit-mask: var(--mask);
      mask: var(--mask);
    }
    .gigi-balang-bottom {
      height: 18px;
      width: 100%;
      background-color: #D4AF37;
      --mask: conic-gradient(from 135deg at top,#0000,#000 1deg 90deg,#0000 91deg) 50% / 22px 100%;
      -webkit-mask: var(--mask);
      mask: var(--mask);
    }

    .text-gold-shadow {
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(212, 175, 55, 0.4);
    }
    .batik-bg-pattern {
      background-color: #FAF6EE;
      background-image: radial-gradient(#D4AF37 0.75px, transparent 0.75px), radial-gradient(#D4AF37 0.75px, #FAF6EE 0.75px);
      background-size: 30px 30px;
      background-position: 0 0, 15px 15px;
    }

    @keyframes spinDisc {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .animate-spin-slow {
      animation: spinDisc 6s linear infinite;
    }

    @keyframes floatGentle {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-6px); }
    }
    .animate-float {
      animation: floatGentle 3s ease-in-out infinite;
    }
  </style>
</head>
<body class="bg-cream text-neutral-800 font-sans antialiased overflow-x-hidden selection:bg-gold selection:text-maroon-deep">
  @include('templates.partials.preview-banner')

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

  <!-- Fullscreen Cover Modal -->
  <div id="welcome-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-maroon-deep text-cream transition-all duration-1000 ease-in-out">
    <div class="absolute inset-0 bg-cover bg-center opacity-30 mix-blend-overlay" style="background-image: url('{{ $coverPhoto }}');"></div>
    <div class="absolute inset-0 bg-gradient-to-t from-maroon-deep via-maroon-dark/90 to-maroon-deep"></div>

    <div class="absolute top-0 left-0 right-0 gigi-balang-bottom z-10 opacity-75"></div>
    <div class="absolute bottom-0 left-0 right-0 gigi-balang-top z-10 opacity-75"></div>

    <div class="relative z-20 max-w-lg w-11/12 p-8 text-center rounded-3xl border border-gold/40 bg-maroon/70 backdrop-blur-md shadow-2xl">
      <div class="w-20 h-20 mx-auto mb-4 rounded-full border-2 border-gold flex items-center justify-center p-2 bg-maroon-deep/80 shadow-lg animate-float">
        <svg viewBox="0 0 100 100" class="w-full h-full text-gold fill-current">
          <circle cx="50" cy="50" r="42" fill="none" stroke="#D4AF37" stroke-width="2" stroke-dasharray="4,2"/>
          <path d="M50 15 L58 35 L80 38 L63 52 L68 75 L50 63 L32 75 L37 52 L20 38 L42 35 Z" fill="#D4AF37" opacity="0.85"/>
          <circle cx="50" cy="50" r="12" fill="#FAF6EE"/>
          <circle cx="50" cy="50" r="6" fill="#731313"/>
        </svg>
      </div>

      <p class="font-cinzel tracking-[0.3em] text-gold uppercase text-xs mb-2">Walimatul 'Ursy • Adat Betawi</p>
      <h1 class="font-playfair text-3xl md:text-5xl font-bold text-cream mb-1 text-gold-shadow">{{ $groom['nickname'] ?? 'Firman' }} &amp; {{ $bride['nickname'] ?? 'Siti' }}</h1>
      <div class="w-24 h-0.5 bg-gradient-to-r from-transparent via-gold to-transparent mx-auto my-3"></div>
      
      <div class="my-5 p-4 rounded-xl bg-black/40 border border-gold/30">
        <p class="text-xs text-neutral-300 font-sans tracking-wide">Kepada Yth. Bapak/Ibu/Saudara/i:</p>
        <h3 id="guest-name-cover" class="text-xl md:text-2xl font-playfair font-bold text-gold mt-1 capitalize">{{ $guestName ?? 'Tamu Undangan' }}</h3>
      </div>

      <button id="btn-open-invitation" onclick="openInvitation()" class="group inline-flex items-center gap-3 px-8 py-3.5 rounded-full bg-gradient-to-r from-gold to-gold-accent text-maroon-deep font-semibold shadow-lg hover:shadow-gold/40 transform hover:-translate-y-0.5 active:translate-y-0 transition duration-300">
        <i class="fa-solid fa-envelope-open-text text-lg group-hover:scale-110 transition duration-300"></i>
        <span class="tracking-wider uppercase text-sm font-cinzel">Buka Undangan</span>
      </button>
    </div>
  </div>

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

  <!-- Bottom Floating Navigation Bar -->
  <nav class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-40 bg-maroon-deep/90 backdrop-blur-md border border-gold/40 px-4 py-2.5 rounded-full shadow-2xl flex items-center gap-4 text-gold">
    <a href="#hero" class="p-2 hover:text-white transition" title="Home"><i class="fa-solid fa-heart"></i></a>
    <a href="#mempelai" class="p-2 hover:text-white transition" title="Mempelai"><i class="fa-solid fa-user-group"></i></a>
    <a href="#jadwal" class="p-2 hover:text-white transition" title="Jadwal Acara"><i class="fa-solid fa-calendar-days"></i></a>
    <a href="#kisah" class="p-2 hover:text-white transition" title="Kisah Cinta"><i class="fa-solid fa-book-open"></i></a>
    <a href="#galeri" class="p-2 hover:text-white transition" title="Galeri Foto"><i class="fa-solid fa-images"></i></a>
    <a href="#gift" class="p-2 hover:text-white transition" title="Tanda Kasih"><i class="fa-solid fa-gift"></i></a>
    <a href="#rsvp" class="p-2 hover:text-white transition" title="RSVP & Doa"><i class="fa-solid fa-comment-dots"></i></a>
  </nav>

  <!-- HERO BANNER -->
  <section id="hero" class="relative min-h-screen flex flex-col justify-center items-center text-center p-6 bg-maroon-dark text-cream overflow-hidden">
    <div class="absolute inset-0 bg-cover bg-center opacity-25" style="background-image: url('{{ $coverPhoto }}');"></div>
    <div class="absolute inset-0 bg-gradient-to-b from-maroon-deep via-transparent to-maroon-deep"></div>
    <div class="absolute top-0 left-0 right-0 gigi-balang-bottom z-10"></div>
    
    <div class="relative z-10 max-w-2xl mx-auto py-16">
      <div class="inline-block px-4 py-1.5 rounded-full bg-gold/20 border border-gold/40 text-gold text-xs font-semibold tracking-widest uppercase mb-4">
        Undangan Pernikahan Adat Betawi
      </div>
      
      <p class="font-playfair italic text-lg md:text-xl text-gold-light mb-2">Bismillahirrohmanirrohim</p>
      <h1 class="font-playfair text-4xl sm:text-6xl md:text-7xl font-bold tracking-tight text-white mb-2 text-gold-shadow">
        {{ $groom['nickname'] ?? 'Firman' }} <span class="text-gold">&amp;</span> {{ $bride['nickname'] ?? 'Siti' }}
      </h1>
      <p class="font-cinzel tracking-[0.25em] text-xs sm:text-sm text-gold uppercase mt-2">
        {{ $formattedDate }}
      </p>

      <div class="flex items-center justify-center gap-3 my-6">
        <div class="w-12 h-px bg-gold/60"></div>
        <i class="fa-solid fa-ring text-gold text-sm"></i>
        <div class="w-12 h-px bg-gold/60"></div>
      </div>

      <div class="relative mx-auto w-48 h-48 sm:w-56 sm:h-56 rounded-full p-2 border-2 border-gold/70 bg-gradient-to-tr from-gold to-maroon shadow-2xl mb-8">
        <img src="{{ $coverPhoto }}" 
             alt="{{ $groom['nickname'] }} & {{ $bride['nickname'] }}" 
             class="w-full h-full object-cover rounded-full filter contrast-105">
      </div>

      @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown'))
<!-- COUNTDOWN TIMER -->
      <div class="bg-black/40 backdrop-blur-md border border-gold/30 rounded-2xl p-5 max-w-md mx-auto shadow-xl">
        <p class="text-xs uppercase tracking-widest text-neutral-300 font-cinzel mb-4">Menghitung Hari Menuju Akad &amp; Resepsi</p>
        <div class="grid grid-cols-4 gap-2 text-center" id="countdown-grid">
          <div class="bg-maroon-deep/80 border border-gold/30 p-2.5 rounded-xl">
            <span id="days" class="text-2xl sm:text-3xl font-bold text-gold font-cinzel">00</span>
            <span class="block text-[10px] uppercase tracking-wider text-neutral-300 mt-1">Hari</span>
          </div>
          <div class="bg-maroon-deep/80 border border-gold/30 p-2.5 rounded-xl">
            <span id="hours" class="text-2xl sm:text-3xl font-bold text-gold font-cinzel">00</span>
            <span class="block text-[10px] uppercase tracking-wider text-neutral-300 mt-1">Jam</span>
          </div>
          <div class="bg-maroon-deep/80 border border-gold/30 p-2.5 rounded-xl">
            <span id="minutes" class="text-2xl sm:text-3xl font-bold text-gold font-cinzel">00</span>
            <span class="block text-[10px] uppercase tracking-wider text-neutral-300 mt-1">Menit</span>
          </div>
          <div class="bg-maroon-deep/80 border border-gold/30 p-2.5 rounded-xl">
            <span id="seconds" class="text-2xl sm:text-3xl font-bold text-gold font-cinzel">00</span>
            <span class="block text-[10px] uppercase tracking-wider text-neutral-300 mt-1">Detik</span>
          </div>
        </div>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 gigi-balang-top z-10"></div>
  </section>

  <!-- SECTION 2: QUOTES & PANTUN BETAWI -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('quote'))
  <section id="section-countdown" class="py-20 px-6 bg-cream relative text-center">
    <div id="section-quote"></div>
    <div class="max-w-2xl mx-auto border-2 border-gold/40 rounded-3xl p-8 bg-white/70 backdrop-blur-sm shadow-xl relative">
      <div class="w-12 h-1 bg-gold mx-auto mb-6 rounded-full"></div>
      <p class="font-serif italic text-base sm:text-lg text-neutral-800 leading-relaxed mb-4">
        “{!! nl2br(e($quoteText)) !!}”
      </p>
      <div class="mt-4">
        <span class="text-sm font-semibold tracking-wider text-gold-dark uppercase font-cinzel">— {{ $quoteSource }} —</span>
      </div>
    </div>
  </section>
  @endif
@endif

  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('couple'))
<!-- SECTION 3: INFORMASI MEMPELAI (ABANG & NONE) -->
  <section id="section-couple" class="py-20 px-6 bg-white relative">
    <div id="mempelai"></div>
    <div class="max-w-5xl mx-auto text-center">
      <div class="mb-14">
        <span class="text-xs uppercase tracking-[0.25em] text-gold-dark font-cinzel font-bold">Pengantin Adat Betawi</span>
        <h2 class="font-playfair text-3xl sm:text-4xl font-bold text-maroon mt-1">Kedua Mempelai</h2>
        <div class="w-16 h-1 bg-gold mx-auto my-3 rounded-full"></div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-stretch">
        <!-- Mempelai Pria (Abang) -->
        <div class="bg-cream/50 rounded-3xl p-8 border border-gold/40 shadow-md hover:shadow-xl transition-all duration-300 flex flex-col items-center">
          <div class="relative w-44 h-44 rounded-full p-2 border-2 border-gold mb-6 bg-maroon-deep shadow-md">
            <img src="{{ $groom['photo'] ?? 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=600&q=80' }}" 
                 alt="{{ $groom['name'] }}" 
                 class="w-full h-full object-cover rounded-full filter contrast-105">
            <div class="absolute -bottom-2 bg-gold text-maroon-deep px-4 py-0.5 rounded-full text-xs font-bold uppercase tracking-wider shadow">
              Abang
            </div>
          </div>
          
          <h3 class="font-playfair text-2xl font-bold text-maroon mb-1">{{ $groom['name'] }}</h3>
          <p class="text-xs text-gold-dark font-cinzel uppercase tracking-wider font-semibold mb-4">Pengantin Pria</p>
          <p class="text-sm text-neutral-600 mb-6 flex-grow">
            Putra tercinta dari pasangan:<br>
            <strong class="text-neutral-800">{{ $groom['parents'] ?? 'Bapak H. Syamsudin & Ibu Hj. Halimah' }}</strong>
          </p>

          @if(!empty($groom['instagram']))
          <span class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-maroon/10 text-maroon text-xs font-semibold">
            <i class="fa-brands fa-instagram text-sm"></i> {{ $groom['instagram'] }}
          </span>
          @endif
        </div>

        <!-- Mempelai Wanita (None) -->
        <div class="bg-cream/50 rounded-3xl p-8 border border-gold/40 shadow-md hover:shadow-xl transition-all duration-300 flex flex-col items-center">
          <div class="relative w-44 h-44 rounded-full p-2 border-2 border-gold mb-6 bg-maroon-deep shadow-md">
            <img src="{{ $bride['photo'] ?? 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80' }}" 
                 alt="{{ $bride['name'] }}" 
                 class="w-full h-full object-cover rounded-full filter contrast-105">
            <div class="absolute -bottom-2 bg-gold text-maroon-deep px-4 py-0.5 rounded-full text-xs font-bold uppercase tracking-wider shadow">
              None
            </div>
          </div>
          
          <h3 class="font-playfair text-2xl font-bold text-maroon mb-1">{{ $bride['name'] }}</h3>
          <p class="text-xs text-gold-dark font-cinzel uppercase tracking-wider font-semibold mb-4">Pengantin Wanita</p>
          <p class="text-sm text-neutral-600 mb-6 flex-grow">
            Putri tercinta dari pasangan:<br>
            <strong class="text-neutral-800">{{ $bride['parents'] ?? 'Bapak H. Ahmad Dahlan & Ibu Hj. Aminah' }}</strong>
          </p>

          @if(!empty($bride['instagram']))
          <span class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-maroon/10 text-maroon text-xs font-semibold">
            <i class="fa-brands fa-instagram text-sm"></i> {{ $bride['instagram'] }}
          </span>
          @endif
        </div>
      </div>
    </div>
  </section>
@endif

  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('event'))
<!-- SECTION 4: JADWAL ACARA -->
  <section id="section-event" class="py-20 px-6 bg-maroon-deep text-cream relative">
    <div id="jadwal"></div>
    <div class="absolute top-0 left-0 right-0 gigi-balang-bottom z-10"></div>
    <div class="max-w-5xl mx-auto">
      <div class="text-center mb-14">
        <span class="text-xs uppercase tracking-[0.25em] text-gold font-cinzel font-bold">Rangkaian Acara</span>
        <h2 class="font-playfair text-3xl sm:text-4xl font-bold text-white mt-1">Waktu &amp; Lokasi Acara</h2>
        <div class="w-16 h-1 bg-gold mx-auto my-3 rounded-full"></div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        @foreach($events as $event)
        <div class="bg-maroon-dark/90 rounded-2xl p-6 border border-gold/40 text-center flex flex-col justify-between shadow-xl">
          <div>
            <div class="w-12 h-12 mx-auto rounded-full bg-gold/20 text-gold flex items-center justify-center text-xl mb-4 border border-gold">
              <i class="fa-solid fa-calendar-check"></i>
            </div>
            <h3 class="font-playfair text-xl font-bold text-gold mb-1">{{ $event['title'] }}</h3>
            <p class="text-xs text-neutral-300 mb-4 font-mono">{{ \Carbon\Carbon::parse($event['date'])->locale('id')->isoFormat('dddd, D MMMM Y') }}</p>
            <div class="text-2xl font-bold font-cinzel text-white mb-2">{{ $event['start_time'] ?? '08:00' }} - {{ $event['end_time'] ?? 'Selesai' }} {{ $event['timezone'] ?? 'WIB' }}</div>
            <p class="text-xs text-neutral-300 mb-4"><strong>{{ $event['venue'] }}</strong><br>{{ $event['address'] }}</p>
          </div>
          @if(!empty($event['maps_url']))
          <div class="pt-3 border-t border-gold/20">
            <a href="{{ $event['maps_url'] }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-gold text-maroon-deep text-xs font-bold uppercase tracking-wider hover:bg-gold-light transition shadow">
              <i class="fa-solid fa-location-dot"></i> Peta Lokasi
            </a>
          </div>
          @endif
        </div>
        @endforeach
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 gigi-balang-top z-10"></div>
  </section>
@endif

  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('story'))
<!-- SECTION 5: KISAH CINTA -->
  @if(!empty($stories) && count($stories) > 0)
  <section id="section-story" class="py-20 px-6 bg-white relative">
    <div id="kisah"></div>
    <div class="max-w-4xl mx-auto">
      <div class="text-center mb-14">
        <span class="text-xs uppercase tracking-[0.25em] text-gold-dark font-cinzel font-bold">Kisah Kami</span>
        <h2 class="font-playfair text-3xl sm:text-4xl font-bold text-maroon mt-1">Perjalanan Cinta</h2>
        <div class="w-16 h-1 bg-gold mx-auto my-3 rounded-full"></div>
      </div>

      <div class="space-y-8">
        @foreach($stories as $st)
        <div class="p-6 rounded-2xl bg-cream border border-gold/40 shadow-md">
          <span class="inline-block px-3 py-1 bg-gold/20 text-gold-dark font-cinzel font-bold text-xs rounded-full mb-2">{{ $st['year'] ?? '' }}</span>
          <h3 class="font-playfair text-xl font-bold text-maroon mb-2">{{ $st['title'] ?? '' }}</h3>
          <p class="text-sm text-neutral-600 leading-relaxed">{{ $st['story'] ?? ($st['description'] ?? '') }}</p>
        </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif
@endif

  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gallery'))
<!-- SECTION 6: GALERI FOTO -->
  @if(!empty($galleries) && count($galleries) > 0)
  <section id="section-gallery" class="py-20 px-6 batik-bg-pattern relative">
    <div id="galeri"></div>
    <div class="max-w-5xl mx-auto">
      <div class="text-center mb-14">
        <span class="text-xs uppercase tracking-[0.25em] text-gold-dark font-cinzel font-bold">Momen Bahagia</span>
        <h2 class="font-playfair text-3xl sm:text-4xl font-bold text-maroon mt-1">Galeri Foto</h2>
        <div class="w-16 h-1 bg-gold mx-auto my-3 rounded-full"></div>
      </div>

      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        @foreach($galleries as $index => $img)
        <div class="overflow-hidden rounded-2xl border-2 border-gold/40 shadow-md group">
          <img src="{{ $img }}" alt="Galeri {{ $index + 1 }}" class="w-full h-48 object-cover group-hover:scale-105 transition duration-500">
        </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif
@endif

  <!-- SECTION 7: TANDA KASIH -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gift'))
  @if($hasGifts)
  <section id="section-gift" class="py-20 px-6 bg-white relative text-center">
    <div class="max-w-3xl mx-auto">
      <div class="mb-6">
        <span class="text-xs uppercase tracking-[0.25em] text-gold-dark font-cinzel font-bold">Kado Digital</span>
        <h2 class="font-playfair text-3xl sm:text-4xl font-bold text-maroon mt-1">Tanda Kasih</h2>
        <div class="w-16 h-1 bg-gold mx-auto my-3 rounded-full"></div>
        <p class="text-sm text-neutral-600 max-w-md mx-auto">
          Doa restu Anda merupakan karunia terindah bagi kami. Namun jika hendak memberikan tanda kasih, silakan klik tombol di bawah ini:
        </p>
      </div>

      <div class="mb-8">
        <button type="button" onclick="toggleGiftAccordion(this)" class="px-6 py-2.5 rounded-full bg-gold text-maroon-deep font-cinzel text-xs font-bold uppercase tracking-wider hover:bg-gold-accent 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="grid grid-cols-1 md:grid-cols-2 gap-6">
          @foreach($gifts as $i => $gift)
          <div class="bg-cream p-6 rounded-2xl border border-gold/40 shadow-md">
            <h4 class="font-cinzel text-lg font-bold text-maroon mb-1">{{ $gift['bank_name'] ?? $gift['bank'] ?? 'Bank' }}</h4>
            <p class="text-2xl font-mono font-bold text-gold-dark my-2" id="rek_{{ $loop->index }}">{{ $gift['account_number'] ?? $gift['number'] ?? '-' }}</p>
            <p class="text-xs text-neutral-600 mb-4">a.n. {{ $gift['account_holder'] ?? $gift['name'] ?? '-' }}</p>
            <button type="button" onclick="copyGiftNumber('rek_{{ $loop->index }}', this)" class="px-4 py-1.5 rounded-full bg-gold text-maroon-deep font-cinzel text-xs font-bold uppercase tracking-wider hover:bg-gold-accent transition shadow inline-flex items-center gap-1.5">
              <i class="fa-regular fa-copy"></i> <span>Salin Rekening</span>
            </button>
          </div>
          @endforeach
        </div>

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

  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('wishes'))
<!-- SECTION 8: RSVP & DOA -->
  <section id="section-wishes" class="py-20 px-6 bg-maroon-deep text-cream relative">
    <div id="rsvp"></div>
    <div class="max-w-3xl mx-auto">
      <div class="text-center mb-12">
        <span class="text-xs uppercase tracking-[0.25em] text-gold font-cinzel font-bold">Buku Tamu</span>
        <h2 class="font-playfair text-3xl sm:text-4xl font-bold text-white mt-1">Konfirmasi &amp; Doa Restu</h2>
        <div class="w-16 h-1 bg-gold mx-auto my-3 rounded-full"></div>
      </div>

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

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

          <div>
            <label class="block text-xs font-cinzel font-bold text-gold uppercase tracking-wider mb-1">Ucapan &amp; Doa Restu</label>
            <textarea name="message" rows="4" required placeholder="Tuliskan ucapan dan doa terbaik Anda..." class="w-full px-4 py-3 rounded-xl bg-black/40 border border-gold/40 text-white focus:border-gold outline-none text-sm"></textarea>
          </div>

          <button type="submit" class="w-full py-3.5 rounded-xl bg-gradient-to-r from-gold to-gold-accent text-maroon-deep font-cinzel font-bold text-xs uppercase tracking-widest shadow-xl hover:brightness-110 transition">
            Kirim Ucapan &amp; Doa Restu
          </button>
        </form>
      </div>

      <!-- Live Wishes List -->
      <div class="space-y-4">
        <h4 class="text-center font-playfair text-xl text-gold">Doa &amp; Ucapan Kerabat</h4>
        <div class="max-h-80 overflow-y-auto space-y-3 pr-2">
          @foreach($wishes as $w)
          <div class="p-4 rounded-xl bg-black/40 border border-gold/30">
            <div class="flex items-center justify-between mb-1">
              <strong class="font-playfair text-gold text-base">{{ $w->name }}</strong>
              <span class="text-[10px] font-cinzel px-2 py-0.5 rounded-full bg-gold/20 text-gold border border-gold/30">
                {{ ucfirst($w->attendance ?? 'hadir') }}
              </span>
            </div>
            <p class="text-xs text-neutral-300">{{ $w->message }}</p>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </section>
@endif

  <!-- FOOTER -->
  <footer class="bg-maroon-deep text-neutral-300 py-16 px-6 text-center relative border-t border-gold/40">
    <div class="max-w-xl mx-auto">
      <p class="font-serif italic text-base leading-relaxed mb-6">
        Merupakan suatu kehormatan dan kebahagiaan bagi kami apabila Bapak/Ibu/Saudara/i berkenan hadir serta memberikan doa restu kepada kedua mempelai.
      </p>
      <h2 class="font-playfair text-4xl text-gold mb-2">{{ $groom['nickname'] ?? 'Firman' }} &amp; {{ $bride['nickname'] ?? 'Siti' }}</h2>
      <p class="text-xs font-cinzel tracking-widest uppercase text-neutral-400">Keluarga Besar Pengantin Adat Betawi</p>
    </div>
      <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>

  <script>
    // Countdown
    const eventTimeStr = "{{ $eventDate }}T{{ $eventTime }}:00";
    const targetDate = new Date(eventTimeStr).getTime() || new Date("2026-10-18T08:00:00").getTime();
    const daysEl = document.getElementById('days');
    const hoursEl = document.getElementById('hours');
    const minsEl = document.getElementById('minutes');
    const secsEl = document.getElementById('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("wedding-bgm");

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

    function openInvitation() {
      const modal = document.getElementById("welcome-modal");
      if (modal) {
        modal.style.opacity = "0";
        setTimeout(() => modal.style.display = "none", 800);
      }
      if (bgMusic) {
        bgMusic.play().then(() => {
          isPlaying = true;
          const icon = document.getElementById("music-icon");
          if (icon) icon.classList.add("animate-spin-slow");
        }).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 copyText(text) {
      navigator.clipboard.writeText(text).then(() => {
        alert("Nomor rekening berhasil disalin: " + text);
      });
    }
  </script>
</body>
</html>