require_once __DIR__ . '/includes/functions.php';

$success_message = '';
$error_message = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $token = $_POST['csrf_token'] ?? '';
    if (!verify_csrf_token($token)) {
        $error_message = 'Permintaan tidak valid (Token expired). Silakan coba lagi.';
    } else {
        $name = sanitize($_POST['name'] ?? '');
        $email = sanitize($_POST['email'] ?? '');
        $phone = sanitize($_POST['phone'] ?? '');
        $subject = sanitize($_POST['subject'] ?? 'Pesan dari Form Kontak');
        $message = sanitize($_POST['message'] ?? '');

        if (empty($name) || empty($message)) {
            $error_message = 'Nama dan pesan wajib diisi.';
        } else {
            try {
                $stmt = $pdo->prepare("INSERT INTO messages (name, email, phone, subject, message) VALUES (?, ?, ?, ?, ?)");
                $stmt->execute([$name, $email, $phone, $subject, $message]);
                set_flash('success', 'Alhamdulillah, pesan Anda telah berhasil dikirim. Tim kami akan segera menindaklanjuti. Terima kasih!');
                header('Location: hubungi-kami.php?sent=1#pesan-form');
                exit;
            } catch (Exception $e) {
                error_log("Contact message error: " . $e->getMessage());
                $error_message = 'Gagal mengirim pesan ke server. Silakan coba kembali.';
            }
        }
    }
}

$flash = get_flash();
if ($flash && $flash['type'] === 'success') {
    $success_message = $flash['message'];
}

$csrf_token = generate_csrf_token();
$page_title = "Hubungi Kami & Saluran Donasi";
$page_description = "Kontak resmi kantor Yayasan Cahaya Qur'an Pelita Hati, lokasi pondok pesantren, saluran transfer rekening infaq sedekah, dan konfirmasi WhatsApp.";

require_once __DIR__ . '/includes/header.php';
?>

<!-- ================= PAGE BANNER (HERO PARALLAX) ================= -->
<section class="hero-parallax text-white py-16 sm:py-24 relative overflow-hidden border-b border-emerald-900/20">
    <div class="hero-parallax-overlay"></div>
    <div class="hero-parallax-glow"></div>
    <div class="hero-pattern-grid"></div>
    <div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 text-gold text-xs font-bold uppercase tracking-wider mb-4 backdrop-blur-md border border-white/15 shadow-sm">
            <i class="fa-solid fa-headset text-sm"></i> Layanan Informasi & Donasi
        </div>
        <h1 class="text-3xl sm:text-5xl font-heading font-extrabold text-white mb-4 tracking-tight leading-tight drop-shadow-sm">
            Hubungi Kami & Saluran Donasi
        </h1>
        <p class="text-white/85 max-w-2xl text-base sm:text-lg leading-relaxed drop-shadow-sm">
            Silaturahmi, konsultasi program dakwah, dan salurkan amanah infaq/sedekah Anda untuk keberkahan generasi santri penghafal Al-Qur'an.
        </p>
    </div>
</section>

