<div class="container py-4">
    <!-- Header -->
    <div class="text-center mb-5">
        <span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-2 mb-2 fw-semibold font-outfit text-uppercase">MENTOR NETWORK</span>
        <h2 class="fw-bold font-outfit text-dark display-6">Connect with Verified Mentors</h2>
        <p class="text-muted mx-auto" style="max-width: 540px;">Gain wisdom from university seniors and graduates. Search by university name, program of study, or career track to book a counseling session.</p>
    </div>

    <!-- Search / Filter Box -->
    <div class="card border-0 shadow-sm mb-5 p-4 bg-glass">
        <form action="<?= APP_URL ?>/mentors" method="GET">
            <div class="row g-3">
                <div class="col-lg-3 col-md-6">
                    <label class="form-label text-xs fw-semibold text-muted">SEARCH NAME</label>
                    <input type="text" class="form-control bg-light border-0 rounded-3" name="q" value="<?= htmlspecialchars($filters['q'] ?? '') ?>" placeholder="e.g. Samuel, Akua...">
                </div>

                <div class="col-lg-3 col-md-6">
                    <label class="form-label text-xs fw-semibold text-muted">UNIVERSITY REPRESENTED</label>
                    <select class="form-select bg-light border-0" name="university_id">
                        <option value="">All Universities</option>
                        <?php foreach ($universities as $uni): ?>
                            <option value="<?= $uni['id'] ?>" <?= ($filters['university_id'] ?? 0) == $uni['id'] ? 'selected' : '' ?>><?= htmlspecialchars($uni['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <div class="col-lg-3 col-md-6">
                    <label class="form-label text-xs fw-semibold text-muted">STUDY PROGRAM / CAREER</label>
                    <input type="text" class="form-control bg-light border-0 rounded-3" name="program" value="<?= htmlspecialchars($filters['program'] ?? '') ?>" placeholder="e.g. Computer Science, Law...">
                </div>

                <div class="col-lg-3 col-md-6 d-flex align-items-end">
                    <div class="w-100 d-flex gap-2">
                        <button type="submit" class="btn btn-primary rounded-3 flex-grow-1 py-2 font-outfit fw-bold shadow-sm"><i class="fa-solid fa-magnifying-glass me-2"></i>Filter</button>
                        <?php if (Auth::isStudent()): ?>
                            <a href="<?= APP_URL ?>/mentors/matched" class="btn btn-outline-primary rounded-3 py-2 font-outfit fw-bold shadow-sm" title="AI Matcher"><i class="fa-solid fa-wand-magic-sparkles"></i> Matches</a>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Mentors List -->
    <div class="row g-4 mb-4">
        <?php if (!empty($mentors)): ?>
            <?php foreach ($mentors as $mentor): ?>
                <div class="col-lg-4 col-md-6">
                    <div class="card border-0 shadow-sm h-100 card-hover-effect">
                        <div class="card-body p-4 d-flex flex-column text-center">
                            <div class="position-relative d-inline-block mx-auto mb-3">
                                <img src="<?= avatarUrl($mentor['avatar'], $mentor['first_name'] . ' ' . $mentor['last_name']) ?>" alt="Avatar" class="rounded-circle border border-3 border-white shadow-sm" style="width: 60px; height: 60px; object-fit: cover;">
                                <?php if ($mentor['is_available']): ?>
                                    <span class="position-absolute bottom-0 end-0 bg-success border border-white rounded-circle p-1" style="width: 15px; height: 15px;" title="Available"></span>
                                <?php endif; ?>
                            </div>

                            <h5 class="fw-bold font-outfit text-dark mb-1"><?= htmlspecialchars($mentor['first_name']) ?> <?= htmlspecialchars($mentor['last_name']) ?></h5>
                            <span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-1 text-2xs align-self-center mb-3">Verified Mentor</span>

                            <p class="text-xs text-muted mb-2"><i class="fa-solid fa-school text-primary me-1"></i> <?= htmlspecialchars($mentor['university_name'] ?? 'University') ?></p>
                            <p class="text-xs text-muted mb-3"><i class="fa-solid fa-book text-primary me-1"></i> <?= htmlspecialchars($mentor['program'] ?? 'Academic Program') ?></p>

                            <p class="text-muted text-xs flex-grow-1 lead-sm"><?= truncate(htmlspecialchars($mentor['bio']), 100) ?></p>

                            <hr class="my-3 text-muted opacity-25">

                            <div class="d-flex gap-2">
                                <a href="<?= APP_URL ?>/mentors/<?= $mentor['user_id'] ?>" class="btn btn-sm btn-primary rounded-pill px-4 flex-grow-1 font-outfit fw-bold shadow-2xs">View Profile</a>
                                <a href="<?= APP_URL ?>/sessions/book/<?= $mentor['user_id'] ?>" class="btn btn-sm btn-outline-primary rounded-pill px-3" title="Schedule Class"><i class="fa-regular fa-calendar-check"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="col-12 text-center py-5">
                <i class="fa-solid fa-user-slash display-4 text-muted mb-3"></i>
                <h5 class="fw-bold text-muted">No Mentors Found</h5>
                <p class="text-muted text-xs">Try searching for other programs, skills, or universities.</p>
            </div>
        <?php endif; ?>
    </div>

    <!-- Pagination -->
    <div class="mt-4">
        <?= paginationLinks($pagination, APP_URL . '/mentors') ?>
    </div>
</div>
