.-.-.-.-.-

<?php 
include 'includes/config.php';
include 'includes/functions.php';
?>
<?php include 'includes/header.php'; ?>

<div class="whatsapp-float">
    <div class="whatsapp-icon">
        <i class="bi bi-whatsapp"></i>
    </div>
    <div class="whatsapp-tooltip">
        Chat with us on WhatsApp!
    </div>
</div>

<section class="hero-slider-section">
    <div class="hero-slider">
        
        <div class="slide active">
            <div class="slide-image">
                <img src="assets/images/py.jpg" alt="AI Technology">
            </div>
            <div class="slide-overlay"></div>
            <div class="container">
                <div class="row align-items-center min-vh-80">
                    <div class="col-lg-6">
                        <div class="slide-content">
                            <h1 class="slide-title">Master Python programming and machine learning</h1>
                            <p class="slide-description">Learn cutting-edge AI technologies from industry experts. Build intelligent systems and transform industries with machine learning.</p>
                            <div class="slide-buttons">
                                <a href="courses.php" class="btn btn-primary btn-lg">Explore Python Courses</a>
                                <a href="about.php" class="btn btn-outline-light btn-lg">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="slide">
            <div class="slide-image">
                <img src="assets/images/web.jpg" alt="Web Development">
            </div>
            <div class="slide-overlay"></div>
            <div class="container">
                <div class="row align-items-center min-vh-80">
                    <div class="col-lg-6">
                        <div class="slide-content">
                            <h1 class="slide-title">Modern Web Development</h1>
                            <p class="slide-description">Master full-stack development with the latest frameworks. Build responsive, scalable applications that power the modern web.</p>
                            <div class="slide-buttons">
                                <a href="courses.php" class="btn btn-primary btn-lg">View Web Courses</a>
                                <a href="about.php" class="btn btn-outline-light btn-lg">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="slide">
            <div class="slide-image">
                <img src="assets/images/data.jpg" alt="Data Science">
            </div>
            <div class="slide-overlay"></div>
            <div class="container">
                <div class="row align-items-center min-vh-80">
                    <div class="col-lg-6">
                        <div class="slide-content">
                            <h1 class="slide-title">Data Science & Analytics</h1>
                            <p class="slide-description">Unlock insights from data with powerful analytics tools. Learn to extract meaningful patterns and drive data-informed decisions.</p>
                            <div class="slide-buttons">
                                <a href="courses.php" class="btn btn-primary btn-lg">Discover Data Courses</a>
                                <a href="about.php" class="btn btn-outline-light btn-lg">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    <div class="slider-controls">
        <button class="slider-prev" aria-label="Previous slide">
            <i class="bi bi-chevron-left"></i>
        </button>
        <button class="slider-next" aria-label="Next slide">
            <i class="bi bi-chevron-right"></i>
        </button>
    </div>
    
    
    <div class="slider-indicators">
        <button class="indicator active" data-slide="0" aria-label="Go to slide 1"></button>
        <button class="indicator" data-slide="1" aria-label="Go to slide 2"></button>
        <button class="indicator" data-slide="2" aria-label="Go to slide 3"></button>
    </div>
</section>

<section class="categories-section py-5">
    <div class="container">
        <h2 class="section-title text-center mb-5">Browse by Category</h2>
        <div class="row">
            <?php
            // Get categories with course counts
            $categories_sql = "SELECT c.*, COUNT(co.id) as course_count 
                              FROM categories c 
                              LEFT JOIN courses co ON c.id = co.category_id 
                              GROUP BY c.id 
                              ORDER BY course_count DESC 
                              LIMIT 6";
            $categories_result = $conn->query($categories_sql);
            
            if ($categories_result && $categories_result->num_rows > 0) {
                while($category = $categories_result->fetch_assoc()) {
            ?>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card category-card h-100 text-center">
                    <div class="card-body">
                        <div class="category-icon mb-3">
                            <i class="bi bi-laptop fs-1 text-primary"></i>
                        </div>
                        <h5 class="card-title"><?php echo htmlspecialchars($category['name']); ?></h5>
                        <p class="card-text text-muted"><?php echo htmlspecialchars($category['description']); ?></p>
                        <div class="course-count">
                            <span class="badge bg-primary rounded-pill"><?php echo $category['course_count']; ?> Courses</span>
                        </div>
                        <a href="courses.php?category=<?php echo $category['id']; ?>" class="btn btn-outline-primary btn-sm mt-3">Explore Category</a>
                    </div>
                </div>
            </div>
            <?php 
                }
            } else {
                echo '<div class="col-12 text-center"><p>No categories available.</p></div>';
            }
            ?>
        </div>
        <div class="text-center mt-4">
            <a href="courses.php" class="btn btn-outline-primary">View All Categories</a>
        </div>
    </div>
