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

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

<style>
    .teacher-hero { background: linear-gradient(rgba(6, 78, 59, 0.92), rgba(2, 44, 34, 0.95)), url('https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?auto=format&fit=crop&w=800&q=60') center/cover; padding: 80px 0; color: #fff; text-align: center; border-bottom: 5px solid var(--accent); }
    .teacher-card-modern { background: #fff; border-radius: 15px; overflow: hidden; border: 1px solid #eef2f6; transition: 0.4s; height: 100%; }
    .teacher-card-modern:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
    .teacher-img { width: 100%; height: 280px; object-fit: cover; }
    .teacher-badge { background: var(--accent); color: var(--primary-dark); padding: 4px 12px; border-radius: 50px; font-weight: 700; font-size: 11px; margin-top: -30px; position: relative; display: inline-block; }
</style>

<section class="teacher-hero">
    <div class="container"><h1 class="fw-bold">Teachers Panel</h1><p class="lead opacity-75">Certified & Caring Quranic Tutors</p></div>
</section>

<section class="py-5 bg-white">
    <div class="container">
        <div class="row g-4">
            <?php if(!empty($teachers)): foreach($teachers as $t): ?>
            <div class="col-12 col-md-6 col-lg-3">
                <div class="teacher-card-modern shadow-sm text-center">
                    <img src="<?= htmlspecialchars($t['image_url']) ?>" loading="lazy" onerror="this.src='https://via.placeholder.com/300x400?text=Teacher'" class="teacher-img">
                    <div class="teacher-badge">Certified Tutor</div>
                    <div class="p-4">
                        <h6 class="fw-bold m-0"><?= htmlspecialchars($t['name']) ?></h6>
                        <small class="text-muted"><?= htmlspecialchars($t['role_or_spec']) ?></small>
                    </div>
                </div>
            </div>
            <?php endforeach; else: ?>
                <div class="col-12 text-center py-5"><h5 class="text-muted">Teachers panel is being updated.</h5></div>
            <?php endif; ?>
        </div>
    </div>
</section>

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