<?php
require_once __DIR__ . '/config/app.php';
require_once __DIR__ . '/config/reports.php';

try {
    $sliders     = db()->query('SELECT * FROM sliders WHERE is_active = 1 ORDER BY sort_order ASC')->fetchAll();
    // Kartu "Program Penyaluran" hanya utk program yg dipromosikan ke publik --
    // BAZNAS (kemitraan) dan 2 kategori administratif (Operasional Amil,
    // Administrasi Bank) sengaja tidak ditampilkan sebagai kartu program.
    $programs    = db()->query('SELECT * FROM programs WHERE is_active = 1 AND slug NOT IN ("baznas","operasional-amil","administrasi-bank-keluar") ORDER BY sort_order ASC')->fetchAll();
    $articles    = db()->query('SELECT id, title, slug, excerpt, thumbnail, category, published_at FROM articles WHERE is_published = 1 ORDER BY published_at DESC LIMIT 6')->fetchAll();
    $unitSummary = getUnitSummary();
    $lastUpload  = db()->query('SELECT created_at FROM uploads WHERE status = "processed" ORDER BY created_at DESC LIMIT 1')->fetchColumn();
} catch (PDOException $e) {
    $sliders = $programs = $articles = $unitSummary = [];
    $lastUpload = null;
}

$stats     = getStatistics();
$chartData = getMonthlyTrend();
// Tampilkan 12 bulan terakhir yang tersedia -- bukan filter tahun hardcode
// seperti sebelumnya (mencari label yang mengandung '2026'), supaya tetap
// benar tanpa perlu diubah lagi begitu masuk tahun berikutnya.
$chartData   = array_slice($chartData, -12);
$chartLabels = array_column($chartData, 'label');
$chartMasuk       = array_map(fn($r) => round($r['masuk'] / 1000000, 1), $chartData);
$chartTersalurkan = array_map(fn($r) => round($r['tersalurkan'] / 1000000, 1), $chartData);

// FIX KONSISTENSI: total_masuk & total_tersalurkan sekarang dihitung LIVE
// (masing-masing dari income_category_distributions & program_distributions
// lewat computeGlobalTotals()) -- tidak ada lagi angka manual terpisah yang
// bisa beda dari jumlah rinciannya sendiri.
$totals           = computeGlobalTotals();
$totalMasuk       = $totals['total_masuk'] ?? 0;
$totalTersalurkan = $totals['total_tersalurkan'] ?? 0;
$saldoBerjalan    = $totals['total_saldo'] ?? 0;
$jumlahMuzaki     = (int)($stats['jumlah_muzaki']['stat_value'] ?? 0);
$penerimaManfaat  = (int)($stats['penerima_manfaat']['stat_value'] ?? 0);
$persenSalur      = $totalMasuk > 0 ? round(($totalTersalurkan / $totalMasuk) * 100, 1) : 0;

