 
    <!-- TOAST NOTIFICATION -->
    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1060; margin-top: 70px;">
        <div id="liveToast" class="toast align-items-center text-white border-0 shadow" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body fw-medium" id="toast-message">
                    ...
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>

    <!-- CHECKOUT MODAL -->
    <div class="modal fade" id="checkoutModal" tabindex="-1" aria-labelledby="checkoutModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 shadow-lg border-0">
                <div class="modal-header bg-primary text-white border-0 rounded-top-4">
                    <h5 class="modal-title fw-bold" id="checkoutModalLabel">Detail Pembayaran</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <h6 class="fw-bold mb-3" id="checkout-item-name"></h6>
                    
                    <ul class="list-group list-group-flush mb-4 small">
                        <li class="list-group-item px-0 d-flex justify-content-between">
                            <span class="text-muted">Email Pengguna</span>
                            <span id="checkout-email" class="fw-medium"></span>
                        </li>
                        <li class="list-group-item px-0 d-flex justify-content-between">
                            <span class="text-muted">Nomor WhatsApp</span>
                            <span id="checkout-phone" class="fw-medium"></span>
                        </li>
                        <li class="list-group-item px-0 d-flex justify-content-between bg-light rounded-2 py-2 fw-bold text-dark">
                            <span>TOTAL TAGIHAN</span>
                            <span id="checkout-amount"></span>
                        </li>
                    </ul>

                    <p class="text-muted small mb-3"><i data-lucide="shield-check" width="16" class="inline me-1 text-success"></i> Pembayaran akan diproses melalui *iPaymu*.</p>

                    <div class="d-grid">
                        <button onclick="initiatePayment(this)" class="btn btn-success btn-lg fw-bold" id="btn-pay-now">
                            <i data-lucide="credit-card" width="20" class="inline me-2"></i> Lanjut ke Pembayaran iPaymu
                        </button>
                    </div>
                    <p class="text-center small mt-2">Anda akan dialihkan ke halaman iPaymu.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- MAIN CONTENT -->
    <main class="flex-grow-1">
        <div class="container-xl py-5">
            <div class="text-center mb-5">
                <h2 class="fw-bold display-6">Keanggotaan PAPENTARA</h2>
                <p class="text-muted lead col-md-8 mx-auto">
                    Investasi karir terbaik Anda. Dapatkan akses eksklusif dan potongan harga untuk setiap kegiatan pengembangan diri.
                </p>
            </div>

            <div class="row align-items-center g-5">
                <div class="col-md-6 order-2 order-md-1">
                    <img src="<?= $img . $set['gambar_keanggotaan']; ?>" class="img-fluid rounded-4 shadow" alt="Komunitas">
                    
                    <!-- Benefits Section -->
                    <div class="mt-5">
                        <h4 class="fw-bold mb-4">Manfaat Keanggotaan</h4>
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="card border-0 bg-light p-3 h-100">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="bg-primary bg-opacity-10 p-2 rounded-circle text-primary">
                                            <i data-lucide="percent" width="20"></i>
                                        </div>
                                        <div>
                                            <h6 class="fw-bold m-0">Diskon 50%</h6>
                                            <small class="text-muted">Seminar & Pelatihan</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card border-0 bg-light p-3 h-100">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="bg-primary bg-opacity-10 p-2 rounded-circle text-primary">
                                            <i data-lucide="award" width="20"></i>
                                        </div>
                                        <div>
                                            <h6 class="fw-bold m-0">Sertifikat</h6>
                                            <small class="text-muted">Digital Resmi</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card border-0 bg-light p-3 h-100">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="bg-primary bg-opacity-10 p-2 rounded-circle text-primary">
                                            <i data-lucide="users" width="20"></i>
                                        </div>
                                        <div>
                                            <h6 class="fw-bold m-0">Networking</h6>
                                            <small class="text-muted">Komunitas Guru</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card border-0 bg-light p-3 h-100">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="bg-primary bg-opacity-10 p-2 rounded-circle text-primary">
                                            <i data-lucide="book-open" width="20"></i>
                                        </div>
                                        <div>
                                            <h6 class="fw-bold m-0">Materi Eksklusif</h6>
                                            <small class="text-muted">Akses Prioritas</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 order-1 order-md-2">
                    <div class="card border-primary border-2 shadow-lg rounded-4 overflow-hidden position-relative">
                        <div class="card-header bg-primary text-white text-center py-3 border-0">
                            <h4 class="m-0 fw-bold">Member Tahunan</h4>
                        </div>
                        <div class="card-body p-4 p-lg-5">
                            <div id="member-active-badge" class="alert alert-success text-center fw-bold rounded-pill d-none">
                                <i data-lucide="check-circle" class="inline w-4 h-4 me-1"></i> ANDA SUDAH TERDAFTAR
                            </div>

                            <div class="text-center mb-4">
                                <span class="display-4 fw-bold text-primary">Rp 150.000</span>
                                <span class="text-muted">/ tahun</span>
                                <p class="text-muted small mt-1">Hanya <span class="fw-bold">Rp 12.500/bulan</span></p>
                            </div>

                            <ul class="list-unstyled mb-4 d-flex flex-column gap-3">
                                <li class="d-flex align-items-center gap-3">
                                    <div class="bg-success bg-opacity-10 p-1 rounded-circle text-success"><i data-lucide="check" width="18"></i></div>
                                    <span>Potongan biaya seminar hingga 50%</span>
                                </li>
                                <li class="d-flex align-items-center gap-3">
                                    <div class="bg-success bg-opacity-10 p-1 rounded-circle text-success"><i data-lucide="check" width="18"></i></div>
                                    <span>Akses prioritas materi eksklusif</span>
                                </li>
                                <li class="d-flex align-items-center gap-3">
                                    <div class="bg-success bg-opacity-10 p-1 rounded-circle text-success"><i data-lucide="check" width="18"></i></div>
                                    <span>Kartu Anggota Digital Resmi</span>
                                </li>
                                <li class="d-flex align-items-center gap-3">
                                    <div class="bg-success bg-opacity-10 p-1 rounded-circle text-success"><i data-lucide="check" width="18"></i></div>
                                    <span>Jejaring Pengajar Nusantara</span>
                                </li>
                                <li class="d-flex align-items-center gap-3">
                                    <div class="bg-success bg-opacity-10 p-1 rounded-circle text-success"><i data-lucide="check" width="18"></i></div>
                                    <span>Prioritas pendaftaran seminar</span>
                                </li>
                                <li class="d-flex align-items-center gap-3">
                                    <div class="bg-success bg-opacity-10 p-1 rounded-circle text-success"><i data-lucide="check" width="18"></i></div>
                                    <span>Support system 24/7</span>
                                </li>
                            </ul>

                            <div class="d-grid">
                                <button id="btn-join-membership" class="btn btn-warning btn-lg fw-bold shadow-sm">
                                    Daftar Member Sekarang
                                </button>
                            </div>
                            <p class="text-center text-muted small mt-3 m-0">
                                <i data-lucide="lock" width="12" class="inline me-1"></i>Pembayaran aman & verifikasi otomatis
                            </p>
                        </div>
                    </div>
                    
                    <!-- FAQ Section -->
                    <div class="mt-5">
                        <h5 class="fw-bold mb-3">Pertanyaan Umum</h5>
                        <div class="accordion" id="membershipFAQ">
                            <div class="accordion-item border-0 mb-2">
                                <h2 class="accordion-header">
                                    <button class="accordion-button bg-light rounded-3" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                        Berapa lama masa aktif keanggotaan?
                                    </button>
                                </h2>
                                <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#membershipFAQ">
                                    <div class="accordion-body bg-light rounded-bottom-3">
                                        Masa aktif keanggotaan adalah 1 tahun (365 hari) sejak pembayaran berhasil diverifikasi.
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item border-0 mb-2">
                                <h2 class="accordion-header">
                                    <button class="accordion-button bg-light rounded-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                        Bagaimana cara perpanjangan keanggotaan?
                                    </button>
                                </h2>
                                <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#membershipFAQ">
                                    <div class="accordion-body bg-light rounded-bottom-3">
                                        Anda akan mendapatkan notifikasi via email dan WhatsApp 30 hari sebelum masa keanggotaan berakhir. Proses perpanjangan bisa dilakukan melalui dashboard anggota.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

     
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();
            updateAuthUI();
            
            // Update membership status
            const memberBadge = document.getElementById('member-active-badge');
            const joinButton = document.getElementById('btn-join-membership');
            
            if (currentUser) {
                if (currentUser.isMember) {
                    if (memberBadge) memberBadge.classList.remove('d-none');
                    if (joinButton) {
                        joinButton.innerText = 'Perpanjang Keanggotaan';
                        joinButton.className = 'btn btn-primary btn-lg fw-bold shadow-sm';
                    }
                } else {
                    if (memberBadge) memberBadge.classList.add('d-none');
                    if (joinButton) {
                        joinButton.innerText = 'Daftar Member Sekarang';
                        joinButton.className = 'btn btn-warning btn-lg fw-bold shadow-sm';
                    }
                }
                
                // Add event listener to join button
                if (joinButton) {
                    joinButton.addEventListener('click', function() {
                        const memberPrice = 150000;
                        const itemName = currentUser.isMember 
                            ? "Perpanjangan Member PAPENTARA 1 Tahun" 
                            : "Pendaftaran Member PAPENTARA 1 Tahun";
                        const reference = currentUser.isMember 
                            ? `MEMBER-RENEWAL-${Date.now()}`
                            : `MEMBER-NEW-${Date.now()}`;
                        
                        showCheckoutModal(itemName, memberPrice, reference);
                    });
                }
            } else {
                if (joinButton) {
                    joinButton.addEventListener('click', function() {
                        showToast("Silakan login terlebih dahulu", "warning");
                        setTimeout(() => {
                            window.location.href = 'login.html?redirect=' + encodeURIComponent(window.location.href);
                        }, 1000);
                    });
                }
            }
        });
        
        function showCheckoutModal(itemName, amount, reference) {
            if (!currentUser) {
                showToast("Anda harus login untuk melanjutkan pembayaran.", "danger");
                window.location.href = 'login.html?redirect=' + encodeURIComponent(window.location.href);
                return;
            }
            
            checkoutItem = {
                name: itemName,
                amount: amount,
                reference: reference
            };
            
            // Update modal content
            document.getElementById('checkoutModalLabel').innerText = `Bayar ${itemName}`;
            document.getElementById('checkout-item-name').innerText = itemName;
            document.getElementById('checkout-email').innerText = currentUser.email;
            document.getElementById('checkout-phone').innerText = currentUser.phone;
            document.getElementById('checkout-amount').innerText = formatRupiah(amount);
            
            // Show modal
            const checkoutModal = new bootstrap.Modal(document.getElementById('checkoutModal'));
            checkoutModal.show();
            lucide.createIcons();
        }
    </script>