</section>

<section class="popular-courses py-5">
    <div class="container">
        <h2 class="section-title text-center mb-5">Popular Courses</h2>
        <div class="row">
            <?php
            $popular_courses = getPopularCourses($conn, 3);
            
            if ($popular_courses && $popular_courses->num_rows > 0) {
                while($course = $popular_courses->fetch_assoc()) {
                    $discount = 0;
                    if($course['old_price'] > 0 && $course['current_price'] > 0) {
                        $discount = round((($course['old_price'] - $course['current_price']) / $course['old_price']) * 100);
                    }
                    
                    // Enhanced image path handling
                    $image_path = $course['image'];
                    $display_image = 'assets/images/course-placeholder.jpg'; // Default fallback
                    
                    if (!empty($image_path)) {
                        // Remove any leading/trailing spaces
                        $image_path = trim($image_path);
                        
                        // Case 1: Full URL (http:// or https://)
                        if (preg_match('/^https?:\/\//', $image_path)) {
                            $display_image = $image_path;
                        }
                        // Case 2: Absolute server path (/var/www/...)
                        elseif (strpos($image_path, '/') === 0) {
                            // Convert absolute path to relative if possible
                            $doc_root = $_SERVER['DOCUMENT_ROOT'];
                            if (strpos($image_path, $doc_root) === 0) {
                                $display_image = str_replace($doc_root, '', $image_path);
                            } else {
                                $display_image = $image_path;
                            }
                        }
                        // Case 3: Already relative path with assets/
                        elseif (strpos($image_path, 'assets/') === 0) {
                            $display_image = $image_path;
                        }
                        // Case 4: Just a filename - assume it's in courses directory
                        else {
                            $display_image = 'assets/images/courses/' . $image_path;
                        }
                        
                        // Final check - does the file exist?
                        if (strpos($display_image, 'http') !== 0) {
                            if (!file_exists($display_image)) {
                                $display_image = 'assets/images/course-placeholder.jpg';
                            }
                        }
                    }
            ?>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card course-card h-100">
                    <?php if($discount > 0): ?>
                    <span class="discount-badge"><?php echo $discount; ?>% OFF</span>
                    <?php endif; ?>
                    
                    <?php if($course['is_popular']): ?>
                    <span class="popular-badge">🔥 Popular</span>
                    <?php endif; ?>
                    
                    <img src="<?php echo $display_image; ?>" 
                         class="card-img-top" 
                         alt="<?php echo htmlspecialchars($course['title']); ?>"
                         onerror="this.onerror=null; this.src='assets/images/test.png';"
                         style="height: 200px; object-fit: cover;">
                    <div class="card-body">
                        <h5 class="card-title"><?php echo htmlspecialchars($course['title']); ?></h5>
                        <p class="card-text text-muted"><?php echo substr(htmlspecialchars($course['description']), 0, 100); ?>...</p>
                        <div class="course-meta mb-2">
                            <small class="text-muted">
                                <i class="bi bi-person me-1"></i>By <?php echo htmlspecialchars($course['instructor_name']); ?>
                            </small>
                        </div>
                        <div class="price-section">
                            <?php if($course['old_price'] > 0 && $course['current_price'] > 0): ?>
                            <span class="old-price text-muted">$<?php echo number_format($course['old_price'], 2); ?></span>
                            <?php endif; ?>
                            <span class="current-price fw-bold text-primary">
                                <?php echo ($course['current_price'] == 0) ? 'Free' : '$' . number_format($course['current_price'], 2); ?>
                            </span>
                        </div>
                    </div>
                    <div class="card-footer bg-transparent">
                        <div class="d-grid gap-2">
                            <a href="course-details.php?id=<?php echo $course['id']; ?>" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-eye me-1"></i>View Details
                            </a>
                            <?php if(isset($_SESSION['user_id'])): ?>
                            <button class="btn btn-primary btn-sm add-to-cart" data-course-id="<?php echo $course['id']; ?>">
                                <i class="bi bi-cart-plus me-1"></i>Add to Cart
                            </button>
                            <?php else: ?>
                            <a href="login.php" class="btn btn-primary btn-sm">
                                <i class="bi bi-lock me-1"></i>Login to Enroll
                            </a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
            <?php 
                }
            } else {
                echo '<div class="col-12 text-center py-4">
                        <i class="bi bi-book fs-1 text-muted mb-3"></i>
                        <h5 class="text-muted">No Popular Courses Available</h5>
                        <p class="text-muted">Check back later for featured courses.</p>
                        <a href="courses.php" class="btn btn-outline-primary">Browse All Courses</a>
                      </div>';
            }
            ?>
        </div>
        <div class="text-center mt-4">
            <a href="courses.php" class="btn btn-outline-primary btn-lg">
                <i class="bi bi-arrow-right me-2"></i>View All Courses
            </a>
        </div>
    </div>
