<!-- Hero Section -->
<section class="hero-section py-5 position-relative overflow-hidden mb-5" style="background: var(--gradient-hero); color: var(--white);">
    <div class="container py-5">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <span class="badge bg-warning text-dark rounded-pill px-3 py-2 mb-3 fw-bold font-outfit text-uppercase" style="letter-spacing: 1px;">YOUR PATH TO UNIVERSITY</span>
                <h1 class="display-3 fw-extrabold font-outfit text-white mb-4 lh-sm">
                    Discover Your Future & Transition <span class="text-warning">With Confidence</span>
                </h1>
                <p class="lead text-white-50 mb-4 fs-5">
                    BOAFO helps Ghanaian Senior High School students navigate the complex path to tertiary education with AI-powered program recommendations, scholarship matching, and professional mentorship.
                </p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="<?= APP_URL ?>/register" class="btn btn-warning btn-lg rounded-pill px-5 fw-bold shadow-lg text-dark">Start Your Journey</a>
                    <a href="<?= APP_URL ?>/universities" class="btn btn-outline-light btn-lg rounded-pill px-4 fw-bold">Explore Universities</a>
                </div>
            </div>
            <div class="col-lg-6 text-center position-relative">
                <div class="hero-image-wrapper">
                    <!-- A beautiful floating image composition -->
                    <img src="https://images.unsplash.com/photo-1496317899792-9d7dbcd928a1?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Students graduating" class="img-fluid rounded-4 shadow-2xl main-hero-img card-hover-effect" height="500px" width="300px">
                    <!-- Overlay floating badges -->
                    <div class="floating-badge badge-1 glass-card shadow-sm p-3 rounded-3 d-flex align-items-center animate-bounce">
                        <div class="badge-icon-box bg-primary text-white rounded-circle me-3"><i class="fa-solid fa-graduation-cap"></i></div>
                        <div><h6 class="m-0 fw-bold">Admission Ready</h6><small class="text-muted">Grade Analyzer Enabled</small></div>
                    </div>
                    <div class="floating-badge badge-2 glass-card shadow-sm p-3 rounded-3 d-flex align-items-center animate-bounce-slow">
                        <div class="badge-icon-box bg-accent text-white rounded-circle me-3"><i class="fa-solid fa-hand-holding-dollar"></i></div>
                        <div><h6 class="m-0 fw-bold">Scholarship Finder</h6><small class="text-muted">AI Recommendations</small></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Tracker -->
<section class="container mb-5">
    <div class="card border-0 shadow-sm glass-card py-4 px-5">
        <div class="row g-4 text-center">
            <div class="col-md-3 col-6">
                <h2 class="display-5 fw-bold font-outfit text-primary mb-1"><?= $stats['universities'] ?></h2>
                <p class="text-muted m-0 fw-medium">Universities Listed</p>
            </div>
            <div class="col-md-3 col-6">
                <h2 class="display-5 fw-bold font-outfit text-accent mb-1"><?= $stats['scholarships'] ?></h2>
                <p class="text-muted m-0 fw-medium">Active Scholarships</p>
            </div>
            <div class="col-md-3 col-6">
                <h2 class="display-5 fw-bold font-outfit text-primary mb-1"><?= $stats['mentors'] ?></h2>
                <p class="text-muted m-0 fw-medium">Verified Mentors</p>
            </div>
            <div class="col-md-3 col-6">
                <h2 class="display-5 fw-bold font-outfit text-accent mb-1"><?= $stats['students'] ?></h2>
                <p class="text-muted m-0 fw-medium">Active Students</p>
            </div>
        </div>
    </div>
</section>

