@php
    $bride = $invitation->bride ?? [
        'name' => 'Siti Rahmah Aulia, S.Pd',
        'nickname' => 'Rahmah',
        'parents' => 'Bapak H. Abdul Gani & Ibu Hj. Norjanah',
        'photo' => 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80',
        'instagram' => '@rahmahaulia',
    ];
    $groom = $invitation->groom ?? [
        'name' => 'Muhammad Fajar Ramadhan, S.T',
        'nickname' => 'Fajar',
        'parents' => 'Bapak H. Syahrani & Ibu Hj. Noor Aini',
        'photo' => 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=600&q=80',
        'instagram' => '@fajarramadhan',
    ];
    $coverPhoto = $invitation->cover_photo ?? 'https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=800&q=80';
    $events = $invitation->events ?? [
        [
            'title' => 'Akad Nikah',
            'date' => '2026-12-20',
            'start_time' => '08:00',
            'end_time' => '10:00',
            'timezone' => 'WITA',
            'venue' => 'Masjid Al-Falah',
            'address' => 'Jl. Sungai Miai No. 12, Banjarmasin',
            'maps_url' => 'https://maps.google.com',
        ],
        [
            'title' => 'Resepsi Basanding',
            'date' => '2026-12-20',
            'start_time' => '11:00',
            'end_time' => '14:00',
            'timezone' => 'WITA',
            'venue' => 'Balairung Mahligai Banjar',
            'address' => 'Jl. Veteran No. 5, Banjarmasin',
            'maps_url' => 'https://maps.google.com',
        ],
    ];
    $primaryEvent = $events[0] ?? null;
    $eventDate = $primaryEvent['date'] ?? '2026-12-20';
    $eventTime = $primaryEvent['start_time'] ?? '08:00';
    $carbonDate = \Carbon\Carbon::parse($eventDate);
    $formattedDate = $carbonDate->locale('id')->isoFormat('dddd, D MMMM Y');

    $galleries = $invitation->gallery ?? [
        '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',
        'https://images.unsplash.com/photo-1520854221256-17451cc331bf?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' => 'Siti Rahmah Aulia',
            'name' => 'Siti Rahmah Aulia',
        ],
        [
            'bank_name' => 'Bank Kalsel',
            'bank' => 'Bank Kalsel',
            'account_number' => '9876543210',
            'number' => '9876543210',
            'account_holder' => 'Muhammad Fajar Ramadhan',
            'name' => 'Muhammad Fajar Ramadhan',
        ],
    ];
    $hasGifts = !empty($gifts) || !empty($invitation->qris_image_url) || !empty($invitation->qris_image);

    $stories = $invitation->stories ?? [
        [
            'year' => '2019',
            'title' => 'Pertama Bertemu',
            'story' => 'Kami bertemu di sebuah acara kampus. Awalnya hanya saling sapa, tanpa tahu cerita ini baru dimulai.',
        ],
        [
            'year' => '2021',
            'title' => 'Mulai Dekat',
            'story' => 'Obrolan demi obrolan membuat kami saling mengerti, dan perlahan tumbuh rasa nyaman.',
        ],
        [
            'year' => '2025',
            'title' => 'Badatang (Melamar)',
            'story' => 'Keluarga besar datang secara adat untuk menyampaikan niat baik, dan kedua keluarga saling merestui.',
        ],
        [
            'year' => '2026',
            'title' => 'Hari Bahagia',
            'story' => 'Dengan niat tulus dan doa orang tua, kami melangkah ke jenjang pernikahan dan memohon doa restu Anda.',
        ],
    ];

    $defaultQuoteText = 'Dan di antara tanda-tanda kekuasaan-Nya ialah Dia menciptakan untukmu pasangan-pasangan dari jenismu sendiri, supaya kamu merasa tenteram kepadanya, dan dijadikan-Nya di antaramu rasa kasih dan sayang.';
    $defaultQuoteSource = 'QS. Ar-Rum : 21';
    $quoteText = !empty($invitation->quote) ? $invitation->quote : $defaultQuoteText;
    $quoteSource = !empty($invitation->quote_author) ? $invitation->quote_author : $defaultQuoteSource;

    $wishes = $invitation->wishes ?? [
        (object)[
            'name' => 'Keluarga Besar Amang Syahrani',
            'attendance' => 'hadir',
            'message' => 'Selamat basanding Rahmah wan Fajar. Mugi barakah banar, rukun damai dunia akhirat.',
            'created_at' => now()->subHours(2),
        ],
        (object)[
            'name' => 'Acil Noor & Keluarga',
            'attendance' => 'hadir',
            'message' => 'Barakallah! Selamat menempuh hidup baru gasan pangantin badua.',
            '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 Pernikahan Adat Banjar | {{ $bride['nickname'] ?? 'Rahmah' }} &amp; {{ $groom['nickname'] ?? 'Fajar' }}</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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Marcellus&family=Marcellus+SC&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
  
  <style>
/* ============ VARIABEL WARNA (kuning emas, merah, krem) ============ */
:root {
  --red: #8a1a20;
  --red-deep: #4a0b10;
  --red-dark: #2e070a;
  --gold: #e3a712;
  --gold-light: #f8dc7c;
  --gold-dark: #a8730a;
  --yellow: #f3b81a;
  --yellow-deep: #dd9a0c;
  --green: #1e7a46;
  --cream: #fbf3dd;
  --cream2: #f3e6c3;
  --ink: #3d2a1c;
  --muted: #7a6650;

  --font-title: "Marcellus SC", serif;
  --font-names: "Playfair Display", serif;
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "Marcellus", serif;

  --gold-grad: linear-gradient(135deg, var(--gold-dark), var(--gold-light) 40%, var(--gold) 60%, var(--gold-dark));
  --cut: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);

  --gable: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%);
  --gable-box: polygon(50% 0, 100% 20%, 100% 100%, 0 100%, 0 20%);
  --gable-card: polygon(50% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);

  --sasi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26'%3E%3Cg fill='none' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 6 Q10 0 20 6 T40 6' stroke='%23c62828'/%3E%3Cpath d='M0 13 Q10 7 20 13 T40 13' stroke='%23f2b705'/%3E%3Cpath d='M0 20 Q10 14 20 20 T40 20' stroke='%231e7a46'/%3E%3C/g%3E%3C/svg%3E");
  --wave-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24'%3E%3Cpath d='M0 12 Q15 0 30 12 T60 12' fill='none' stroke='%23e3a712' stroke-width='1.2' opacity='.3'/%3E%3C/svg%3E");
  --wave-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24'%3E%3Cpath d='M0 12 Q15 0 30 12 T60 12' fill='none' stroke='%238a1a20' stroke-width='1' opacity='.12'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.85;
  overflow-x: hidden;
}