<!-- ================= CONTACT INFO CARDS ================= -->
<section class="py-12 bg-white border-b border-emerald-900/10">
    <div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            
            <div class="p-6 rounded-2xl bg-bgSoft border border-emerald-100 flex items-start gap-4">
                <div class="w-12 h-12 rounded-xl bg-primary text-white flex items-center justify-center text-xl shrink-0">
                    <i class="fa-brands fa-whatsapp text-gold"></i>
                </div>
                <div>
                    <h4 class="font-heading font-bold text-darkForest text-base mb-1">WhatsApp & Call</h4>
                    <p class="text-xs text-textMuted mb-2">Layanan konfirmasi donasi & informasi 24/7</p>
                    <a href="https://wa.me/" target="_blank" class="text-sm font-bold text-primary hover:text-gold transition-colors font-mono">
                                            </a>
                </div>
            </div>

            <div class="p-6 rounded-2xl bg-bgSoft border border-emerald-100 flex items-start gap-4">
                <div class="w-12 h-12 rounded-xl bg-primary text-white flex items-center justify-center text-xl shrink-0">
                    <i class="fa-solid fa-envelope text-gold"></i>
                </div>
                <div>
                    <h4 class="font-heading font-bold text-darkForest text-base mb-1">Email Resmi</h4>
                    <p class="text-xs text-textMuted mb-2">Proposal kemitraan & surat resmi yayasan</p>
                    <a href="mailto:" class="text-sm font-bold text-primary hover:text-gold transition-colors">
                                            </a>
                </div>
            </div>

            <div class="p-6 rounded-2xl bg-bgSoft border border-emerald-100 flex items-start gap-4">
                <div class="w-12 h-12 rounded-xl bg-primary text-white flex items-center justify-center text-xl shrink-0">
                    <i class="fa-solid fa-location-dot text-gold"></i>
                </div>
                <div>
                    <h4 class="font-heading font-bold text-darkForest text-base mb-1">Lokasi Pesantren</h4>
                    <p class="text-xs text-textMuted leading-relaxed">
                                            </p>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- ================= MAIN SECTION: REKENING DONASI & FORM KONTAK ================= -->