try {
    // FIX KONSISTENSI: BAZNAS sekarang diperlakukan SAMA seperti 4 program
    // lain -- dihitung live dari program_distributions (dengan filter
    // eselon_unit_id = 0, persis seperti computeGlobalTotals()/
    // refreshGlobalStatistics() menghitung total_tersalurkan). Sebelumnya
    // BAZNAS dikecualikan dari query ini lalu ditambahkan manual dari angka
    // statistics.baznas_amount yang terpisah -- itu yang bikin jumlah
    // rincian per program di legend donat bisa tidak sama dengan angka
    // total di tengah donat.
    $progRows = db()->query('
        SELECT p.name, p.slug, COALESCE(SUM(pd.amount),0) as total
        FROM programs p
        LEFT JOIN program_distributions pd ON pd.program_id = p.id AND pd.eselon_unit_id = 0
        WHERE p.is_active = 1
        GROUP BY p.id ORDER BY p.sort_order
    ')->fetchAll();
} catch (PDOException $e) { $progRows = []; }

// FIX: kategori dana terhimpun sekarang live dari income_category_distributions
// (tab "Kategori Dana"), pola query-nya sama persis dengan $progRows di atas.
try {
    $katRows = db()->query('
        SELECT ic.name, ic.slug, ic.color, COALESCE(SUM(icd.amount),0) as total
        FROM income_categories ic
        LEFT JOIN income_category_distributions icd ON icd.category_id = ic.id AND icd.eselon_unit_id = 0
        WHERE ic.is_active = 1
        GROUP BY ic.id ORDER BY ic.sort_order
    ')->fetchAll();
} catch (PDOException $e) { $katRows = []; }

$katMasukLabels = array_column($katRows, 'name') ?: ['Zakat','Infaq','Kebencanaan','Administrasi Bank'];
$katMasukValues = array_map(fn($k) => (int)$k['total'], $katRows) ?: [0,0,0,0];
$katMasukColors = array_map(fn($k) => $k['color'], $katRows) ?: ['#0e7abf','#f6921e','#10b981','#7c3aed'];
$katMasukTotal  = array_sum($katMasukValues);
// Jika belum diinput, tampilkan dari total_masuk sebagai satu slice
if ($katMasukTotal === 0) {
    $katMasukLabels = ['Total Dana Terhimpun'];
    $katMasukValues = [$totalMasuk];
    $katMasukColors = ['#0e7abf'];
    $katMasukTotal  = $totalMasuk;
}

$progNames   = array_column($progRows, 'name') ?: ['Beasiswa','Santunan','Sarana Ibadah','Kebencanaan','Dikelola BAZNAS'];
$progValues  = array_map(fn($p) => (int)$p['total'], $progRows) ?: [0,0,0,0,0];
$progTotal   = array_sum($progValues);
$donutColors = ['#10b981','#f6921e','#0e7abf','#7c3aed','#1d4ed8','#f43f5e','#64748b'];
$bulan_id = ['','Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
// "Data per" selalu menampilkan tanggal hari ini saat halaman dibuka,
// bukan tanggal upload data terakhir -- supaya selalu terlihat up-to-date.
$tglTerkini  = date('d').' '.$bulan_id[(int)date('n')].' '.date('Y');
$currentPage = 'home';

// === REKENING TRANSFER (untuk ditampilkan di sebelah QRIS) ===
// Diambil dari flyer resmi UPZ BAZNAS Kemendikdasmen. Kalau nomor rekening
// berubah, cukup edit array ini -- tidak perlu ubah bagian HTML di bawah.
$bankAccounts = [
    ['name' => 'BSI',     'sub' => 'Bank Syariah Indonesia', 'number' => '730-2404-695',       'color' => '#00786f'],
    ['name' => 'BRI',     'sub' => 'Bank Rakyat Indonesia',  'number' => '1220-01-000810-56-5','color' => '#00529c'],
    ['name' => 'KB Bank', 'sub' => 'Syariah',                'number' => '77-100-599-60',      'color' => '#f7941e'],
];
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Portal transparansi pengelolaan zakat Unit Pengumpul Zakat Kementerian Pendidikan Dasar dan Menengah.">
    <title>UPZ Kemendikdasmen - Transparansi Zakat</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=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/main.css">
    <style>
        .container { max-width: 1400px; padding: 0 20px; }
        .dashboard-section { padding: 32px 0; }
        .kpi-card { padding: 18px; }
    </style>
    <style>
        .dashboard-section { background:var(--gray-50); padding:40px 0; }
        .dashboard-hero {
            position: relative;
            overflow: hidden;
            margin-top: var(--navbar-h);
            background: linear-gradient(90deg, #0b1220 0%, #1e3a8a 45%, #2563eb 100%);
            padding: 32px 0;
        }
        .dashboard-hero .dashboard-section-header { margin-bottom: 0; }
        .dashboard-hero .dashboard-section-title { color: white; }
        .dashboard-hero .dashboard-section-sub { color: rgba(255,255,255,0.9); }
        .dashboard-hero .data-terkini-badge {
            background: rgba(255,255,255,0.12);
            border: 1.5px solid rgba(255,255,255,0.35);
            color: white;
            backdrop-filter: blur(4px);
        }
        .dashboard-section-header { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:20px; }
        .dashboard-section-title { font-family:var(--font-display); font-size:28px; font-weight:800; color:var(--gray-900); }
        .dashboard-section-sub { font-size:15px; font-weight:500; color:var(--gray-700); margin-top:4px; }
        .data-terkini-badge { display:inline-flex; align-items:center; gap:8px; background:var(--green-50); border:1.5px solid var(--green-200); border-radius:var(--radius-sm); padding:7px 16px; font-size:14px; font-weight:700; color:var(--mint-700); }
        .donut-legend { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
        .donut-legend-item { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; padding:7px 10px; border-radius:8px; background:var(--gray-50); }
        .donut-legend-left { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
        .donut-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
        .donut-legend-name { color:var(--gray-800); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .donut-legend-amt { display:flex; align-items:baseline; justify-content:flex-end; gap:4px; width:180px; flex-shrink:0; }
        .donut-legend-rp { flex:1; font-family:var(--font-display); font-weight:800; color:var(--gray-900); font-size:13px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
        .donut-legend-pct { width:52px; text-align:right; font-size:12px; font-weight:600; color:var(--gray-800); }
        .baznas-legend { background:#eff6ff; border:1px solid #bfdbfe; }
        .baznas-legend .donut-legend-name { color:#1d4ed8; font-weight:700; }
        [data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .5s ease,transform .5s ease; }
        [data-reveal].revealed { opacity:1; transform:translateY(0); }
        [data-reveal-delay="1"] { transition-delay:.1s; }
        [data-reveal-delay="2"] { transition-delay:.2s; }
        [data-reveal-delay="3"] { transition-delay:.3s; }
        [data-reveal-delay="4"] { transition-delay:.4s; }
        .articles-layout-featured,.article-featured,.article-featured-thumb,.articles-related,.article-related-item { max-width:100%; min-width:0; }
        .article-featured-thumb img,.article-related-thumb img { max-width:100%; width:100%; display:block; }
        @media(max-width:1200px) { .articles-layout-featured { grid-template-columns:1fr !important; } .articles-related { grid-template-columns:1fr !important; } }
        @media(max-width:768px) { .dashboard-section-header { flex-direction:column; align-items:flex-start; } .dashboard-section-title { font-size:22px; } }

        /* === REKENING TRANSFER (di sebelah QRIS) === */
        .bank-accounts { margin-top: 24px; }
        .bank-accounts-label { font-size: 14px; font-weight: 700; color: var(--gray-700, #374151); margin-bottom: 12px; }
        .bank-account-item {
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            background: #fff; border: 1.5px solid var(--gray-200, #e5e7eb);
            border-radius: 999px; padding: 10px 10px 10px 20px; margin-bottom: 10px;
            transition: border-color .15s, box-shadow .15s;
        }
        .bank-account-item:hover { border-color: var(--gray-300, #d1d5db); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
        .bank-account-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 90px; }
        .bank-account-name { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
        .bank-account-sub { font-size: 11px; color: var(--gray-500, #6b7280); font-weight: 500; }
        .bank-account-number-wrap { display: flex; align-items: center; gap: 10px; }
        .bank-account-number { font-weight: 700; font-size: 15.5px; color: var(--gray-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
        .bank-copy-btn {
            display: flex; align-items: center; justify-content: center;
            width: 30px; height: 30px; border-radius: 50%; border: none; flex-shrink: 0;
            background: var(--gray-100, #f3f4f6); color: var(--gray-600, #4b5563); cursor: pointer;
            transition: background .15s, color .15s;
        }
        .bank-copy-btn:hover { background: var(--gray-200, #e5e7eb); }
        .bank-copy-btn.copied { background: var(--green-100, #d1fae5); color: var(--mint-600, #059669); }
        .bank-account-an { font-size: 12.5px; font-weight: 600; color: var(--gray-500, #6b7280); text-align: left; margin-top: 6px; letter-spacing: .2px; }
        @media (max-width: 480px) {
            .bank-account-item { flex-wrap: wrap; padding: 10px 14px; }
            .bank-account-number { font-size: 14px; }
        }
    </style>
</head>
<body>

<?php include __DIR__ . '/components/navbar.php'; ?>

<!-- DASHBOARD PUBLIK -->
<section class="dashboard-hero" id="dashboard">
    <div class="container">
        <div class="dashboard-section-header" data-reveal>
            <div>
                <div class="dashboard-section-title">Dashboard ZIS</div>
                <div class="dashboard-section-sub">Penghimpunan, penyaluran, dan dampak manfaat zakat UPZ Kemendikdasmen</div>
            </div>
            <div class="data-terkini-badge">
                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                Data per <?= $tglTerkini ?>
            </div>
        </div>
    </div>
</section>

<section class="dashboard-section">
    <div class="container">

        <!-- KPI Cards -->
        <div class="kpi-grid kpi-grid-3" style="margin-bottom:20px;" data-reveal>
            <div class="kpi-card">
                <div class="kpi-label">Saldo Berjalan</div>
                <div class="kpi-value"><?= formatRupiah($saldoBerjalan) ?></div>
            </div>
            <div class="kpi-card">
                <div class="kpi-label">Muzakki</div>
                <div class="kpi-value"><?= formatNumber($jumlahMuzaki) ?></div>
            </div>
            <div class="kpi-card">
                <div class="kpi-label">Penerima Manfaat</div>
                <div class="kpi-value"><?= formatNumber($penerimaManfaat) ?></div>
            </div>
        </div>


       <div class="chart-2col" data-reveal>

    <!-- DONAT 1: Total Dana Terhimpun -->
    <div class="chart-card">
        <div class="chart-header">
            <div>
                <div class="chart-title">Total Dana Terhimpun</div>
                <div class="chart-subtitle">rincian per kategori</div>
            </div>
        </div>
        <div class="donut-wrap">
            <canvas id="terhimpunChart"></canvas>
            <div class="donut-center">
                <div class="donut-center-label">Total Terhimpun</div>
                <div class="donut-center-value"><?= formatRupiah($totalMasuk) ?></div>
            </div>
        </div>
        <div class="donut-legend">
            <?php foreach ($katMasukLabels as $i => $lbl):
                $v   = $katMasukValues[$i] ?? 0;
                $pct = $katMasukTotal > 0 ? round(($v/$katMasukTotal)*100,1) : 0;
                $clr = $katMasukColors[$i] ?? '#9ca3af';
            ?>
            <div class="donut-legend-item">
                <div class="donut-legend-left">
                    <span class="donut-legend-dot" style="background:<?= $clr ?>;"></span>
                    <span class="donut-legend-name"><?= sanitize($lbl) ?></span>
                </div>
                <span class="donut-legend-amt">
                    <span class="donut-legend-rp"><?= formatRupiah($v) ?></span>
                    <span class="donut-legend-pct">(<?= $pct ?>%)</span>
                </span>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- DONAT 2: Total Dana Tersalurkan -->
    <div class="chart-card">
        <div class="chart-header">
            <div>
                <div class="chart-title">Total Dana Tersalurkan</div>
                <div class="chart-subtitle">rincian per program</div>
            </div>
        </div>
        <div class="donut-wrap">
            <canvas id="programChart"></canvas>
            <div class="donut-center">
                <div class="donut-center-label">Total Tersalurkan</div>
                <div class="donut-center-value"><?= formatRupiah($totalTersalurkan) ?></div>
            </div>
        </div>
        <div class="donut-legend">
            <?php foreach ($progNames as $i => $pname):
                $pval  = $progValues[$i] ?? 0;
                $pct   = $progTotal > 0 ? round(($pval / $progTotal) * 100, 1) : 0;
                $color = $donutColors[$i] ?? '#9ca3af';
                $isBaz = stripos($pname, 'baznas') !== false;
            ?>
            <div class="donut-legend-item <?= $isBaz ? 'baznas-legend' : '' ?>">
                <div class="donut-legend-left">
                    <span class="donut-legend-dot" style="background:<?= $color ?>;"></span>
                    <span class="donut-legend-name"><?= sanitize($pname) ?></span>
                </div>
                <span class="donut-legend-amt">
                    <span class="donut-legend-rp"><?= formatRupiah($pval) ?></span>
                    <span class="donut-legend-pct">(<?= $pct ?>%)</span>
                </span>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

</div>

<!-- BATANG: Tren Bulanan (langsung di bawah dua donat) -->
<div class="chart-card" style="margin-top:20px;" data-reveal>
    <div class="chart-header">
        <div>
            <div class="chart-title">Dana Terhimpun &amp; Tersalurkan</div>
            <div class="chart-subtitle">tren bulanan, dalam juta rupiah</div>
        </div>
    </div>
    <div class="bar-wrap"><canvas id="trendChart"></canvas></div>
</div>

<!-- Progress Realisasi (full width, di bawah grid) -->
<div class="card" style="margin-top:16px;margin-bottom:20px;" data-reveal>
    <div class="card-body">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;">
            <div>
                <div style="font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--gray-900);">Realisasi Penyaluran</div>
                <div style="font-size:13.5px;font-weight:500;color:var(--gray-600);">Persentase dana tersalurkan dari total penghimpunan</div>
            </div>
            <div style="font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--mint-600);"><?= $persenSalur ?>%</div>
        </div>
        <div class="progress-bar" style="height:12px;"><div class="progress-fill" style="width:<?= $persenSalur ?>%;"></div></div>
        <div style="display:flex;justify-content:space-between;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--gray-600);">
            <span>Tersalurkan: <?= formatRupiah($totalTersalurkan) ?></span>
            <span>Total terhimpun: <?= formatRupiah($totalMasuk) ?></span>
        </div>
    </div>
</div>

        <!-- Laporan ZIS Unit Utama -->
        <div class="card" data-reveal>
            <div class="card-body" style="padding-bottom:0;">
                <div class="chart-title" style="margin-bottom:16px;">Laporan ZIS Unit Utama</div>
            </div>
            <div style="overflow-x:auto;">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Unit Utama</th>
                            <th>Dana Terhimpun</th>
                    </thead>
                    <tbody>
                        <?php if ($unitSummary): ?>
                        <?php foreach ($unitSummary as $u): ?>
                        <tr>
                            <td style="font-weight:600;"><?= sanitize($u['name']) ?></td>
                            <td style="color:#000;font-weight:600;"><?= formatRupiah((int)$u['masuk']) ?></td>
                        <?php endforeach; ?>
                        <?php else: ?>
                        <tr><td colspan="4" style="text-align:center;color:var(--gray-800);padding:32px;">Belum ada data</td></tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</section>

<!-- TENTANG UPZ -->
<section class="section">
    <div class="container">
        <div class="about-section" data-reveal>
            <div class="about-visual">
                <img src="<?= BASE_URL ?>/assets/img/penyaluran.png" alt="Logo UPZ" class="about-logo"></div>
            <div>
                <span class="section-label">Tentang Kami</span>
                <h2 class="section-title">UPZ Kemendikdasmen</h2>
                <p style="font-size:16px;color:#374151;line-height:1.8;margin-bottom:20px;">Unit Pengumpul Zakat (UPZ) Kementerian Pendidikan Dasar dan Menengah adalah lembaga resmi yang ditunjuk oleh BAZNAS untuk mengelola zakat profesi pegawai negeri sipil di lingkungan Kemendikdasmen.</p>
                <p style="font-size:16px;color:#374151;line-height:1.8;margin-bottom:28px;">Kami berkomitmen mengelola dana zakat secara transparan, profesional, dan sesuai syariat Islam, dengan tujuan memberikan manfaat maksimal bagi mustahik.</p>
                <div class="about-values">
                    <div class="about-value-item"><div class="about-value-icon"><svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div><div><h4>Amanah</h4><p>Pengelolaan dana zakat yang dapat dipercaya dan bertanggung jawab</p></div></div>
                    <div class="about-value-item"><div class="about-value-icon"><svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></div><div><h4>Transparan</h4><p>Laporan keuangan terbuka dan dapat diakses publik secara digital</p></div></div>
                    <div class="about-value-item"><div class="about-value-icon"><svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div><div><h4>Profesional</h4><p>Dikelola oleh tim berpengalaman dengan standar lembaga zakat nasional</p></div></div>
                    <div class="about-value-item"><div class="about-value-icon"><svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg></div><div><h4>Berdampak</h4><p>Program penyaluran yang tepat sasaran dan terukur dampaknya</p></div></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- PROGRAM -->
<section class="section section-alt">
    <div class="container">
        <div class="section-header section-header-center" data-reveal>
            <span class="section-label">Program Penyaluran</span>
            <h2 class="section-title">Prioritas Distribusi Zakat</h2>
            <p class="section-desc">Dana zakat disalurkan melalui program-program terstruktur untuk memastikan kebermanfaatan yang maksimal.</p>
        </div>
        <div class="programs-grid">
            <?php
            $programIcons = [
                'beasiswa'    => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0112 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>',
                'santunan'    => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>',
                'ibadah'      => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>',
                'kebencanaan' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>',
            ];
            $programDescs = [
                'beasiswa'    => 'Beasiswa bagi peserta didik berprestasi dari keluarga kurang mampu di lingkungan Kemendikdasmen.',
                'santunan'    => 'Bantuan tunai dan sembako bagi dhuafa, lansia, dan anak yatim piatu yang membutuhkan.',
                'ibadah'      => 'Pembangunan dan renovasi fasilitas ibadah di lingkungan Kemendikdasmen dan sekitarnya.',
                'kebencanaan' => 'Respon cepat bantuan korban bencana alam dan pemulihan pasca bencana.',
            ];
            foreach ($programs as $i => $program):
                $icon = $programIcons[$program['slug']] ?? $programIcons['beasiswa'];
                $desc = $programDescs[$program['slug']] ?? $program['description'];
            ?>
            <div class="program-card" data-reveal data-reveal-delay="<?= $i + 1 ?>">
                <div class="program-icon"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><?= $icon ?></svg></div>
                <div class="program-name"><?= sanitize($program['name']) ?></div>
                <div class="program-desc"><?= sanitize($desc) ?></div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- ARTIKEL -->
<?php if ($articles): ?>
<section class="section">
    <div class="container">
        <div class="section-header" data-reveal>
            <span class="section-label">Artikel &amp; Kegiatan</span>
            <h2 class="section-title">Berita Terbaru</h2>
        </div>
        <div class="articles-layout-featured">
            <?php if (isset($articles[0])): ?>
            <article class="article-featured" data-reveal>
                <a href="<?= BASE_URL ?>/pages/artikel-detail.php?slug=<?= urlencode($articles[0]['slug']) ?>">
                    <div class="article-featured-thumb">
                        <?php if ($articles[0]['thumbnail']): ?>
                        <img src="<?= sanitize($articles[0]['thumbnail']) ?>" alt="<?= sanitize($articles[0]['title']) ?>" onerror="this.style.display='none';this.nextElementSibling.style.display='block';">
                        <div style="display:none;width:100%;height:100%;background:linear-gradient(135deg,#10b981,#059669);"></div>
                        <?php else: ?><div style="width:100%;height:100%;background:linear-gradient(135deg,#10b981,#059669);"></div><?php endif; ?>
                        <div class="article-featured-overlay"><div class="article-featured-meta"><?php if ($articles[0]['category']): ?><span class="article-tag"><?= sanitize($articles[0]['category']) ?></span><?php endif; ?></div></div>
                    </div>
                    <div class="article-featured-content">
                        <h3><?= sanitize($articles[0]['title']) ?></h3>
                        <p><?= sanitize($articles[0]['excerpt']) ?></p>
                        <span class="article-date"><svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg><?= date('d M Y', strtotime($articles[0]['published_at'])) ?></span>
                    </div>
                </a>
            </article>
            <?php endif; ?>
            <div class="articles-related">
                <?php for ($i = 1; $i < min(count($articles), 6); $i++): $article = $articles[$i]; ?>
                <article class="article-related-item" data-reveal data-reveal-delay="<?= $i ?>">
                    <a href="<?= BASE_URL ?>/pages/artikel-detail.php?slug=<?= urlencode($article['slug']) ?>">
                        <div class="article-related-thumb">
                            <?php if ($article['thumbnail']): ?><img src="<?= sanitize($article['thumbnail']) ?>" alt="<?= sanitize($article['title']) ?>" onerror="this.style.display='none';this.nextElementSibling.style.display='block';"><div style="display:none;width:100%;height:100%;background:linear-gradient(135deg,#10b981,#059669);"></div><?php else: ?><div style="width:100%;height:100%;background:linear-gradient(135deg,#10b981,#059669);"></div><?php endif; ?>
                        </div>
                        <div class="article-related-content">
                            <h4><?= sanitize($article['title']) ?></h4>
                            <span class="article-date"><svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg><?= date('d M Y', strtotime($article['published_at'])) ?></span>
                        </div>
                    </a>
                </article>
                <?php endfor; ?>
            </div>
        </div>
        <div style="text-align:center;margin-top:40px;" data-reveal>
            <a href="<?= BASE_URL ?>/pages/artikel.php" class="btn btn-outline btn-lg">Lihat Semua Artikel</a>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- QR DONASI -->
<section class="section qr-donation-section">
    <div class="container">
        <div class="qr-donation-content" data-reveal>
            <div class="qr-donation-image"><div class="qr-frame"><img src="<?= BASE_URL ?>/assets/img/qr-donasi.png" alt="QR Donasi" loading="lazy"></div></div>
            <div class="qr-donation-text">
                <h2>QRIS Infaq &amp; Sedekah</h2>
                <p>Tunaikan infaq dan sedekah Anda dengan mudah melalui QRIS. Cukup scan kode QR menggunakan aplikasi pembayaran favorit Anda.</p>
                <p>Setiap kontribusi yang diberikan akan disalurkan untuk mendukung program pendidikan, sosial, dan kemanusiaan yang dikelola secara amanah dan transparan.</p>
                <p>Terima kasih atas kepedulian dan kebaikan Anda. Semoga menjadi amal jariyah yang membawa manfaat bagi sesama serta keberkahan bagi kehidupan.</p>

                <!-- === REKENING TRANSFER === -->
                <div class="bank-accounts">
                    <div class="bank-accounts-label">Atau transfer melalui rekening UPZ Baznas Kemendikdasmen:</div>
                    <?php foreach ($bankAccounts as $bank): ?>
                    <div class="bank-account-item">
                        <div class="bank-account-info">
                            <div class="bank-account-name" style="color:<?= $bank['color'] ?>"><?= sanitize($bank['name']) ?></div>
                            <div class="bank-account-sub"><?= sanitize($bank['sub']) ?></div>
                        </div>
                        <div class="bank-account-number-wrap">
                            <span class="bank-account-number"><?= sanitize($bank['number']) ?></span>
                            <button type="button" class="bank-copy-btn" data-copy="<?= sanitize(str_replace('-', '', $bank['number'])) ?>" title="Salin nomor rekening" aria-label="Salin nomor rekening <?= sanitize($bank['name']) ?>">
                                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                            </button>
                        </div>
                    </div>
                    <?php endforeach; ?>
                    <div class="bank-account-an">a.n. UPZ BAZNAS KEMENDIKDASMEN</div>
                </div>
                <!-- === END REKENING TRANSFER === -->

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

<!-- CTA PENDAFTARAN MUZAKI (khusus karyawan/pegawai) -->
<section class="section" style="padding-top:0;">
    <div class="container">
        <div class="cta-daftar" data-reveal>
            <div class="cta-daftar-text">
                <span class="section-label" style="color:rgba(255,255,255,0.85);">Untuk Pegawai Kemendikdasmen</span>
                <h2>Belum Terdaftar sebagai Muzaki?</h2>
                <p>Daftarkan diri Anda sebagai muzaki UPZ Kemendikdasmen agar zakat profesi dapat dikelola secara resmi, tercatat, dan tersalurkan dengan transparan.</p>
            </div>
            <!-- TODO: ganti "#" di bawah ini dengan link form pendaftaran muzaki yang sebenarnya -->
            <a href="https://s.id/formulirzakatkemendikdasmen" target="_blank" rel="noopener" class="btn btn-lg cta-daftar-btn">
                Isi Form Pendaftaran
                <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>
    </div>
</section>

<?php include __DIR__ . '/components/footer.php'; ?>

<script src="<?= BASE_URL ?>/assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
Chart.defaults.font.family = "'Inter', sans-serif";
Chart.defaults.color = '#6b7280';

new Chart(document.getElementById('trendChart'), {
    type: 'bar',
    data: {
        labels: <?= json_encode($chartLabels ?: ['Mar','Apr','Mei','Jun','Jul','Ags']) ?>,
        datasets: [
            { label:'Dana Terhimpun',   data: <?= json_encode($chartMasuk ?: [65,70,68,72,75,78]) ?>, backgroundColor:'#10b981', borderRadius:5, borderSkipped:false },
            { label:'Dana Tersalurkan', data: <?= json_encode($chartTersalurkan ?: [45,48,52,55,58,60]) ?>, backgroundColor:'#6ee7b7', borderRadius:5, borderSkipped:false }
        ]
    },
    options: {
        responsive:true, maintainAspectRatio:false,
        plugins: { legend:{ position:'bottom', labels:{ boxWidth:12, padding:14 } }, tooltip:{ callbacks:{ label: ctx => ' '+ctx.dataset.label+': Rp '+ctx.parsed.y+' jt' } } },
        scales: { x:{ grid:{display:false}, border:{display:false} }, y:{ grid:{color:'#f3f4f6'}, border:{display:false}, ticks:{callback: v => 'Rp '+v+'jt'} } }
    }
});

new Chart(document.getElementById('terhimpunChart'), {
    type: 'doughnut',
    data: {
        labels: <?= json_encode($katMasukLabels) ?>,
        datasets: [{ data: <?= json_encode($katMasukTotal > 0 ? $katMasukValues : [$totalMasuk]) ?>, backgroundColor: <?= json_encode($katMasukColors) ?>, borderWidth:2, borderColor:'#ffffff', hoverOffset:6 }]
    },
    options: {
        responsive:true, maintainAspectRatio:false, cutout:'68%',
        plugins: {
            legend:{ display:false },
            tooltip: {
    callbacks: {
        label: function(ctx) {
            const total = ctx.dataset.data.reduce((a,b)=>a+b,0);
            const pct   = total > 0 ? ((ctx.parsed / total) * 100).toFixed(1) : 0;

            return 'Rp ' + ctx.parsed.toLocaleString('id-ID') + ' (' + pct + '%)';
            }}}
        }
    }
});

new Chart(document.getElementById('programChart'), {
    type: 'doughnut',
    data: {
        labels: <?= json_encode($progNames) ?>,
        datasets: [{ data: <?= json_encode(array_sum($progValues) > 0 ? $progValues : [35,25,20,15,5]) ?>, backgroundColor: <?= json_encode($donutColors) ?>, borderWidth:2, borderColor:'#ffffff', hoverOffset:6 }]
    },
    options: {
        responsive:true, maintainAspectRatio:false, cutout:'68%',
        plugins: {
            legend:{ display:false },
            tooltip: {
    callbacks: {
        label: function(ctx) {
            const total = ctx.dataset.data.reduce((a,b)=>a+b,0);
            const pct   = total > 0 ? ((ctx.parsed / total) * 100).toFixed(1) : 0;

            return 'Rp ' + ctx.parsed.toLocaleString('id-ID') + ' (' + pct + '%)';
            }}}
        }
    }
});

// Scroll reveal
const io = new IntersectionObserver(entries => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('revealed'); io.unobserve(e.target); } });
}, { threshold:0.1 });
document.querySelectorAll('[data-reveal]').forEach(el => io.observe(el));

// Tombol salin nomor rekening
document.querySelectorAll('.bank-copy-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        const number = btn.dataset.copy;
        navigator.clipboard.writeText(number).then(() => {
            btn.classList.add('copied');
            setTimeout(() => btn.classList.remove('copied'), 1500);
        }).catch(() => {
            // fallback kalau clipboard API tidak tersedia (mis. http non-secure)
            const temp = document.createElement('textarea');
            temp.value = number;
            document.body.appendChild(temp);
            temp.select();
            document.execCommand('copy');
            document.body.removeChild(temp);
            btn.classList.add('copied');
            setTimeout(() => btn.classList.remove('copied'), 1500);
        });
    });
});
</script>
</body>
</html>