.section { padding: 100px 20px; position: relative; overflow: hidden; }
.cream  { background: var(--wave-soft), var(--cream); }
.cream2 { background: var(--wave-soft), var(--cream2); }
.gold-sec { background: var(--wave-soft), linear-gradient(180deg, var(--yellow), var(--yellow-deep)); color: var(--red-dark); }
.center { text-align: center; }
.container { max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; }
.narrow { max-width: 640px; }

.kicker { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .4em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.5vw, 2.7rem);
  color: var(--red);
  text-align: center;
  letter-spacing: .06em;
  margin-bottom: 50px;
}
.gold-sec .title { color: var(--red-deep); }
.gold-sec .kicker { color: var(--red-deep); }

.btn {
  display: inline-block;
  padding: 13px 36px;
  background: var(--red);
  color: var(--gold-light);
  border: 0;
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  clip-path: var(--cut);
  transition: .3s;
}
.btn:hover { filter: brightness(1.2); transform: translateY(-2px); }
.hero .btn { background: var(--gold-grad); color: var(--red-dark); }
.btn.small { padding: 8px 22px; font-size: .66rem; margin-top: 12px; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s ease, transform 1.1s ease; }
.reveal.show { opacity: 1; transform: none; }

.mini { width: 90px; margin: 0 auto 16px; display: block; overflow: visible; filter: drop-shadow(0 3px 5px rgba(90,40,10,.35)); }

