<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Undangan Khitanan — Muhammad Athaya</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=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Poppins:wght@300;400;500;600;700&family=Noto+Naskh+Arabic:wght@400;600&display=swap" rel="stylesheet">
    <style>
        /* ============================================
           Invitation - Parallax Batik Style
           ============================================ */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        
        :root {
            --bg: #1a0a00;
            --text: #f5e6d0;
            --accent: #c9a96e;
            --font-h: Playfair Display;
            --font-b: Poppins;
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font-b), sans-serif;
            background: var(--bg);
            color: var(--text);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* --- Cover / Opening --- */
        .cover {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .cover-bg {
            position: absolute;
            inset: 0;
            background: url('assets/images/background.png') center/cover no-repeat;
            transform: scale(1.1);
            will-change: transform;
            transition: transform 0.1s linear;
        }

        .cover-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, 
                rgba(10, 6, 5, 0.3) 0%, 
                rgba(10, 6, 5, 0.6) 50%, 
                rgba(10, 6, 5, 0.85) 100%);
        }

        /* Ornamen Atas - parallax layer */
        .ornament-top {
            position: absolute;
            top: -10%;
            left: 50%;
            transform: translateX(-50%);
            width: 110%;
            max-width: 1400px;
            opacity: 0.35;
            pointer-events: none;
            will-change: transform;
            z-index: 2;
        }

        .ornament-top img {
            width: 100%;
            height: auto;
            filter: sepia(0.3) brightness(1.1);
        }

        /* Ornamen Samping */
        .ornament-left, .ornament-right {
            position: absolute;
            top: 20%;
            width: 200px;
            opacity: 0.2;
            pointer-events: none;
            will-change: transform;
            z-index: 2;
        }

        .ornament-left {
            left: -20px;
            transform: rotate(-5deg);
        }

        .ornament-right {
            right: -20px;
            transform: rotate(5deg) scaleX(-1);
        }

        .ornament-left img, .ornament-right img {
            width: 100%;
            filter: sepia(0.4) brightness(1.2);
        }

        /* Ornamen Bawah */
        .ornament-bottom-wrap {
            position: absolute;
            bottom: -5%;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 1200px;
            opacity: 0.3;
            pointer-events: none;
            will-change: transform;
            z-index: 2;
        }

        .ornament-bottom-wrap img {
            width: 100%;
            filter: sepia(0.3);
        }

        /* Cover Content */
        .cover-content {
            position: relative;
            z-index: 3;
            text-align: center;
            padding: 40px 24px;
            max-width: 600px;
        }

        .cover-bismillah {
            font-family: 'Noto Naskh Arabic', serif;
            font-size: clamp(22px, 5vw, 32px);
            color: var(--accent);
            margin-bottom: 24px;
            opacity: 0;
            animation: fadeUp 1s 0.5s forwards;
        }

        .cover-greeting {
            font-size: clamp(14px, 3vw, 18px);
            color: rgba(245, 230, 208, 0.7);
            margin-bottom: 12px;
            opacity: 0;
            animation: fadeUp 1s 0.8s forwards;
        }

        .cover-title {
            font-family: var(--font-h), serif;
            font-size: clamp(14px, 3vw, 18px);
            font-weight: 400;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 24px;
            opacity: 0;
            animation: fadeUp 1s 1s forwards;
        }

        .cover-name {
            font-family: var(--font-h), serif;
            font-size: clamp(36px, 8vw, 64px);
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 8px;
            background: linear-gradient(135deg, #f5e6d0, #c9a96e, #f0d896);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            opacity: 0;
            animation: fadeUp 1s 1.2s forwards;
        }

        .cover-event {
            font-size: clamp(13px, 2.5vw, 16px);
            color: rgba(245, 230, 208, 0.6);
            margin-bottom: 8px;
            opacity: 0;
            animation: fadeUp 1s 1.4s forwards;
        }

        .cover-date {
            font-family: var(--font-h), serif;
            font-size: clamp(16px, 3.5vw, 22px);
            color: var(--accent);
            margin-bottom: 32px;
            opacity: 0;
            animation: fadeUp 1s 1.6s forwards;
        }

        .cover-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 36px;
            background: linear-gradient(135deg, var(--accent), #d4a853);
            color: var(--bg);
            border: none;
            border-radius: 50px;
            font-family: var(--font-b);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            opacity: 0;
            animation: fadeUp 1s 1.8s forwards;
        }

        .cover-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(201, 169, 110, 0.4);
        }

        /* Floating Particles */
        .inv-particles {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            overflow: hidden;
        }

        .inv-particle {
            position: absolute;
            width: 3px;
            height: 3px;
            background: var(--accent);
            border-radius: 50%;
            opacity: 0;
            animation: particleFloat 8s infinite;
        }

        @keyframes particleFloat {
            0% { opacity: 0; transform: translateY(100vh) scale(0); }
            10% { opacity: 0.6; }
            90% { opacity: 0.6; }
            100% { opacity: 0; transform: translateY(-10vh) scale(1); }
        }

        /* --- Content Sections --- */
        .section {
            position: relative;
            padding: 80px 24px;
            max-width: 700px;
            margin: 0 auto;
        }

        .section-divider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            margin-bottom: 40px;
            opacity: 0.5;
        }

        .section-divider::before,
        .section-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
        }

        .section-divider span {
            font-size: 20px;
            color: var(--accent);
        }

        /* Ayat / Quote */
        .quote-section {
            text-align: center;
            padding: 100px 24px;
            position: relative;
        }

        .quote-section::before {
            content: '"';
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            font-family: var(--font-h);
            font-size: 120px;
            color: var(--accent);
            opacity: 0.1;
            line-height: 1;
        }

        .quote-text {
            font-family: var(--font-h), serif;
            font-size: clamp(18px, 4vw, 26px);
            font-style: italic;
            line-height: 1.8;
            color: rgba(245, 230, 208, 0.8);
            margin-bottom: 16px;
        }

        .quote-source {
            font-size: 14px;
            color: var(--accent);
            opacity: 0.7;
        }

        /* Event Details */
        .event-card {
            background: rgba(201, 169, 110, 0.05);
            border: 1px solid rgba(201, 169, 110, 0.15);
            border-radius: 16px;
            padding: 40px 32px;
            text-align: center;
            margin: 24px 0;
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }

        .event-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
        }

        .event-icon {
            font-size: 36px;
            margin-bottom: 16px;
        }

        .event-label {
            font-size: 13px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 8px;
        }

        .event-name {
            font-family: var(--font-h), serif;
            font-size: clamp(24px, 5vw, 36px);
            font-weight: 700;
            margin-bottom: 24px;
            background: linear-gradient(135deg, #f5e6d0, #c9a96e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .event-detail-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid rgba(201, 169, 110, 0.08);
            text-align: left;
        }

        .event-detail-row:last-child { border-bottom: none; }

        .event-detail-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(201, 169, 110, 0.1);
            border-radius: 10px;
            font-size: 18px;
            flex-shrink: 0;
        }

        .event-detail-text strong {
            display: block;
            font-size: 15px;
            font-weight: 500;
        }

        .event-detail-text span {
            font-size: 13px;
            color: rgba(245, 230, 208, 0.5);
        }

        /* Countdown */
        .countdown-section {
            text-align: center;
            padding: 60px 24px;
        }

        .countdown-title {
            font-family: var(--font-h);
            font-size: 18px;
            color: var(--accent);
            margin-bottom: 24px;
        }

        .countdown-grid {
            display: flex;
            justify-content: center;
            gap: 16px;
        }

        .countdown-item {
            text-align: center;
        }

        .countdown-num {
            font-family: var(--font-h);
            font-size: clamp(32px, 7vw, 48px);
            font-weight: 700;
            color: var(--accent);
            line-height: 1;
            min-width: 70px;
            display: block;
        }

        .countdown-label {
            font-size: 11px;
            color: rgba(245, 230, 208, 0.5);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 4px;
        }

        /* Gallery */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            border-radius: 12px;
            overflow: hidden;
        }

        .gallery-item {
            aspect-ratio: 1;
            background: rgba(201, 169, 110, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            font-size: 24px;
            opacity: 0.5;
        }

        /* RSVP Form */
        .rsvp-form {
            max-width: 400px;
            margin: 0 auto;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-group label {
            display: block;
            font-size: 13px;
            color: var(--accent);
            margin-bottom: 6px;
            letter-spacing: 1px;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 12px 16px;
            background: rgba(201, 169, 110, 0.05);
            border: 1px solid rgba(201, 169, 110, 0.2);
            border-radius: 10px;
            color: var(--text);
            font-family: var(--font-b);
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            border-color: var(--accent);
        }

        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .form-group select option {
            background: var(--bg);
            color: var(--text);
        }

        .rsvp-submit {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--accent), #d4a853);
            color: var(--bg);
            border: none;
            border-radius: 10px;
            font-family: var(--font-b);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .rsvp-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(201, 169, 110, 0.3);
        }

        /* Wishes */
        .wishes-list {
            max-height: 300px;
            overflow-y: auto;
            margin-bottom: 24px;
            padding-right: 8px;
        }

        .wishes-list::-webkit-scrollbar { width: 4px; }
        .wishes-list::-webkit-scrollbar-track { background: transparent; }
        .wishes-list::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }

        .wish-item {
            background: rgba(201, 169, 110, 0.05);
            border: 1px solid rgba(201, 169, 110, 0.1);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 8px;
        }

        .wish-name {
            font-weight: 600;
            font-size: 14px;
            color: var(--accent);
            margin-bottom: 4px;
        }

        .wish-msg {
            font-size: 13px;
            color: rgba(245, 230, 208, 0.7);
            line-height: 1.5;
        }

        .wish-time {
            font-size: 11px;
            color: rgba(245, 230, 208, 0.3);
            margin-top: 4px;
        }

        /* Closing */
        .closing-section {
            text-align: center;
            padding: 80px 24px 120px;
        }

        .closing-text {
            font-size: 15px;
            color: rgba(245, 230, 208, 0.7);
            line-height: 1.8;
            margin-bottom: 16px;
        }

        .closing-salam {
            font-family: var(--font-h), serif;
            font-size: 22px;
            color: var(--accent);
            margin-bottom: 40px;
        }

        /* Card / Kartu */
        .kartu-section {
            text-align: center;
            padding: 40px 24px 80px;
        }

        .kartu-section img {
            max-width: 100%;
            width: 400px;
            border-radius: 12px;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
        }

        /* Parallax Divider */
        .parallax-divider {
            position: relative;
            height: 300px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .parallax-divider-bg {
            position: absolute;
            inset: -50%;
            background: url('assets/images/background.png') center/cover no-repeat;
            will-change: transform;
            filter: blur(1px) brightness(0.5);
        }

        .parallax-divider-content {
            position: relative;
            z-index: 1;
            text-align: center;
            padding: 0 24px;
        }

        .parallax-divider-content h3 {
            font-family: var(--font-h);
            font-size: clamp(20px, 4vw, 30px);
            background: linear-gradient(135deg, #f5e6d0, #c9a96e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* WhatsApp Button */
        .wa-btn {
            position: fixed;
            bottom: 24px;
            left: 24px;
            width: 56px;
            height: 56px;
            background: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
            transition: all 0.3s;
            z-index: 100;
            text-decoration: none;
        }

        .wa-btn:hover {
            transform: scale(1.1);
        }

        .wa-btn svg {
            width: 28px;
            height: 28px;
            fill: white;
        }

        /* Animations */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

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

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive */
        @media (max-width: 480px) {
            .countdown-grid { gap: 8px; }
            .countdown-num { min-width: 55px; font-size: 28px; }
            .event-card { padding: 28px 20px; }
            .gallery-grid { grid-template-columns: repeat(2, 1fr); }
        }
    </style>
</head>
<body>

    <!-- COVER -->
    <section class="cover" id="cover">
        <!-- Parallax Background -->
        <div class="cover-bg" id="coverBg"></div>
        <div class="cover-overlay"></div>

        <!-- Floating Particles -->
        <div class="inv-particles" id="invParticles"></div>

        <!-- Ornamen Atas -->
                <div class="ornament-top" id="ornamentTop">
            <img src="assets/images/ornamen.png" alt="Ornamen Atas" loading="lazy">
        </div>
        
        <!-- Ornamen Samping -->
        
        <!-- Ornamen Bawah -->
                <div class="ornament-bottom-wrap" id="ornamentBottom">
            <img src="assets/images/ornamen-bawah.png" alt="Ornamen Bawah" loading="lazy">
        </div>
        
        <!-- Cover Content -->
        <div class="cover-content">
            <div class="cover-bismillah">بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ</div>
            <div class="cover-greeting">Assalamu&#039;alaikum Warahmatullahi Wabarakatuh</div>
            <div class="cover-title">Mohon Doa Restu</div>
            <div class="cover-name">Muhammad Athaya</div>
            <div class="cover-event">Khitanan Putra dari</div>
            <div class="cover-date">Sabtu, 15 September 2025</div>
            <button class="cover-btn" onclick="document.getElementById('content').scrollIntoView({behavior:'smooth'})">
                ✦ Buka Undangan ✦
            </button>
        </div>
    </section>

    <!-- Content -->
    <div id="content">

        <!-- Quote -->
        <section class="quote-section reveal">
            <div class="quote-text">Segala puji bagi Allah yang telah menyelesaikan urusan hamba-Nya.</div>
            <div class="quote-source">— QS. Al-Kahfi: 10</div>
        </section>

        <!-- Parallax Divider -->
        <div class="parallax-divider">
            <div class="parallax-divider-bg" data-parallax-bg></div>
            <div class="parallax-divider-content">
                <h3>/moment spesial/</h3>
            </div>
        </div>

        <!-- Event Details -->
        <section class="section reveal">
            <div class="section-divider"><span>✦</span></div>
            
            <div class="event-card">
                <div class="event-icon">🕌</div>
                <div class="event-label">Acara</div>
                <div class="event-name">Khitanan</div>
                
                <div class="event-detail-row">
                    <div class="event-detail-icon">📅</div>
                    <div class="event-detail-text">
                        <strong>Sabtu, 15 September 2025</strong>
                        <span>Tanggal Acara</span>
                    </div>
                </div>
                
                <div class="event-detail-row">
                    <div class="event-detail-icon">🕗</div>
                    <div class="event-detail-text">
                        <strong>08:00 - 12:00 WIB</strong>
                        <span>Waktu Pelaksanaan</span>
                    </div>
                </div>
                
                <div class="event-detail-row">
                    <div class="event-detail-icon">📍</div>
                    <div class="event-detail-text">
                        <strong>Masjid Al-Ikhlas</strong>
                        <span>Jl. Merdeka No. 123, Kota Bandung</span>
                    </div>
                </div>

                                <div style="margin-top: 20px;">
                    <a href="https://maps.google.com" target="_blank" style="display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:rgba(201,169,110,0.1);border:1px solid rgba(201,169,110,0.2);border-radius:8px;color:var(--accent);font-size:13px;text-decoration:none;transition:all 0.3s;">
                        📍 Lihat di Google Maps
                    </a>
                </div>
                            </div>
        </section>

        <!-- Countdown -->
        <section class="countdown-section reveal">
            <div class="countdown-title">✦ Hitung Mundur ✦</div>
            <div class="countdown-grid" id="countdown">
                <div class="countdown-item">
                    <span class="countdown-num" id="cd-days">00</span>
                    <span class="countdown-label">Hari</span>
                </div>
                <div class="countdown-item">
                    <span class="countdown-num" id="cd-hours">00</span>
                    <span class="countdown-label">Jam</span>
                </div>
                <div class="countdown-item">
                    <span class="countdown-num" id="cd-mins">00</span>
                    <span class="countdown-label">Menit</span>
                </div>
                <div class="countdown-item">
                    <span class="countdown-num" id="cd-secs">00</span>
                    <span class="countdown-label">Detik</span>
                </div>
            </div>
        </section>

        <!-- Gallery (Pro & Enterprise) -->
        
        <!-- RSVP (Pro & Enterprise) -->
        
        <!-- Wishes -->
        <section class="section reveal">
            <div class="section-divider"><span>✦</span></div>
            <h3 style="text-align:center;font-family:var(--font-h);font-size:22px;margin-bottom:24px;color:var(--accent);">Ucapan & Doa</h3>
            <div class="wishes-list" id="wishesList">
                <div class="wish-item">
                    <div class="wish-name">Budi Santoso</div>
                    <div class="wish-msg">Barakallahu lakuma wa baraka 'alaikuma wa jama'a bainakuma fi khair. Semoga menjadi anak saleh!</div>
                    <div class="wish-time">2 jam yang lalu</div>
                </div>
                <div class="wish-item">
                    <div class="wish-name">Siti Nurhaliza</div>
                    <div class="wish-msg">MasyaAllah, selamat ya! Semoga selalu diberkahi kesehatan dan kebahagiaan. Aamiin 🤲</div>
                    <div class="wish-time">5 jam yang lalu</div>
                </div>
                <div class="wish-item">
                    <div class="wish-name">Ahmad Fadli</div>
                    <div class="wish-msg">Turut berbahagia! Semoga acaranya berjalan lancar dan diberi kemudahan oleh Allah SWT.</div>
                    <div class="wish-time">1 hari yang lalu</div>
                </div>
            </div>
        </section>

        <!-- Closing -->
        <section class="closing-section reveal">
            <div class="section-divider" style="margin-bottom:32px;"><span>✦</span></div>
            <p class="closing-text">Merupakan suatu kehormatan dan kebahagiaan bagi kami apabila Bapak/Ibu/Saudara/i berkenan hadir untuk memberikan doa restu.</p>
            <p class="closing-text">Terima kasih atas doa dan ucapan yang telah diberikan.</p>
            <div class="closing-salam">Wassalamu'alaikum Warahmatullahi Wabarakatuh</div>
        </section>

        <!-- Kartu -->
                <section class="kartu-section reveal">
            <img src="assets/images/kartu.png" alt="Kartu Nama" loading="lazy">
        </section>
            </div>

    <!-- WhatsApp Share Button -->
    
    <script>
    (function() {
        'use strict';

        // === Parallax Engine ===
        const coverBg = document.getElementById('coverBg');
        const ornamentTop = document.getElementById('ornamentTop');
        const ornamentBottom = document.getElementById('ornamentBottom');
        const ornamentLeft = document.getElementById('ornamentLeft');
        const ornamentRight = document.getElementById('ornamentRight');
        const parallaxBgs = document.querySelectorAll('[data-parallax-bg]');
        
        function updateParallax() {
            const scrollY = window.scrollY;
            const vh = window.innerHeight;
            
            // Cover background - slowest layer
            if (coverBg) {
                coverBg.style.transform = `scale(1.1) translateY(${scrollY * 0.3}px)`;
            }
            
            // Ornaments - different speeds
            if (ornamentTop) {
                ornamentTop.style.transform = `translateX(-50%) translateY(${scrollY * 0.15}px)`;
            }
            if (ornamentBottom) {
                ornamentBottom.style.transform = `translateX(-50%) translateY(${-scrollY * 0.1}px)`;
            }
            if (ornamentLeft) {
                ornamentLeft.style.transform = `rotate(-5deg) translateY(${scrollY * 0.2}px)`;
            }
            if (ornamentRight) {
                ornamentRight.style.transform = `rotate(5deg) scaleX(-1) translateY(${scrollY * 0.2}px)`;
            }
            
            // Parallax dividers
            parallaxBgs.forEach(bg => {
                const rect = bg.parentElement.getBoundingClientRect();
                if (rect.top < vh && rect.bottom > 0) {
                    const progress = (vh - rect.top) / (vh + rect.height);
                    bg.style.transform = `translateY(${(progress - 0.5) * 100}px)`;
                }
            });
            
            requestAnimationFrame(updateParallax);
        }
        requestAnimationFrame(updateParallax);

        // === Reveal on Scroll ===
        const reveals = document.querySelectorAll('.reveal');
        const revealObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    revealObserver.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
        reveals.forEach(el => revealObserver.observe(el));

        // === Particles ===
        const particleContainer = document.getElementById('invParticles');
        if (particleContainer) {
            for (let i = 0; i < 20; i++) {
                const p = document.createElement('div');
                p.className = 'inv-particle';
                p.style.left = Math.random() * 100 + '%';
                p.style.animationDelay = Math.random() * 8 + 's';
                p.style.animationDuration = (6 + Math.random() * 6) + 's';
                p.style.width = p.style.height = (2 + Math.random() * 3) + 'px';
                particleContainer.appendChild(p);
            }
        }

        // === Countdown ===
        const eventDateStr = 'Sabtu, 15 September 2025';
        // Try to parse Indonesian date format
        const months = {
            'Januari': 0, 'Februari': 1, 'Maret': 2, 'April': 3, 'Mei': 4, 'Juni': 5,
            'Juli': 6, 'Agustus': 7, 'September': 8, 'Oktober': 9, 'November': 10, 'Desember': 11
        };
        
        let eventDate = null;
        // Try "Sabtu, 15 September 2025" format
        const match = eventDateStr.match(/(\d{1,2})\s+(\w+)\s+(\d{4})/);
        if (match) {
            const day = parseInt(match[1]);
            const month = months[match[2]] ?? 0;
            const year = parseInt(match[3]);
            eventDate = new Date(year, month, day, 8, 0, 0);
        }
        
        if (!eventDate) eventDate = new Date('2025-09-15T08:00:00');

        function updateCountdown() {
            const now = new Date();
            const diff = eventDate - now;
            
            if (diff <= 0) {
                document.getElementById('cd-days').textContent = '🎉';
                document.getElementById('cd-hours').textContent = '🎉';
                document.getElementById('cd-mins').textContent = '🎉';
                document.getElementById('cd-secs').textContent = '🎉';
                return;
            }
            
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const secs = Math.floor((diff % (1000 * 60)) / 1000);
            
            document.getElementById('cd-days').textContent = String(days).padStart(2, '0');
            document.getElementById('cd-hours').textContent = String(hours).padStart(2, '0');
            document.getElementById('cd-mins').textContent = String(mins).padStart(2, '0');
            document.getElementById('cd-secs').textContent = String(secs).padStart(2, '0');
        }
        
        updateCountdown();
        setInterval(updateCountdown, 1000);

        // === RSVP Form ===
        const rsvpForm = document.getElementById('rsvpForm');
        if (rsvpForm) {
            rsvpForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const formData = new FormData(this);
                const btn = this.querySelector('.rsvp-submit');
                btn.textContent = 'Mengirim...';
                btn.disabled = true;

                fetch('api/rsvp.php?action=submit', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        name: formData.get('name'),
                        attendance: formData.get('attendance'),
                        guests: formData.get('guests'),
                        message: formData.get('message'),
                    })
                })
                .then(r => r.json())
                .then(data => {
                    if (data.success) {
                        btn.textContent = '✓ Terkirim!';
                        btn.style.background = '#2ecc71';
                        this.reset();
                        loadWishes();
                    } else {
                        btn.textContent = '✗ ' + (data.error || 'Gagal');
                        btn.style.background = '#e74c3c';
                    }
                    setTimeout(() => {
                        btn.textContent = 'Kirim Konfirmasi ✦';
                        btn.style.background = '';
                        btn.disabled = false;
                    }, 3000);
                })
                .catch(() => {
                    btn.textContent = '✗ Error';
                    btn.style.background = '#e74c3c';
                    setTimeout(() => {
                        btn.textContent = 'Kirim Konfirmasi ✦';
                        btn.style.background = '';
                        btn.disabled = false;
                    }, 3000);
                });
            });
        }

        // === Load Wishes from DB ===
        function loadWishes() {
            fetch('api/rsvp.php?action=list&limit=50')
                .then(r => r.json())
                .then(data => {
                    if (data.success && data.data) {
                        const list = document.getElementById('wishesList');
                        if (!list) return;
                        list.innerHTML = '';
                        data.data.filter(r => r.message).forEach(r => {
                            const timeAgo = getTimeAgo(r.created_at);
                            list.innerHTML += '<div class="wish-item"><div class="wish-name">' + escapeHtml(r.name) + '</div><div class="wish-msg">' + escapeHtml(r.message) + '</div><div class="wish-time">' + timeAgo + '</div></div>';
                        });
                        if (list.children.length === 0) {
                            list.innerHTML = '<p style="text-align:center;color:rgba(245,230,208,0.3);font-size:13px;">Belum ada ucapan</p>';
                        }
                    }
                })
                .catch(() => {});
        }

        function escapeHtml(s) {
            const d = document.createElement('div');
            d.textContent = s || '';
            return d.innerHTML;
        }

        function getTimeAgo(dateStr) {
            const diff = Date.now() - new Date(dateStr).getTime();
            const mins = Math.floor(diff / 60000);
            if (mins < 1) return 'Baru saja';
            if (mins < 60) return mins + ' menit yang lalu';
            const hrs = Math.floor(mins / 60);
            if (hrs < 24) return hrs + ' jam yang lalu';
            const days = Math.floor(hrs / 24);
            return days + ' hari yang lalu';
        }

        // Load wishes on page load
        loadWishes();

        // === Track Visitor ===
        fetch('api/rsvp.php?action=track', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ page: 'cover' })
        }).catch(() => {});
    })();
    </script>
</body>
</html>
