<?php 
require_once 'db_connect.php';
include 'header.php'; 

// Fetch Board Members from Database
$board_members = [];
try {
    $stmt = $pdo->query("SELECT * FROM team_members WHERE team_type = 'board' AND status = 'active' ORDER BY id ASC");
    $board_members = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {}
?>

<style>
    .board-hero { background: linear-gradient(135deg, rgba(2, 44, 34, 0.95), rgba(6, 78, 59, 0.85)), url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=800&q=60') center/cover; padding: 80px 0; color: white; text-align: center; border-bottom: 5px solid var(--accent); }
    .member-card-premium { background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid #e2e8f0; transition: 0.4s; height: 100%; }
    .member-card-premium:hover { transform: translateY(-8px); border-color: var(--accent); box-shadow: 0 15px 35px rgba(212, 175, 55, 0.15); }
    .member-img { width: 100%; height: 320px; object-fit: cover; border-bottom: 4px solid var(--accent); }
    .member-content { padding: 25px; text-align: center; }
</style>

<section class="board-hero">
    <div class="container"><h1 class="fw-bold">Executive Board</h1><p class="lead opacity-75">Leadership for Academic Excellence</p></div>
</section>

<section class="py-5 bg-light">
    <div class="container">
        <div class="row g-4 justify-content-center">
            <?php if(!empty($board_members)): foreach($board_members as $m): ?>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="member-card-premium shadow-sm">
                    <img src="<?= htmlspecialchars($m['image_url']) ?>" loading="lazy" onerror="this.src='https://via.placeholder.com/400x500?text=Ahmad+Academy'" class="member-img">
                    <div class="member-content">
                        <span class="text-uppercase fw-bold text-warning small"><?= htmlspecialchars($m['role_or_spec']) ?></span>
                        <h5 class="fw-bold mt-2" style="color: var(--primary-dark);"><?= htmlspecialchars($m['name']) ?></h5>
                    </div>
                </div>
            </div>
            <?php endforeach; else: ?>
                <div class="col-12 text-center py-5"><h5 class="text-muted">Board members list is being updated.</h5></div>
            <?php endif; ?>
        </div>
    </div>
</section>

<?php include 'footer.php'; ?>