<section id="donasi" class="py-16 sm:py-20 bg-bgSoft border-b border-emerald-900/10">
    <div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
            
            <!-- Left: Rekening Donasi & QRIS -->
            <div class="lg:col-span-5 space-y-6">
                <div class="bg-white p-6 sm:p-8 rounded-3xl border border-slate-200 shadow-card space-y-5">
                    <div>
                        <span class="text-xs font-bold text-gold uppercase tracking-wider block mb-1">Rekening & QRIS Resmi</span>
                        <h2 class="font-heading font-extrabold text-2xl text-darkForest">Salurkan Infaq & Sedekah</h2>
                        <p class="text-xs text-textMuted mt-1">Seluruh dana donasi disalurkan secara amanah untuk operasional santri dan program yayasan.</p>
                    </div>

                    <!-- REKENING BANK & QRIS (TAMPIL LANGSUNG TANPA TAB) -->
                    <div class="space-y-3.5">
                        <!-- BSI -->
                        <div class="p-4 sm:p-5 rounded-2xl bg-bgSoft border-2 border-emerald-200/80 space-y-2">
                            <div class="flex items-center justify-between">
                                <span class="font-heading font-bold text-sm text-darkForest flex items-center gap-1.5">
                                    <i class="fa-solid fa-building-columns text-primary text-xs"></i>
                                                                    </span>
                                <span class="px-2 py-0.5 rounded bg-primary text-white text-[10px] font-bold">Utama</span>
                            </div>
                            <div class="flex items-center justify-between bg-white p-3 rounded-xl border border-slate-200 shadow-sm">
                                <span class="font-mono font-bold text-base text-primary tracking-wider"></span>
                                <button type="button" onclick="copyToClipboard('', 'Nomor rekening BSI disalin!')" class="px-3 py-1.5 rounded-lg bg-gold hover:bg-goldHover text-white text-xs font-bold transition-colors shadow-sm flex items-center gap-1">
                                    <i class="fa-regular fa-copy text-[11px]"></i>
                                    <span>Salin No</span>
                                </button>
                            </div>
                            <span class="text-xs text-textMuted block">Atas Nama: <strong class="text-darkForest"></strong></span>
                        </div>

                        <!-- Mandiri -->
                        <div class="p-4 sm:p-5 rounded-2xl bg-bgSoft border-2 border-emerald-200/80 space-y-2">
                            <div class="flex items-center justify-between">
                                <span class="font-heading font-bold text-sm text-darkForest flex items-center gap-1.5">
                                    <i class="fa-solid fa-building-columns text-secondary text-xs"></i>
                                                                    </span>
                                <span class="px-2 py-0.5 rounded bg-secondary text-white text-[10px] font-bold">Transfer</span>
                            </div>
                            <div class="flex items-center justify-between bg-white p-3 rounded-xl border border-slate-200 shadow-sm">
                                <span class="font-mono font-bold text-base text-primary tracking-wider"></span>
                                <button type="button" onclick="copyToClipboard('', 'Nomor rekening Mandiri disalin!')" class="px-3 py-1.5 rounded-lg bg-gold hover:bg-goldHover text-white text-xs font-bold transition-colors shadow-sm flex items-center gap-1">
                                    <i class="fa-regular fa-copy text-[11px]"></i>
                                    <span>Salin No</span>
                                </button>
                            </div>
                            <span class="text-xs text-textMuted block">Atas Nama: <strong class="text-darkForest"></strong></span>
                        </div>

                        <!-- QRIS Resmi (Langsung di bawah rekening) -->
                        <div class="p-4 sm:p-5 rounded-2xl bg-white border-2 border-slate-200 shadow-sm text-center space-y-3">
                            <div class="flex items-center justify-between border-b border-slate-100 pb-2">
                                <span class="font-heading font-extrabold text-xs text-darkForest uppercase tracking-wider flex items-center gap-1.5">
                                    <i class="fa-solid fa-qrcode text-red-500"></i> Scan QRIS
                                </span>
                                <span class="px-2 py-0.5 rounded bg-red-600 text-white text-[10px] font-bold">Semua Pembayaran</span>
                            </div>

                            <!-- Barcode QRIS Image -->
                            <div class="relative max-w-[200px] mx-auto p-2 bg-slate-50 rounded-2xl border border-slate-200 shadow-inner group cursor-pointer" onclick="openQrisModal()">
                                <img src="" alt="QRIS Yayasan Cahaya Quran Pelita Hati" class="w-full h-auto object-contain rounded-lg">
                                <div class="absolute inset-0 bg-darkForest/60 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white text-xs font-bold gap-1.5">
                                    <i class="fa-solid fa-expand text-gold text-sm"></i>
                                    <span>Perbesar</span>
                                </div>
                            </div>

                            <div class="space-y-0.5">
                                <h4 class="font-heading font-extrabold text-xs text-darkForest"></h4>
                                <span class="text-[10px] font-mono text-slate-500 block">NMID: </span>
                            </div>

                            <div class="pt-1 flex gap-2">
                                <button type="button" onclick="openQrisModal()" class="w-1/2 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold transition-colors flex items-center justify-center gap-1.5">
                                    <i class="fa-solid fa-magnifying-glass-plus text-primary"></i> Perbesar
                                </button>
                                <a href="" download="QRIS-Yayasan-Cahaya-Quran.png" class="w-1/2 py-2 rounded-xl bg-primaryLight hover:bg-primary hover:text-white text-primary text-xs font-bold transition-all flex items-center justify-center gap-1.5">
                                    <i class="fa-solid fa-download"></i> Unduh
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- WhatsApp Confirmation Button -->
                    <a href="https://wa.me/?text=Assalamu%27alaikum+Yayasan+Cahaya+Qur%27an+Pelita+Hati%2C+saya+sudah+transfer+donasi+%2F+scan+QRIS+dan+ingin+konfirmasi." target="_blank" class="w-full py-3.5 rounded-xl bg-green-600 hover:bg-green-700 text-white font-heading font-bold text-xs sm:text-sm flex items-center justify-center gap-2 transition-all shadow-md">
                        <i class="fa-brands fa-whatsapp text-lg"></i>
                        <span>Konfirmasi Donasi via WhatsApp</span>
                    </a>
                </div>
            </div>

            <!-- Right: Form Kirim Pesan -->
            <div class="lg:col-span-7">
                <div class="bg-white p-6 sm:p-10 rounded-3xl border border-slate-200 shadow-card space-y-6">
                    <div>
                        <span class="text-xs font-bold text-primary uppercase tracking-wider block mb-1">Formulir Kontak</span>
                        <h2 class="font-heading font-extrabold text-2xl text-darkForest">Kirimkan Pesan atau Pertanyaan</h2>
                        <p class="text-xs text-textMuted mt-1">Kami dengan senang hati menerima pertanyaan, saran, atau kerjasama kebaikan.</p>
                    </div>

                    
                    
                    <form id="pesan-form" action="hubungi-kami.php" method="POST" class="space-y-4">
                        <input type="hidden" name="csrf_token" value="">

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-bold text-darkForest mb-1.5">Nama Lengkap <span class="text-red-500">*</span></label>
                                <input type="text" name="name" required placeholder="Contoh: H. Abdullah" class="w-full px-4 py-3 rounded-xl bg-bgSoft border border-slate-200 text-sm text-textDark focus:ring-2 focus:ring-primary focus:bg-white focus:outline-none transition-all">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-darkForest mb-1.5">Nomor WhatsApp / HP</label>
                                <input type="text" name="phone" placeholder="Contoh: 08123456789" class="w-full px-4 py-3 rounded-xl bg-bgSoft border border-slate-200 text-sm text-textDark focus:ring-2 focus:ring-primary focus:bg-white focus:outline-none transition-all">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-bold text-darkForest mb-1.5">Alamat Email</label>
                                <input type="email" name="email" placeholder="nama@email.com" class="w-full px-4 py-3 rounded-xl bg-bgSoft border border-slate-200 text-sm text-textDark focus:ring-2 focus:ring-primary focus:bg-white focus:outline-none transition-all">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-darkForest mb-1.5">Topik / Keperluan</label>
                                <select name="subject" class="w-full px-4 py-3 rounded-xl bg-bgSoft border border-slate-200 text-sm text-textDark focus:ring-2 focus:ring-primary focus:bg-white focus:outline-none transition-all">
                                    <option value="Informasi Pendaftaran Santri">Informasi Pendaftaran Santri</option>
                                    <option value="Konfirmasi Donasi & Infaq">Konfirmasi Donasi & Infaq</option>
                                    <option value="Kemitraan & Kerjasama">Kemitraan & Kerjasama</option>
                                    <option value="Kunjungan ke Pesantren">Kunjungan ke Pesantren</option>
                                    <option value="Lainnya">Lainnya</option>
                                </select>
                            </div>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-darkForest mb-1.5">Isi Pesan <span class="text-red-500">*</span></label>
                            <textarea name="message" rows="5" required placeholder="Tuliskan pesan atau pertanyaan Anda di sini..." class="w-full px-4 py-3 rounded-xl bg-bgSoft border border-slate-200 text-sm text-textDark focus:ring-2 focus:ring-primary focus:bg-white focus:outline-none transition-all"></textarea>
                        </div>

                        <div>
                            <button type="submit" class="w-full py-3.5 rounded-xl bg-primary hover:bg-primaryHover text-white font-heading font-bold text-sm shadow-md transition-all flex items-center justify-center gap-2">
                                <i class="fa-solid fa-paper-plane text-gold"></i>
                                <span>Kirim Pesan Sekarang</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- ================= QRIS FULL ZOOM MODAL ================= -->
