<?php
// Halaman tentang-kami.php (Tentang Kami)
$pageTitle = 'Tentang Kami';
$activePage = 'tentang';
require_once '../includes/header.php';

// Ambil data profil yayasan
$db = dbConnect();
$db->query("SELECT * FROM profil_yayasan LIMIT 1");
$yayasan = $db->single();

// Ambil data tim yayasan (pengurus)
$db->query("SELECT * FROM users WHERE role IN ('ketua', 'bendahara', 'sekretaris') ORDER BY 
           CASE 
               WHEN role = 'ketua' THEN 1
               WHEN role = 'bendahara' THEN 2
               WHEN role = 'sekretaris' THEN 3
               ELSE 4
           END");
$pengurus = $db->resultSet();

// Ambil data statistik
$db->query("SELECT COUNT(DISTINCT k.id) as total_kampanye,
            (SELECT COUNT(DISTINCT user_id) FROM donasi WHERE status = 'diverifikasi') as total_donatur,
            (SELECT SUM(jumlah) FROM donasi WHERE status = 'diverifikasi') as total_donasi
            FROM kampanye k");
$statistik = $db->single();
?>

<!-- Hero Section Kecil -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h1 class="fw-bold mb-4">Tentang Kami</h1>
                <p class="lead">Mengenal lebih dekat Yayasan Pundi Amal Mulia</p>
            </div>
        </div>
    </div>
</section>

<!-- Profil Yayasan Section -->
<section class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <div class="about-img">
                    <?php if (isset($yayasan) && !empty($yayasan->foto)): ?>
                        <img src="<?= SITE_URL ?>/assets/uploads/profil/<?= $yayasan->foto ?>" alt="Yayasan Pundi Amal Mulia" class="img-fluid rounded shadow">
                    <?php else: ?>
                        <img src="<?= SITE_URL ?>/assets/img/about.jpg" alt="Yayasan Pundi Amal Mulia" class="img-fluid rounded shadow">
                    <?php endif; ?>
                </div>
            </div>
            <div class="col-lg-6">
                <h2 class="fw-bold mb-4">Profil Yayasan</h2>
                <?php if (isset($yayasan)): ?>
                    <div class="mb-4">
                        <?= nl2br($yayasan->sejarah ?? 'Informasi sejarah yayasan belum tersedia.') ?>
                    </div>
                <?php else: ?>
                    <p>Informasi profil yayasan belum tersedia.</p>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<!-- Visi dan Misi Section -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h2 class="fw-bold mb-4">Visi & Misi</h2>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6 mb-4 mb-md-0">
                <div class="card h-100">
                    <div class="card-body text-center p-4">
                        <div class="mb-4">
                            <i class="fas fa-eye text-success" style="font-size: 3rem;"></i>
                        </div>
                        <h3 class="fw-bold mb-3">Visi</h3>
                        <?php if (isset($yayasan) && !empty($yayasan->visi)): ?>
                            <div><?= nl2br($yayasan->visi) ?></div>
                        <?php else: ?>
                            <p>Menjadi yayasan terpercaya dalam penyaluran donasi untuk membantu sesama.</p>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-body text-center p-4">
                        <div class="mb-4">
                            <i class="fas fa-bullseye text-success" style="font-size: 3rem;"></i>
                        </div>
                        <h3 class="fw-bold mb-3">Misi</h3>
                        <?php if (isset($yayasan) && !empty($yayasan->misi)): ?>
                            <div><?= nl2br($yayasan->misi) ?></div>
                        <?php else: ?>
                            <ul class="text-start">
                                <li>Menghimpun dana dari masyarakat untuk membantu mereka yang membutuhkan</li>
                                <li>Menyalurkan bantuan secara tepat sasaran dan transparan</li>
                                <li>Memberdayakan masyarakat kurang mampu melalui program-program berkelanjutan</li>
                                <li>Membangun kesadaran masyarakat untuk berbagi dan membantu sesama</li>
                            </ul>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Program Yayasan Section -->
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h2 class="fw-bold mb-4">Program Yayasan</h2>
                <p>Yayasan Pundi Amal Mulia memiliki berbagai program untuk membantu masyarakat yang membutuhkan</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6 col-lg-3 mb-4">
                <div class="card h-100">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="fas fa-hands-helping text-success" style="font-size: 2.5rem;"></i>
                        </div>
                        <h4 class="fw-bold">Bantuan Sosial</h4>
                        <p>Program bantuan langsung untuk masyarakat kurang mampu dan terdampak bencana.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3 mb-4">
                <div class="card h-100">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="fas fa-school text-success" style="font-size: 2.5rem;"></i>
                        </div>
                        <h4 class="fw-bold">Pendidikan</h4>
                        <p>Program beasiswa dan bantuan pendidikan untuk anak-anak dari keluarga kurang mampu.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3 mb-4">
                <div class="card h-100">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="fas fa-heartbeat text-success" style="font-size: 2.5rem;"></i>
                        </div>
                        <h4 class="fw-bold">Kesehatan</h4>
                        <p>Program bantuan biaya pengobatan dan layanan kesehatan untuk masyarakat kurang mampu.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3 mb-4">
                <div class="card h-100">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="fas fa-seedling text-success" style="font-size: 2.5rem;"></i>
                        </div>
                        <h4 class="fw-bold">Pemberdayaan</h4>
                        <p>Program pemberdayaan ekonomi dan keterampilan untuk meningkatkan kesejahteraan masyarakat.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Pengurus Yayasan Section -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h2 class="fw-bold mb-4">Pengurus Yayasan</h2>
                <p>Kenali para pengurus yang mengelola Yayasan Pundi Amal Mulia</p>
            </div>
        </div>
        
        <div class="row">
            <?php if (empty($pengurus)): ?>
                <div class="col-12 text-center">
                    <p>Informasi pengurus yayasan belum tersedia.</p>
                </div>
            <?php else: ?>
                <?php foreach ($pengurus as $item): ?>
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="card h-100">
                            <div class="card-body text-center p-4">
                                <div class="mb-3">
                                    <div class="avatar mx-auto mb-3">
                                        <i class="fas fa-user-circle text-success" style="font-size: 5rem;"></i>
                                    </div>
                                    <h4 class="fw-bold"><?= $item->nama_lengkap ?></h4>
                                    <p class="text-muted"><?= getRoleName($item->role) ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- Statistik Section -->
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-lg-8 text-center">
                <h2 class="fw-bold mb-4">Capaian Kami</h2>
                <p>Berikut adalah capaian Yayasan Pundi Amal Mulia sejak didirikan</p>
            </div>
        </div>
        
        <div class="row text-center">
            <div class="col-md-4 mb-4 mb-md-0">
                <div class="card py-4 h-100">
                    <div class="card-body">
                        <i class="fas fa-hand-holding-heart text-success mb-3" style="font-size: 3rem;"></i>
                        <h2 class="fw-bold"><?= isset($statistik) ? rupiah($statistik->total_donasi ?? 0) : rupiah(0) ?></h2>
                        <p class="text-muted mb-0">Total Donasi Terkumpul</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 mb-4 mb-md-0">
                <div class="card py-4 h-100">
                    <div class="card-body">
                        <i class="fas fa-users text-success mb-3" style="font-size: 3rem;"></i>
                        <h2 class="fw-bold"><?= isset($statistik) ? $statistik->total_donatur ?? 0 : 0 ?></h2>
                        <p class="text-muted mb-0">Donatur Aktif</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card py-4 h-100">
                    <div class="card-body">
                        <i class="fas fa-project-diagram text-success mb-3" style="font-size: 3rem;"></i>
                        <h2 class="fw-bold"><?= isset($statistik) ? $statistik->total_kampanye ?? 0 : 0 ?></h2>
                        <p class="text-muted mb-0">Kampanye Terlaksana</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="py-5 bg-success text-white text-center">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <h2 class="fw-bold mb-3">Bergabunglah Dalam Kebaikan</h2>
                <p class="mb-4">Dengan berdonasi, Anda telah ikut berkontribusi dalam menciptakan perubahan positif bagi mereka yang membutuhkan.</p>
                <a href="<?= SITE_URL ?>/pages/kampanye.php" class="btn btn-light btn-lg px-4">Donasi Sekarang</a>
            </div>
        </div>
    </div>
</section>

<?php require_once '../includes/footer.php'; ?>