<div class="container py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold font-outfit text-dark m-0"><i class="fa-solid fa-wand-magic-sparkles text-success me-2"></i>AI Recommended Scholarships</h2>
            <p class="text-muted mb-0">Personalized scholarship opportunities matched directly to your profile and academic grades.</p>
        </div>
        <a href="<?= APP_URL ?>/scholarships" class="btn btn-outline-secondary rounded-pill px-4">Browse Catalog</a>
    </div>

    <!-- Recommendations Grid -->
    <div class="row g-4">
        <?php if (!empty($recommendations)): ?>
            <?php foreach ($recommendations as $sch): ?>
                <?php
                // Map fit score to color
                $fitColor = 'danger';
                if ($sch['fit_score'] >= 70) $fitColor = 'success';
                elseif ($sch['fit_score'] >= 50) $fitColor = 'warning';
                ?>
                <div class="col-lg-6">
                    <div class="card border-0 shadow-sm h-100 card-hover-effect border-start border-4 border-<?= $fitColor ?>">
                        <div class="card-body p-4 d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <span class="badge bg-success-subtle text-success text-uppercase text-3xs font-outfit mb-2"><?= htmlspecialchars($sch['scholarship_type']) ?> Funding</span>
                                    <h5 class="fw-bold font-outfit text-dark mb-1"><?= htmlspecialchars($sch['name']) ?></h5>
                                    <p class="text-muted text-xs mb-0">Provider: <strong><?= htmlspecialchars($sch['provider']) ?></strong></p>
                                </div>
                                <div class="text-end">
                                    <div class="display-6 fw-bold font-outfit text-<?= $fitColor ?> mb-0"><?= $sch['fit_score'] ?>%</div>
                                    <small class="text-uppercase text-2xs fw-bold text-muted"><?= htmlspecialchars($sch['fit_label']) ?></small>
                                </div>
                            </div>

                            <p class="text-muted text-sm flex-grow-1"><?= truncate(htmlspecialchars($sch['description']), 130) ?></p>

                            <!-- Match Explanations -->
                            <?php if (!empty($sch['fit_reasons'])): ?>
                                <div class="bg-light rounded p-3 mb-3">
                                    <small class="text-xs fw-bold text-dark d-block mb-1"><i class="fa-solid fa-square-poll-vertical me-2 text-primary"></i>Match Highlights</small>
                                    <ul class="list-unstyled text-xs text-muted mb-0">
                                        <?php foreach ($sch['fit_reasons'] as $reason): ?>
                                            <li><i class="fa-solid fa-circle-check text-success me-2"></i> <?= htmlspecialchars($reason) ?></li>
                                        <?php endforeach; ?>
                                    </ul>
                                </div>
                            <?php endif; ?>

                            <div class="d-flex justify-content-between align-items-center mt-auto pt-3 border-top text-xs text-muted">
                                <span class="text-danger fw-bold"><i class="fa-regular fa-clock me-1"></i> Deadline: <?= formatDate($sch['application_deadline']) ?></span>
                                <a href="<?= APP_URL ?>/scholarships/<?= htmlspecialchars($sch['slug']) ?>" class="btn btn-sm btn-outline-success rounded-pill px-3">Unlock Analysis</a>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="col-12 text-center py-5 text-muted">
                <i class="fa-solid fa-wand-magic-sparkles display-4 text-muted mb-3 animate-pulse"></i>
                <h5 class="fw-bold">No Personal Recommendations Yet</h5>
                <p class="text-muted text-xs mx-auto" style="max-width: 360px;">To calculate your matches, we need at least 6 core/elective WASSCE grades entered in your profile.</p>
                <a href="<?= APP_URL ?>/profile/wassce" class="btn btn-primary rounded-pill px-4 mt-2">Manage My Grades</a>
            </div>
        <?php endif; ?>
    </div>
</div>