<!-- Key Core Modules -->
<section class="container py-5 mb-5">
    <div class="text-center mb-5">
        <h2 class="fw-bold font-outfit text-dark display-6">Comprehensive Student Support Tools</h2>
        <p class="text-muted mx-auto" style="max-width: 600px;">Every tool you need to guide you through your High School graduation, career analysis, WASSCE scoring, and college application.</p>
    </div>
    
    <div class="row g-4">
        <div class="col-lg-4 col-md-6">
            <div class="card border-0 shadow-sm p-4 h-100 card-hover-effect bg-primary text-white">
                <div class="feature-icon mb-4"><i class="fa-solid fa-compass display-6 text-warning"></i></div>
                <h5 class="fw-bold font-outfit mb-3">AI Career Guidance</h5>
                <p class="text-white-50 text-sm">Take a complete career interest inventory mapping your skills, passions, and goals to high-growth career industries and university programs.</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card border-0 shadow-sm p-4 h-100 card-hover-effect bg-white border-top border-4 border-warning">
                <div class="feature-icon mb-4"><i class="fa-solid fa-scroll display-6 text-warning"></i></div>
                <h5 class="fw-bold font-outfit mb-3 text-dark">WASSCE Grade Analyzer</h5>
                <p class="text-muted text-sm fw-medium">Input your high school grades to calculate aggregate scores and instantly predict your admission eligibility at major universities in Ghana.</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card border-0 shadow-sm p-4 h-100 card-hover-effect bg-primary text-white">
                <div class="feature-icon mb-4"><i class="fa-solid fa-users-viewfinder display-6 text-warning"></i></div>
                <h5 class="fw-bold font-outfit mb-3">AI-Matched Mentors</h5>
                <p class="text-white-50 text-sm">Get matched to university students, alumni, and counselors from your dream schools who will walk you through student life, exams, and housing.</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card border-0 shadow-sm p-4 h-100 card-hover-effect bg-white border-top border-4 border-primary">
                <div class="feature-icon mb-4"><i class="fa-solid fa-sheet-plastic display-6 text-primary"></i></div>
                <h5 class="fw-bold font-outfit mb-3 text-dark">Scholarship Predictor</h5>
                <p class="text-muted text-sm fw-medium">Unlock fully-funded scholarships and get instant probability scoring showing your likelihood of success based on background criteria.</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card border-0 shadow-sm p-4 h-100 card-hover-effect bg-warning text-dark">
                <div class="feature-icon mb-4"><i class="fa-solid fa-route display-6 text-primary"></i></div>
                <h5 class="fw-bold font-outfit mb-3">Transition Checklist</h5>
                <p class="text-dark opacity-75 text-sm fw-medium">Stay organized with university preparation checklists across housing, fees, documents, logistics, and social preparation.</p>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card border-0 shadow-sm p-4 h-100 card-hover-effect bg-white border-top border-4 border-warning">
                <div class="feature-icon mb-4"><i class="fa-solid fa-graduation-cap display-6 text-warning"></i></div>
                <h5 class="fw-bold font-outfit mb-3 text-dark">Academic Preparation</h5>
                <p class="text-muted text-sm fw-medium">Book custom peer-tutoring sessions with mentors to prepare for freshman university coursework, exams, and math prerequisites.</p>
            </div>
        </div>
    </div>
</section>