<div id="qrisZoomModal" class="fixed inset-0 z-50 bg-black/85 hidden items-center justify-center p-4 backdrop-blur-sm" onclick="closeQrisModal()">
    <div class="bg-white rounded-3xl p-6 sm:p-8 max-w-sm w-full shadow-2xl text-center relative border border-slate-100" onclick="event.stopPropagation()">
        <button onclick="closeQrisModal()" class="absolute top-4 right-4 text-slate-400 hover:text-slate-600 w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center">
            <i class="fa-solid fa-xmark text-base"></i>
        </button>
        <div class="mb-3">
            <span class="px-2.5 py-1 rounded bg-red-600 text-white text-[10px] font-bold uppercase tracking-wider">QRIS Standar Pembayaran</span>
            <h3 class="font-heading font-extrabold text-base text-darkForest mt-1"></h3>
            <p class="text-[11px] font-mono text-slate-500">NMID: </p>
        </div>
        <div class="p-3 bg-slate-50 rounded-2xl border border-slate-200 shadow-inner mb-4">
            <img src="" alt="QRIS Yayasan" class="w-full h-auto object-contain rounded-xl">
        </div>
        <div class="space-y-2">
            <a href="" download="QRIS-Yayasan-Cahaya-Quran.png" class="w-full py-2.5 rounded-xl bg-primary hover:bg-primaryHover text-white font-bold text-xs flex items-center justify-center gap-2 shadow-md transition-all">
                <i class="fa-solid fa-download text-gold"></i>
                <span>Unduh Gambar QRIS</span>
            </a>
            <button onclick="closeQrisModal()" class="w-full py-2 rounded-xl text-slate-500 hover:text-slate-700 text-xs font-semibold">Tutup</button>
        </div>
    </div>