</section>

.whatsapp-float.show {
    transform: translateY(0);
    opacity: 1;
}

.whatsapp-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    position: relative;
    animation: pulse 2s infinite;
}

.whatsapp-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
}

.whatsapp-icon i {
    font-size: 28px;
    color: white;
}

.whatsapp-tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(-5px);
}

@keyframes pulse {
    0% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(37, 211, 102, 0.7);
    }
    100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    }
}

/* Hero Slider Styles */
.hero-slider-section {
    position: relative;
    overflow: hidden;
    height: 80vh;
    min-height: 600px;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
}

.slide.active {
    opacity: 1;
}

.slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
}

.slide-content {
    position: relative;
    z-index: 2;
    color: white;
    padding: 2rem 0;
}

.slide-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.slide-description {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 90%;
    opacity: 0.9;
}

.slide-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.min-vh-80 {
    min-height: 80vh;
}

/* Slider Controls */
.slider-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
    z-index: 3;
    transform: translateY(-50%);
}

.slider-prev,
.slider-next {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.slider-prev:hover,
.slider-next:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Slider Indicators */
.slider-indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 3;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: white;
    transform: scale(1.2);
}

/* Categories Section */
.categories-section {
    background: #fff;
}

.category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.category-icon {
    color: #4e73df;
}

.category-card .card-title {
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.category-card .card-text {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.course-count .badge {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

/* Popular Courses */
.popular-courses {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.course-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.discount-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(45deg, #dc3545, #e35d6a);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.popular-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(45deg, #ff6b35, #ff8e53);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.card-img-top {
    border-radius: 0;
    transition: transform 0.3s ease;
}

.course-card:hover .card-img-top {
    transform: scale(1.05);
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    line-height: 1.4;
}

.card-text {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.course-meta {
    margin-bottom: 1rem;
}

.price-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1rem 0;
}

.old-price {
    text-decoration: line-through;
    font-size: 0.9rem;
    color: #6c757d !important;
}

.current-price {
    font-size: 1.25rem;
    font-weight: 700;
}

.card-footer {
    border-top: 1px solid #e9ecef;
    padding: 1.25rem 1.5rem;
    background: transparent;
}

.section-title {
    font-weight: 800;
    color: #2c3e50;
    font-size: 2.5rem;
    margin-bottom: 3rem !important;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(45deg, #4e73df, #224abe);
    border-radius: 2px;
}

.btn-outline-primary {
    border-width: 2px;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(78, 115, 223, 0.3);
}

.btn-primary {
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(78, 115, 223, 0.4);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-slider-section {
        height: 70vh;
        min-height: 500px;
    }
    
    .slide-title {
        font-size: 2.5rem;
    }
    
    .slide-description {
        font-size: 1.1rem;
        max-width: 100%;
    }
    
    .slide-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .slider-controls {
        padding: 0 1rem;
    }
    
    .slider-prev,
    .slider-next {
        width: 40px;
        height: 40px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .course-card, .category-card {
        margin-bottom: 2rem;
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    /* WhatsApp button mobile adjustments */
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
    }
    
    .whatsapp-icon {
        width: 55px;
        height: 55px;
    }
    
    .whatsapp-icon i {
        font-size: 24px;
    }
    
    .whatsapp-tooltip {
        display: none; /* Hide tooltip on mobile */
    }
}

@media (max-width: 576px) {
    .hero-slider-section {
        height: 60vh;
        min-height: 400px;
    }
    
    .slide-title {
        font-size: 2rem;
    }
    
    .slide-description {
        font-size: 1rem;
    }
    
    .slide-buttons .btn {
        width: 100%;
        text-align: center;
    }
    
    .whatsapp-float {
        bottom: 15px;
        right: 15px;
    }
    
    .whatsapp-icon {
        width: 50px;
        height: 50px;
    }
    
    .whatsapp-icon i {
        font-size: 22px;
    }
}
</style>

<section class="stats-section py-5 bg-light">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-3">
                <h3 class="stat-number">10+</h3>
                <p class="stat-label">Students Enrolled</p>
            </div>
            <div class="col-md-3">
                <h3 class="stat-number">50+</h3>
                <p class="stat-label">Courses Available</p>
            </div>
            <div class="col-md-3">
                <h3 class="stat-number">30+</h3>
                <p class="stat-label">Expert Instructors</p>
            </div>
            <div class="col-md-3">
                <h3 class="stat-number">24/7</h3>
                <p class="stat-label">Live Sessions</p>
            </div>
        </div>
    </div>
</section>

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

/home/users/unlimited/www/gorideadmin.codeskitter.site/../nigeria.codeskitter.site/index.php