<!-- Featured Universities -->
<section class="bg-light-subtle py-5 mb-5 border-top border-bottom">
    <div class="container py-3">
        <div class="d-flex justify-content-between align-items-end mb-4">
            <div>
                <h2 class="fw-bold font-outfit text-dark m-0">Featured Universities</h2>
                <p class="text-muted mb-0">Explore top universities and tertiary institutions in Ghana.</p>
            </div>
            <a href="<?= APP_URL ?>/universities" class="btn btn-outline-primary rounded-pill px-4">View All</a>
        </div>
        
        <div class="row g-4">
            <?php if (!empty($featured_universities)): ?>
                <?php foreach ($featured_universities as $uni): ?>
                    <div class="col-lg-4 col-md-6">
                        <div class="card border-0 shadow-sm h-100 card-hover-effect">
                            <div class="position-relative overflow-hidden" style="height: 180px; background: linear-gradient(135deg, #1a2940 0%, #2f4858 100%);">
                                <?php if ($uni['logo']): ?>
                                    <img src="<?= UPLOAD_URL ?>/logos/<?= htmlspecialchars($uni['logo']) ?>" class="card-img-top opacity-75" alt="<?= htmlspecialchars($uni['name']) ?>" style="height: 100%; object-fit: cover;">
                                <?php else: ?>
                                    <div class="w-100 h-100 d-flex align-items-center justify-content-center text-white-50">
                                        <i class="fa-solid fa-school display-3"></i>
                                    </div>
                                <?php endif; ?>
                                <span class="position-absolute top-3 end-3 badge bg-primary text-uppercase"><?= htmlspecialchars($uni['university_type']) ?></span>
                            </div>
                            <div class="card-body d-flex flex-column p-4">
                                <h5 class="card-title fw-bold font-outfit text-dark text-truncate mb-2"><?= htmlspecialchars($uni['name']) ?></h5>
                                <p class="card-text text-muted text-sm mb-3">
                                    <i class="fa-solid fa-location-dot text-primary me-2"></i> <?= htmlspecialchars($uni['city']) ?>, <?= htmlspecialchars($uni['region_name'] ?? 'Ghana') ?>
                                </p>
                                <p class="card-text text-muted text-sm flex-grow-1">
                                    <?= truncate(htmlspecialchars($uni['description']), 100) ?>
                                </p>
                                <hr class="my-3 text-muted opacity-25">
                                <div class="d-flex justify-content-between align-items-center mt-auto">
                                    <small class="text-muted"><i class="fa-regular fa-calendar me-2"></i> Est: <?= $uni['established_year'] ?? 'N/A' ?></small>
                                    <a href="<?= APP_URL ?>/universities/<?= htmlspecialchars($uni['slug']) ?>" class="btn btn-sm btn-primary rounded-pill px-3">Explore</a>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="col-12 text-center text-muted">
                    No featured universities available.
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- Featured Scholarships -->
<section class="container mb-5">
    <div class="d-flex justify-content-between align-items-end mb-4">
        <div>
            <h2 class="fw-bold font-outfit text-dark m-0">Open Scholarships</h2>
            <p class="text-muted mb-0">Finance your higher education with open local and international scholarships.</p>
        </div>
        <a href="<?= APP_URL ?>/scholarships" class="btn btn-outline-primary rounded-pill px-4">View All</a>
    </div>

    <div class="row g-4">
        <?php if (!empty($featured_scholarships)): ?>
            <?php foreach ($featured_scholarships as $sch): ?>
                <div class="col-lg-4 col-md-6">
                    <div class="card border-0 shadow-sm h-100 card-hover-effect border-start border-4 border-primary">
                        <div class="card-body p-4 d-flex flex-column">
                            <span class="badge bg-primary-subtle text-primary text-uppercase align-self-start mb-3 font-outfit"><?= htmlspecialchars($sch['scholarship_type']) ?> Funding</span>
                            <h5 class="fw-bold font-outfit text-dark mb-2"><?= htmlspecialchars($sch['name']) ?></h5>
                            <p class="text-muted text-xs mb-3">Provided by <strong><?= htmlspecialchars($sch['provider']) ?></strong></p>
                            <p class="text-muted text-sm flex-grow-1"><?= truncate(htmlspecialchars($sch['description']), 120) ?></p>
                            <div class="bg-light rounded p-3 mb-3 d-flex justify-content-between align-items-center text-sm">
                                <span class="text-muted"><i class="fa-solid fa-sack-dollar text-primary me-1"></i> Coverage:</span>
                                <strong class="text-dark"><?= htmlspecialchars($sch['coverage']) ?></strong>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mt-auto">
                                <small class="text-accent fw-bold"><i class="fa-regular fa-clock me-1"></i> Deadline: <?= formatDate($sch['application_deadline']) ?></small>
                                <a href="<?= APP_URL ?>/scholarships/<?= htmlspecialchars($sch['slug']) ?>" class="btn btn-sm btn-outline-primary rounded-pill px-3">View Details</a>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="col-12 text-center text-muted">
                No active scholarships available.
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- Call To Action -->
<section class="container py-5">
    <div class="card border-0 rounded-4 overflow-hidden shadow-lg" style="background: var(--gradient-accent);">
        <div class="row align-items-center g-0">
            <div class="col-md-7 p-5 text-dark">
                <h2 class="display-6 fw-bold font-outfit mb-3">Join the Mentor & Tutor Network</h2>
                <p class="text-dark opacity-75 fw-medium leading-relaxed mb-4">Are you a university student, alumnus, or professional in Ghana? Share your journey, tutor graduating high schoolers, verify your profile, and guide the next generation of students.</p>
                <a href="<?= APP_URL ?>/register" class="btn btn-primary btn-lg rounded-pill px-5 fw-bold shadow-sm">Become a Mentor</a>
            </div>
            <div class="col-md-5 d-none d-md-block text-center p-5">
                <i class="fa-solid fa-user-graduate text-white opacity-50" style="font-size: 15rem; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));"></i>
            </div>
        </div>
    </div>
</section>