</div>

<script>
    function openQrisModal() {
        const modal = document.getElementById('qrisZoomModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeQrisModal() {
        const modal = document.getElementById('qrisZoomModal');
        modal.classList.remove('flex');
        modal.classList.add('hidden');
    }

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeQrisModal();
        }
    });
</script>

    </main>

    <!-- ================= FOOTER ================= -->
    <footer class="bg-darkForest text-white pt-16 pb-12 border-t border-white/10 mt-auto">
        <div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-12 gap-10 lg:gap-12 pb-12">
                
                <!-- Brand Info -->
                <div class="md:col-span-4 space-y-4">
                    <a href="index.php" class="inline-block">
                        <img src="images/logo-footer.png" alt="Yayasan Cahaya Qur&#039;an Pelita Hati" class="h-20 sm:h-[84px] w-auto max-w-[320px] object-contain drop-shadow">
                    </a>
                    <p class="text-sm text-white/70 leading-relaxed">
                        Wisdom from the Qur&#039;an, Dignity in Life. Lembaga dakwah, pendidikan tahfidz Al-Qur'an, pemberdayaan yatim & dhuafa, serta kemandirian ekonomi pesantren.
                    </p>
                    <div class="flex items-center gap-3 pt-2">
                                                <a href="https://facebook.com/cahayaquranpelitahati" target="_blank" class="w-9 h-9 rounded-lg bg-white/10 hover:bg-gold hover:text-white flex items-center justify-center transition-colors text-white/80">
                            <i class="fa-brands fa-facebook-f"></i>
                        </a>
                                                                        <a href="https://instagram.com/cahayaquranpelitahati" target="_blank" class="w-9 h-9 rounded-lg bg-white/10 hover:bg-gold hover:text-white flex items-center justify-center transition-colors text-white/80">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                                                                        <a href="https://youtube.com/@cahayaquranpelitahati" target="_blank" class="w-9 h-9 rounded-lg bg-white/10 hover:bg-gold hover:text-white flex items-center justify-center transition-colors text-white/80">
                            <i class="fa-brands fa-youtube"></i>
                        </a>
                                                <a href="https://wa.me/6285122956101" target="_blank" class="w-9 h-9 rounded-lg bg-white/10 hover:bg-green-600 hover:text-white flex items-center justify-center transition-colors text-white/80">
                            <i class="fa-brands fa-whatsapp"></i>
                        </a>
                    </div>
                </div>

                <!-- Navigasi -->
                <div class="md:col-span-2">
                    <h4 class="font-heading font-bold text-base mb-4 text-white">Navigasi</h4>
                    <ul class="space-y-2.5 text-sm text-white/60">
                        <li><a href="index.php" class="hover:text-gold transition-colors flex items-center gap-2"><i class="fa-solid fa-house fa-fw text-gold text-xs"></i> Beranda</a></li>
                        <li><a href="tentang-kami.php" class="hover:text-gold transition-colors flex items-center gap-2"><i class="fa-solid fa-users fa-fw text-gold text-xs"></i> Profile Kami</a></li>
                        <li><a href="program.php" class="hover:text-gold transition-colors flex items-center gap-2"><i class="fa-solid fa-layer-group fa-fw text-gold text-xs"></i> Program Prioritas</a></li>
                        <li><a href="struktur-pengurus.php" class="hover:text-gold transition-colors flex items-center gap-2"><i class="fa-solid fa-sitemap fa-fw text-gold text-xs"></i> Struktur Pengurus</a></li>
                        <li><a href="galeri.php" class="hover:text-gold transition-colors flex items-center gap-2"><i class="fa-solid fa-images fa-fw text-gold text-xs"></i> Galeri Kegiatan</a></li>
                        <li><a href="artikel.php" class="hover:text-gold transition-colors flex items-center gap-2"><i class="fa-solid fa-newspaper fa-fw text-gold text-xs"></i> Artikel</a></li>
                    </ul>
                </div>

                <!-- Program Prioritas -->
                <div class="md:col-span-3">
                    <h4 class="font-heading font-bold text-base mb-4 text-white">Program Prioritas</h4>
                    <ul class="space-y-2.5 text-sm text-white/60">
                                                                                    <li>
                                    <a href="program-detail.php?slug=education-development-spmd" class="hover:text-gold transition-colors flex items-center gap-2">
                                        <i class="fa-solid fa-angles-right fa-fw text-gold text-xs"></i> Education Development                                    </a>
                                </li>
                                                            <li>
                                    <a href="program-detail.php?slug=social-development" class="hover:text-gold transition-colors flex items-center gap-2">
                                        <i class="fa-solid fa-angles-right fa-fw text-gold text-xs"></i> Social Development                                    </a>
                                </li>
                                                            <li>
                                    <a href="program-detail.php?slug=spiritual-journey-pesantren-lansia" class="hover:text-gold transition-colors flex items-center gap-2">
                                        <i class="fa-solid fa-angles-right fa-fw text-gold text-xs"></i> Spiritual Journey                                    </a>
                                </li>
                                                            <li>
                                    <a href="program-detail.php?slug=economic-development-guru-ngaji-umkm" class="hover:text-gold transition-colors flex items-center gap-2">
                                        <i class="fa-solid fa-angles-right fa-fw text-gold text-xs"></i> Economic Development                                    </a>
                                </li>
                                                                        </ul>
                </div>

                <!-- Rekening & Kontak -->
                <div class="md:col-span-3">
                    <h4 class="font-heading font-bold text-base mb-4 text-white">Kontak & Rekening</h4>
                    <ul class="space-y-2.5 text-sm text-white/60">
                        <li class="flex items-center gap-2">
                            <i class="fa-brands fa-whatsapp text-gold w-4 text-center"></i> 
                            <a href="https://wa.me/6285122956101" target="_blank" class="hover:text-gold transition-colors">0851-2295-6101</a>
                        </li>
                        <li class="flex items-center gap-2">
                            <i class="fa-solid fa-globe text-gold w-4 text-center"></i> 
                            <a href="https://cahayaquran.or.id" target="_blank" class="hover:text-gold transition-colors">cahayaquran.or.id</a>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="fa-solid fa-building-columns text-gold w-4 text-center mt-1"></i> 
                            <div>
                                <span class="text-white/90 font-medium">Bank Syariah Indonesia (BSI):</span><br>
                                <span class="font-mono text-gold cursor-pointer" onclick="copyToClipboard('7234567890', 'Nomor rekening BSI disalin!')">7234567890 <i class="fa-regular fa-copy text-xs ml-1"></i></span>
                            </div>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="fa-solid fa-building-columns text-gold w-4 text-center mt-1"></i> 
                            <div>
                                <span class="text-white/90 font-medium">Bank Mandiri:</span><br>
                                <span class="font-mono text-gold cursor-pointer" onclick="copyToClipboard('1330023456789', 'Nomor rekening Mandiri disalin!')">1330023456789 <i class="fa-regular fa-copy text-xs ml-1"></i></span>
                            </div>
                        </li>
                        <li class="flex items-center gap-2 pt-1">
                            <i class="fa-solid fa-qrcode text-gold w-4 text-center"></i> 
                            <a href="hubungi-kami.php#donasi" class="text-white/90 hover:text-gold transition-colors font-medium flex items-center gap-1.5">
                                <span>Donasi via QRIS</span>
                                <span class="px-1.5 py-0.5 rounded bg-red-600 text-white text-[9px] font-bold">Scan</span>
                            </a>
                        </li>
                    </ul>
                </div>

            </div>

            <div class="pt-8 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between text-xs text-white/50 gap-4">
                <p>&copy; 2026 Yayasan Cahaya Qur&#039;an Pelita Hati. All rights reserved.</p>
                <div class="flex gap-6 items-center">
                    <a href="tentang-kami.php" class="hover:text-white transition-colors">Tentang Kami</a>
                    <a href="hubungi-kami.php" class="hover:text-white transition-colors">Hubungi Kami</a>
                    <a href="admin/login.php" class="hover:text-gold transition-colors flex items-center gap-1"><i class="fa-solid fa-lock text-[10px]"></i> Login Admin</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Spacer for Mobile Bottom Nav -->
    <div class="h-20 md:hidden"></div>

    <!-- ================= STICKY MOBILE BOTTOM NAVIGATION ================= -->
    <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-slate-200/80 shadow-[0_-4px_20px_rgba(0,0,0,0.08)] z-40 px-2 py-1 flex justify-around items-end text-[11px] font-heading font-bold">
        <!-- 1. Home -->
        <a href="index.php" class="flex flex-col items-center py-1 px-1.5 text-gold transition-colors flex-1 text-center">
            <i class="fa-solid fa-house text-lg mb-0.5"></i>
            <span>Home</span>
        </a>

        <!-- 2. Profile -->
        <a href="tentang-kami.php" class="flex flex-col items-center py-1 px-1.5 text-primary hover:text-gold transition-colors flex-1 text-center">
            <i class="fa-solid fa-mosque text-lg mb-0.5"></i>
            <span>Profile</span>
        </a>

        <!-- 3. Donasi -->
        <a href="hubungi-kami.php#donasi" class="flex flex-col items-center -mt-5 flex-1 text-center group">
            <div class="relative w-12 h-12 rounded-full bg-gradient-to-tr from-amber-600 via-orange-500 to-amber-500 text-white flex items-center justify-center shadow-lg border-2 border-white animate-donate-blink">
                <span class="absolute -inset-0.5 rounded-full bg-orange-400/40 animate-ping pointer-events-none"></span>
                <i class="fa-solid fa-hand-holding-heart text-xl text-white drop-shadow relative z-10"></i>
            </div>
            <span class="text-orange-600 font-extrabold text-[11px] mt-0.5 tracking-tight">Donasi</span>
        </a>

        <!-- 4. Gallery -->
        <a href="galeri.php" class="flex flex-col items-center py-1 px-1.5 text-primary hover:text-gold transition-colors flex-1 text-center">
            <i class="fa-solid fa-images text-lg mb-0.5"></i>
            <span>Gallery</span>
        </a>

        <!-- 5. Artikel -->
        <a href="artikel.php" class="flex flex-col items-center py-1 px-1.5 text-primary hover:text-gold transition-colors flex-1 text-center">
            <i class="fa-solid fa-newspaper text-lg mb-0.5"></i>
            <span>Artikel</span>
        </a>
    </nav>

    <!-- Global Javascripts -->
    <script>
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        if (mobileMenuBtn && mobileMenu) {
            mobileMenuBtn.addEventListener('click', toggleMobileMenu);
        }

        function toggleMobileMenu() {
            if (mobileMenu) {
                mobileMenu.classList.toggle('hidden');
            }
        }

        function showToast(message, iconClass = 'fa-solid fa-circle-check text-gold') {
            const toast = document.getElementById('toastNotification');
            const toastMsg = document.getElementById('toastMessage');
            const toastIcon = document.getElementById('toastIcon');
            if (!toast || !toastMsg) return;
            toastMsg.innerText = message;
            if (toastIcon) {
                toastIcon.className = iconClass + ' text-lg';
            }
            toast.classList.remove('translate-y-20', 'opacity-0');
            toast.classList.add('translate-y-0', 'opacity-100');
            setTimeout(() => {
                toast.classList.remove('translate-y-0', 'opacity-100');
                toast.classList.add('translate-y-20', 'opacity-0');
            }, 3500);
        }

        function copyToClipboard(text, message = 'Teks berhasil disalin!') {
            navigator.clipboard.writeText(text).then(() => {
                showToast(message);
            }).catch(err => {
                showToast('Gagal menyalin teks.', 'fa-solid fa-circle-xmark text-red-400');
            });
        }
    </script>
</body>
</html>