.divider { display: flex; align-items: center; justify-content: center; margin: 18px auto; width: 220px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--gold); opacity: .8; }
.divider span { width: 9px; height: 9px; margin: 0 12px; background: var(--gold); transform: rotate(45deg); }
.divider.dark::before, .divider.dark::after { background: var(--red); }
.divider.dark span { background: var(--red); }

.sasi {
  position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 4;
  background: var(--sasi) repeat-x center / 40px 26px, #fff6d8;
  border-bottom: 3px solid var(--gold);
}
.sasi.bottom { top: auto; bottom: 0; border-bottom: 0; border-top: 3px solid var(--gold); }

.house { position: absolute; bottom: 36px; width: clamp(110px, 20vw, 210px); opacity: .4; pointer-events: none; overflow: visible; }
.house.hl { left: 3%; }
.house.hr { right: 3%; }

.gable { background: var(--gold-grad); clip-path: var(--gable); padding: 5px; }
.gable-in {
  position: relative; width: 100%; height: 100%;
  clip-path: var(--gable);
  background: linear-gradient(160deg, var(--red), var(--red-dark));
  display: grid; place-items: center; padding-top: 20%;
  color: var(--gold-light); font-family: var(--font-sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  overflow: hidden;
}
.gable-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* COVER OVERLAY */
#coverOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px 90px;
  color: #f4e6c4;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(190,50,50,.65), transparent 62%),
    var(--wave-gold),
    linear-gradient(180deg, #6c1319, var(--red-dark));
  transition: opacity .8s ease, visibility .8s ease;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: grid; place-items: center;
  text-align: center;
  padding: 100px 20px 110px;
  color: #f4e6c4;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(190,50,50,.5), transparent 62%),
    var(--wave-gold),
    linear-gradient(180deg, #6c1319, var(--red-dark));
}
.hero-inner { position: relative; z-index: 3; width: 100%; max-width: 540px; margin: 0 auto; }
.salam { font-family: var(--font-names); font-style: italic; font-weight: 700; font-size: 1.4rem; color: var(--gold-light); }
.salam-dark { font-family: var(--font-serif); font-style: italic; font-size: 1.35rem; color: var(--red); margin-bottom: 20px; }
.eyebrow { font-family: var(--font-sans); letter-spacing: .45em; text-transform: uppercase; font-size: .78rem; margin: 4px 0 56px; }

.cover-wrap { position: relative; width: min(250px, 62vw); margin: 0 auto 34px; }
.finial { position: absolute; left: 50%; top: -46px; width: 34px; transform: translateX(-50%); overflow: visible; }
.cover-photo { width: 100%; aspect-ratio: 4 / 5; filter: drop-shadow(0 14px 20px rgba(0,0,0,.5)); }

.names { font-family: var(--font-names); font-weight: 700; font-size: clamp(3rem, 11vw, 5.2rem); line-height: 1.15; color: var(--gold-light); }
.names i { font-style: normal; font-size: .65em; padding: 0 .1em; color: var(--gold); }
.names.small { font-size: clamp(2.4rem, 8vw, 3.8rem); }
.date { font-family: var(--font-sans); font-size: 1.05rem; letter-spacing: .25em; text-transform: uppercase; margin: 4px 0 16px; color: var(--gold-light); }
.guest { font-size: 1rem; color: #e4d0b0; margin-bottom: 26px; }
.guest b { font-family: var(--font-title); font-size: 1.15rem; color: #fff; letter-spacing: .04em; }

.countdown { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.countdown div {
  width: 100px; height: 110px;
  background: var(--red-deep);
  border: 2px solid var(--gold-light);
  border-radius: 6px;
  display: grid; place-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.countdown b { display: block; font-family: var(--font-names); font-weight: 700; font-size: 2.4rem; color: var(--gold-light); line-height: 1.1; }
.countdown span { font-family: var(--font-sans); font-size: .66rem; letter-spacing: .25em; text-transform: uppercase; color: #fff; }

.quote { font-size: 1.3rem; font-style: italic; line-height: 1.95; }
.source { margin-top: 14px; font-family: var(--font-sans); letter-spacing: .2em; font-size: .85rem; color: var(--red); }
.pepatah { font-family: var(--font-names); font-style: italic; font-weight: 700; font-size: 1.8rem; color: var(--red); }
.arti { font-size: .92rem; color: var(--muted); font-style: italic; }

.couple { display: flex; align-items: flex-start; justify-content: center; gap: 30px; flex-wrap: wrap; text-align: center; }
.person { flex: 1 1 270px; max-width: 330px; }
.photo { width: 210px; aspect-ratio: 4 / 5; margin: 0 auto 24px; filter: drop-shadow(0 12px 18px rgba(90,20,20,.35)); }
.person h3 { font-family: var(--font-names); font-weight: 700; font-size: 1.7rem; color: var(--red); line-height: 1.3; }
.role { font-family: var(--font-sans); letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; color: var(--gold-dark); margin: 4px 0 10px; }
.person p { color: var(--muted); }
.and { font-family: var(--font-names); font-style: italic; font-weight: 700; font-size: 3.6rem; color: var(--gold-dark); align-self: center; line-height: 1; }

.events { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.card {
  position: relative; isolation: isolate;
  padding: 60px 30px 44px;
  background: var(--red);
  clip-path: var(--cut);
  color: #fff;
  text-align: center;
}
.card::before { content: ""; position: absolute; inset: 3px; background: var(--red-deep); clip-path: var(--cut); z-index: -1; }
.card-house { position: absolute; top: 16px; left: 50%; width: 64px; transform: translateX(-50%); opacity: .45; }
.card h3 { font-family: var(--font-title); font-size: 1.8rem; color: var(--gold-light); margin-bottom: 8px; line-height: 1.2; }
.card .when { font-weight: 600; font-size: 1.2rem; }
.card .time { font-family: var(--font-sans); letter-spacing: .15em; color: var(--gold-light); margin-bottom: 12px; }
.card .where { color: #f0d6d8; }
.adat { text-align: center; margin-top: 34px; font-style: italic; color: var(--red-dark); }

.timeline { position: relative; margin-top: 10px; }
.timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 22px; margin-left: -11px;
  background: var(--sasi) repeat-y center / 22px 20px, linear-gradient(var(--red), var(--red)) center / 2px 100% no-repeat;
}
.t-item { position: relative; width: 50%; padding: 0 44px 40px 0; }
.t-item:nth-child(even) { margin-left: 50%; padding: 0 0 40px 44px; }
.t-dot {
  position: absolute; top: 20px; right: -8px; width: 16px; height: 16px;
  background: var(--gold); border: 2px solid var(--red); transform: rotate(45deg); z-index: 2;
}
.t-item:nth-child(even) .t-dot { right: auto; left: -8px; }
.t-box { background: #fffdf6; border: 2px solid var(--gold); border-radius: 14px; padding: 20px 24px; box-shadow: 4px 4px 0 var(--red); }
.t-year { font-family: var(--font-sans); font-size: .78rem; letter-spacing: .3em; color: var(--red); }
.t-box h3 { font-family: var(--font-names); font-weight: 700; font-size: 1.5rem; color: var(--red); margin: 2px 0 6px; line-height: 1.3; }
.t-box p { color: var(--muted); line-height: 1.75; font-size: 1.05rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 210px; gap: 14px; }
.g {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  border: 3px solid var(--gold);
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--gold-light); font-family: var(--font-sans); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  overflow: hidden; transition: transform .5s;
}
.g:hover { transform: translateY(-4px); }
.g img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.g.tall { grid-row: span 2; }
.g.wide { grid-column: span 2; }
.hint { text-align: center; margin-top: 18px; font-size: .85rem; color: var(--muted); }

.lightbox { position: fixed; inset: 0; z-index: 99; background: rgba(46,7,10,.95); display: none; place-items: center; padding: 20px; cursor: zoom-out; }
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: 92vh; border: 3px solid var(--gold); border-radius: 8px; }

.gifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 34px; }
.gift {
  border-radius: 10px;
  background: var(--red-deep);
  border: 2px solid var(--gold-light);
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
  display: grid; gap: 2px; justify-items: center;
  padding: 26px 16px;
  color: #fff;
}
.gift strong { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-light); }
.gift span { font-family: var(--font-names); font-weight: 700; font-size: 1.4rem; color: #fff; }
.gift em { color: #f0d6d8; }

.rsvp { display: grid; gap: 22px; }
.rsvp label { display: grid; gap: 6px; font-family: var(--font-sans); font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--red); text-align: left; }
.rsvp input, .rsvp select, .rsvp textarea {
  width: 100%; padding: 12px 14px;
  font-family: var(--font-serif); font-size: 1.12rem; letter-spacing: 0; text-transform: none; color: var(--ink);
  background: #fffdf6;
  border: 2px solid var(--gold);
  border-radius: 8px; outline: none; transition: .3s;
}
.rsvp textarea { resize: vertical; }
.rsvp input:focus, .rsvp select:focus, .rsvp textarea:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(138,26,32,.18); }
.rsvp .btn { justify-self: center; margin-top: 8px; }

.wishes { margin-top: 40px; display: grid; gap: 14px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
.wish { background: #fffdf6; border-left: 5px solid var(--red); border-radius: 6px; padding: 16px 20px; box-shadow: 0 6px 16px rgba(138,26,32,.08); text-align: left; }
.wish strong { font-family: var(--font-names); font-weight: 700; font-size: 1.4rem; color: var(--red); }
.wish small { margin-left: 8px; font-family: var(--font-sans); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); }
.wish p { color: var(--muted); line-height: 1.7; }

.footer {
  position: relative;
  text-align: center;
  padding: 130px 20px 80px;
  overflow: hidden;
  color: #f4e6c4;
  background: var(--wave-gold), linear-gradient(180deg, #6c1319, var(--red-dark));
}
.footer-in { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; }
.copy { font-style: italic; color: #e4d0b0; }
.thanks { margin-top: 14px; font-family: var(--font-title); letter-spacing: .3em; text-transform: uppercase; font-size: .9rem; color: var(--gold-light); }

.music-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-grad);
  color: var(--red-dark);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  border: 1px solid var(--gold-light);
  cursor: pointer;
  transition: transform .3s ease;
}
.music-btn:hover { transform: scale(1.1); }
.hidden { display: none !important; }

@media (max-width: 700px) {
  .section { padding: 80px 18px; }
  .hero { padding-top: 90px; }
  .and { width: 100%; font-size: 2.8rem; }
  .countdown div { width: 76px; height: 90px; }
  .countdown b { font-size: 1.8rem; }
  .countdown span { font-size: .5rem; letter-spacing: .12em; }
  .gallery .g.wide { grid-column: span 1; }
  .timeline::before { left: 14px; margin-left: 0; }
  .t-item, .t-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 32px 50px; }
  .t-dot, .t-item:nth-child(even) .t-dot { left: 6px; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
  </style>
</head>
<body>
  @include('templates.partials.preview-banner')

  <!-- ====== Ornamen Banjar: Rumah Bubungan Tinggi & hiasan ====== -->
  <svg width="0" height="0" style="position:absolute" aria-hidden="true">
    <defs>
      <linearGradient id="gGold" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#f8dc7c"/>
        <stop offset=".5" stop-color="#e3a712"/>
        <stop offset="1" stop-color="#a8730a"/>
      </linearGradient>

      <symbol id="bubungan" viewBox="0 0 200 150" style="overflow:visible">
        <g fill="url(#gGold)">
          <path d="M97 10 L100 -14 L103 10Z"/>
          <path d="M100 8 L144 72 L56 72Z"/>
          <path d="M58 72 L16 104 L60 104 L66 72Z"/>
          <path d="M142 72 L184 104 L140 104 L134 72Z"/>
          <rect x="50" y="104" width="100" height="24"/>
          <rect x="56"  y="128" width="6" height="20"/>
          <rect x="97"  y="128" width="6" height="20"/>
          <rect x="138" y="128" width="6" height="20"/>
          <path d="M88 148 L112 148 L106 128 L94 128Z"/>
        </g>
        <g stroke="#5a3a10" stroke-opacity=".45" stroke-width="1.5" fill="none">
          <path d="M100 18 L72 68 M100 18 L128 68 M100 18 V72"/>
          <path d="M30 100 L60 82 M170 100 L140 82"/>
        </g>
        <g fill="#5a3a10" fill-opacity=".4">
          <rect x="62" y="110" width="12" height="12" rx="1"/>
          <rect x="94" y="110" width="12" height="12" rx="1"/>
          <rect x="126" y="110" width="12" height="12" rx="1"/>
        </g>
      </symbol>

      <symbol id="finial" viewBox="0 0 40 60" style="overflow:visible">
        <g fill="url(#gGold)" stroke="#8a5a08" stroke-width=".8">
          <path d="M20 0 L27 14 L20 28 L13 14Z"/>
          <path d="M20 26 L25 36 L20 46 L15 36Z"/>
        </g>
        <path d="M20 46 V60" stroke="#e3a712" stroke-width="2"/>
      </symbol>
    </defs>
  </svg>

  <!-- ============ MODAL COVER OVERLAY ============ -->
  <div id="coverOverlay">
    <div class="sasi"></div>
    <div class="hero-inner">
      <p class="salam">Assalamu'alaikum Wr. Wb.</p>
      <p class="eyebrow">Pernikahan Adat Banjar</p>

      <div class="cover-wrap">
        <svg class="finial" viewBox="0 0 40 60"><use href="#finial"/></svg>
        <div class="gable cover-photo">
          <figure class="gable-in">
            <img src="{{ $coverPhoto }}" alt="Foto {{ $bride['nickname'] }} &amp; {{ $groom['nickname'] }}">
          </figure>
        </div>
      </div>

      <h1 class="names">{{ $bride['nickname'] }} <i>&amp;</i> {{ $groom['nickname'] }}</h1>
      <div class="divider"><span></span></div>
      <p class="date">{{ $formattedDate }}</p>
      <p class="guest">Kepada Yth.<br><b>{{ $guestName ?? 'Bapak / Ibu / Saudara/i' }}</b></p>
      <button type="button" onclick="openInvitation()" class="btn">Buka Undangan</button>
    </div>
    <div class="sasi bottom"></div>
  </div>

  <!-- ============ COVER HERO ============ -->
  <header class="hero" id="home">
    <div class="sasi"></div>
    <svg class="house hl" viewBox="0 0 200 150"><use href="#bubungan"/></svg>
    <svg class="house hr" viewBox="0 0 200 150"><use href="#bubungan"/></svg>

    <div class="hero-inner">
      <p class="salam">Assalamu'alaikum Wr. Wb.</p>
      <p class="eyebrow">Pernikahan Adat Banjar</p>

      <div class="cover-wrap">
        <svg class="finial" viewBox="0 0 40 60"><use href="#finial"/></svg>
        <div class="gable cover-photo">
          <figure class="gable-in">
            <img src="{{ $coverPhoto }}" alt="Foto {{ $bride['nickname'] }} &amp; {{ $groom['nickname'] }}">
          </figure>
        </div>
      </div>

      <h1 class="names">{{ $bride['nickname'] }} <i>&amp;</i> {{ $groom['nickname'] }}</h1>
      <div class="divider"><span></span></div>
      <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 Acara</a>
    </div>

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

  <!-- ============ 1. COUNTDOWN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('countdown'))
  <section class="section gold-sec center" id="section-countdown">
    <div id="countdown"></div>
    <div class="container reveal">
      <p class="kicker">Save The Date</p>
      <h2 class="title">Menghitung Hari</h2>
      <div class="countdown">
        <div><b id="d">00</b><span>Hari</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 cream center" id="section-quote">
    <div id="ayat"></div>
    <div class="container narrow reveal">
      <svg class="mini" viewBox="0 0 200 150"><use href="#bubungan"/></svg>
      <p class="salam-dark">Bismillahirrahmanirrahim</p>
      <p class="quote">“{!! nl2br(e($quoteText)) !!}”</p>
      <p class="source">— {{ $quoteSource }}</p>
      <div class="divider dark"><span></span></div>
      <p class="pepatah">“Waja sampai kaputing.”</p>
      <p class="arti">Teguh hingga akhir — semboyan masyarakat Banjar.</p>
    </div>
  </section>
  @endif

  <!-- ============ 3. INFORMASI PENGANTIN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('couple'))
  <section class="section cream2" id="section-couple">
    <div id="pengantin"></div>
    <div class="container">
      <p class="kicker center reveal">Pangantin</p>
      <h2 class="title reveal">Mempelai</h2>
      <div class="couple">
        <article class="person reveal">
          <div class="gable photo">
            <figure class="gable-in">
              <img src="{{ $bride['photo'] ?? 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=600&q=80' }}" alt="{{ $bride['name'] }}">
            </figure>
          </div>
          <h3>{{ $bride['name'] }}</h3>
          <p class="role">Mempelai Wanita</p>
          <p>Putri dari<br>{{ $bride['parents'] ?? 'Bapak & Ibu' }}</p>
        </article>

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

        <article class="person reveal">
          <div class="gable photo">
            <figure class="gable-in">
              <img src="{{ $groom['photo'] ?? 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=600&q=80' }}" alt="{{ $groom['name'] }}">
            </figure>
          </div>
          <h3>{{ $groom['name'] }}</h3>
          <p class="role">Mempelai Pria</p>
          <p>Putra dari<br>{{ $groom['parents'] ?? 'Bapak & Ibu' }}</p>
        </article>
      </div>
    </div>
  </section>
  @endif

  <!-- ============ 4. JADWAL ACARA ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('event'))
  <section class="section gold-sec" id="section-event">
    <div id="jadwal"></div>
    <div class="container">
      <p class="kicker center reveal">Rangkaian Acara</p>
      <h2 class="title reveal">Jadwal Acara</h2>
      <div class="events">
        @foreach($events as $event)
        <article class="card reveal">
          <svg class="card-house" viewBox="0 0 200 150"><use href="#bubungan"/></svg>
          <h3>{{ $event['title'] }}</h3>
          <p class="when">{{ \Carbon\Carbon::parse($event['date'])->locale('id')->isoFormat('dddd, D MMMM Y') }}</p>
          <p class="time">{{ $event['start_time'] ?? '08:00' }} – {{ $event['end_time'] ?? 'Selesai' }} {{ $event['timezone'] ?? 'WITA' }}</p>
          <p class="where"><strong>{{ $event['venue'] }}</strong><br>{{ $event['address'] }}</p>
          @if(!empty($event['maps_url']))
          <div style="margin-top:16px;">
            <a class="btn small" href="{{ $event['maps_url'] }}" target="_blank" rel="noopener">Peta Lokasi</a>
          </div>
          @endif
        </article>
        @endforeach
      </div>
      <p class="adat reveal">Rangkaian adat: Badatang · Batimung · Basanding</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 cream" id="section-story">
    <div id="kisah"></div>
    <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"></div>
          <div class="t-box">
            <span class="t-year">{{ $st['year'] ?? '' }}</span>
            <h3>{{ $st['title'] ?? '' }}</h3>
            <p>{{ $st['story'] ?? ($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 cream2" id="section-gallery">
    <div id="galeri"></div>
    <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 % 3 === 1 ? 'tall' : '' }} reveal">
          <img src="{{ $img }}" alt="Galeri {{ $index + 1 }}">
        </div>
        @endforeach
      </div>
    </div>
  </section>
  @endif
  @endif

  <!-- ============ 7. INFO TANDA KASIH ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('gift'))
  @if($hasGifts)
  <section class="section gold-sec center" id="section-gift">
    <div id="hadiah"></div>
    <div class="container narrow reveal">
      <p class="kicker">Hadiah Pernikahan</p>
      <h2 class="title">Tanda Kasih</h2>
      <p>Doa restu Anda adalah hadiah 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">
          <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: 12px; display: block;">
          <em>a.n. {{ $invitation->groom_nickname ?? $invitation->groom_name ?? 'Mempelai' }} &amp; {{ $invitation->bride_nickname ?? $invitation->bride_name ?? 'Mempelai' }}</em>
        </div>
        @endif
      </div>
    </div>
  </section>
  @endif
  @endif

  <!-- ============ 8. RSVP & UCAPAN ============ -->
  @if(!method_exists($invitation, 'isSectionVisible') || $invitation->isSectionVisible('wishes'))
  <section class="section cream" id="section-wishes">
    <div id="rsvp"></div>
    <div class="container narrow">
      <p class="kicker center reveal">Konfirmasi</p>
      <h2 class="title reveal">RSVP &amp; Ucapan</h2>
      
      <form class="rsvp reveal" id="rsvpForm" action="{{ route('invitation.wish', $invitation->slug ?? 'demo') }}" method="POST">
        @csrf
        <label>Nama Lengkap
          <input type="text" name="name" placeholder="Nama lengkap Anda" 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 dan doa restu untuk kedua mempelai..." required></textarea>
        </label>
        <button type="submit" class="btn">Kirim Doa Restu</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="sasi"></div>
    <svg class="house hl" viewBox="0 0 200 150"><use href="#bubungan"/></svg>
    <svg class="house hr" viewBox="0 0 200 150"><use href="#bubungan"/></svg>
    <div class="footer-in reveal">
      <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>
      <div class="divider"><span></span></div>
      <p class="copy">Wassalamu'alaikum Warahmatullahi Wabarakatuh</p>
      <p class="thanks">Tarima Kasih</p>
    </div>
    <div class="sasi bottom"></div>

    <!-- Official Janoer Koening Branding Footer -->
    <div style="margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); 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, #f8dc7c); 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-20T08:00: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) 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 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(() => {});
      }
    }
  
        // Toggle Gift Box / Rekening & QRIS
        function toggleGiftBox(btn) {
            let wrapper = null;
            if (btn) {
                const section = btn.closest('section') || btn.closest('.theme-card') || btn.parentElement.parentElement;
                if (section) {
                    wrapper = section.querySelector('.gift-box-wrapper') || section.querySelector('#gift-accordion-content') || section.querySelector('#gift-accordion');
                }
            }
            if (!wrapper) {
                wrapper = document.querySelector('.gift-box-wrapper') || document.getElementById('gift-accordion-content') || document.getElementById('gift-accordion');
            }
            if (!wrapper) return;

            const isHidden = wrapper.classList.contains('hidden') || wrapper.style.display === 'none' || window.getComputedStyle(wrapper).display === 'none';
            const label = btn ? (btn.querySelector('.gift-btn-label') || btn.querySelector('span')) : null;

            if (isHidden) {
                wrapper.classList.remove('hidden');
                wrapper.style.display = 'block';
                if (label) {
                    if (!btn.getAttribute('data-orig-text')) {
                        btn.setAttribute('data-orig-text', label.innerHTML);
                    }
                    label.innerHTML = 'Tutup Detail Rekening &amp; QRIS';
                }
            } else {
                wrapper.classList.add('hidden');
                wrapper.style.display = 'none';
                if (label) {
                    const orig = btn.getAttribute('data-orig-text') || 'Kirim Hadiah / Buka Rekening &amp; QRIS';
                    label.innerHTML = orig;
                }
            }
            if (window.lucide && typeof lucide.createIcons === 'function') {
                lucide.createIcons();
            }
        }
        function toggleGiftAccordion(btn) {
            toggleGiftBox(btn);
        }
</script>
</body>
</html>