<?php
$is_root_page = true;
require_once('config.php');
include('header/header.php');
?>

<!-- Hero Section -->
<section class="p-0 position-relative overflow-hidden hero-section">
    <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active" style="min-height: 85vh; background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1523050335392-9ae867749296?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center;">
                <div class="container h-100 d-flex align-items-center">
                    <div class="carousel-content text-white animate__animated animate__fadeInLeft" style="max-width: 800px; padding: 100px 0;">
                        <span class="badge bg-primary px-3 py-2 mb-3 text-uppercase fw-bold text-dark">Welcome to HASSER ONLINE</span>
                        <h1 class="display-2 fw-bold mb-4">Empowering Your Future Through <span class="text-primary">Technology</span></h1>
                        <p class="lead mb-5 opacity-75 fs-4">Join Kenya's leading online college for technology and innovation. Start your journey with industry-expert instructors today.</p>
                        <div class="d-flex gap-3 flex-wrap">
                            <a href="main/signup.php" class="btn btn-primary btn-lg px-5 py-3 shadow-lg">Get Started Now</a>
                            <a href="main/courses.php" class="btn btn-outline-light btn-lg px-5 py-3">Explore Courses</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Bar -->
<div class="container position-relative stats-bar-wrapper" style="z-index: 100;">
    <div class="row g-0 justify-content-center">
        <div class="col-lg-10">
            <div class="glass-card p-4 shadow-lg text-center bg-white">
                <div class="row g-4 align-items-center">
                    <div class="col-md-3 border-md-end border-sm-0">
                        <div class="p-2">
                            <h2 class="fw-bold mb-0 text-primary counter" data-target="5000">0</h2>
                            <p class="text-muted small text-uppercase mb-0">Students</p>
                        </div>
                    </div>
                    <div class="col-md-3 border-md-end border-sm-0">
                        <div class="p-2">
                            <h2 class="fw-bold mb-0 text-primary counter" data-target="50">0</h2>
                            <p class="text-muted small text-uppercase mb-0">Lecturers</p>
                        </div>
                    </div>
                    <div class="col-md-3 border-md-end border-sm-0">
                        <div class="p-2">
                            <h2 class="fw-bold mb-0 text-primary counter" data-target="100">0</h2>
                            <p class="text-muted small text-uppercase mb-0">Courses</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-2">
                            <h2 class="fw-bold mb-0 text-primary counter" data-target="98">0</h2>
                            <p class="text-muted small text-uppercase mb-0">Success %</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Services Section -->
<section class="py-5 mt-5" id="services">
    <div class="container py-5">
        <div class="text-center mb-5 animate-on-scroll" data-animation="animate__fadeInUp">
            <h2 class="section-title">Our Professional Services</h2>
            <p class="text-muted">Comprehensive technical solutions beyond traditional learning.</p>
        </div>
        <div class="row g-4">
            <div class="col-lg-3 col-md-6">
                <div class="card h-100 border-0 p-4 service-card bg-white shadow-sm">
                    <div class="card-body text-center">
                        <div class="icon-box bg-yellowish text-primary rounded-circle mx-auto mb-4" style="width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-tools fa-2x"></i>
                        </div>
                        <h4 class="fw-bold h5 mb-3">Computer Repairing</h4>
                        <p class="text-muted small mb-0">Expert diagnosis and repair for all hardware and software issues.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card h-100 border-0 p-4 service-card bg-white shadow-sm">
                    <div class="card-body text-center">
                        <div class="icon-box bg-yellowish text-primary rounded-circle mx-auto mb-4" style="width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-network-wired fa-2x"></i>
                        </div>
                        <h4 class="fw-bold h5 mb-3">Network Installation</h4>
                        <p class="text-muted small mb-0">Professional structured cabling and secure network setups.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card h-100 border-0 p-4 service-card bg-white shadow-sm">
                    <div class="card-body text-center">
                        <div class="icon-box bg-yellowish text-primary rounded-circle mx-auto mb-4" style="width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-print fa-2x"></i>
                        </div>
                        <h4 class="fw-bold h5 mb-3">Printing Services</h4>
                        <p class="text-muted small mb-0">High-quality large scale printing, binding, and laminating.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="card h-100 border-0 p-4 service-card bg-white shadow-sm">
                    <div class="card-body text-center">
                        <div class="icon-box bg-yellowish text-primary rounded-circle mx-auto mb-4" style="width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-shopping-cart fa-2x"></i>
                        </div>
                        <h4 class="fw-bold h5 mb-3">Stationaries</h4>
                        <p class="text-muted small mb-0">Quality printing papers, pens, and office essentials.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Courses -->
<section class="py-5 bg-yellowish">
    <div class="container py-5">
        <div class="text-center mb-5 animate-on-scroll" data-animation="animate__fadeInUp">
            <h2 class="section-title">Featured Courses</h2>
            <p class="text-muted">Master the skills needed for today's job market.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm overflow-hidden">
                    <div class="position-relative">
                        <img src="https://images.unsplash.com/photo-1547658719-da2b51169166" class="card-img-top" alt="Web Dev" style="height: 200px; object-fit: cover;">
                        <span class="badge bg-primary text-dark position-absolute top-0 end-0 m-3">Popular</span>
                    </div>
                    <div class="card-body p-4">
                        <h5 class="fw-bold">Web Development</h5>
                        <p class="text-muted small mb-3">Build modern, responsive websites using the latest technologies.</p>
                        <a href="main/courses.php?cat=web-design" class="btn btn-sm btn-outline-primary">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm overflow-hidden">
                    <div class="position-relative">
                        <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97" class="card-img-top" alt="CS" style="height: 200px; object-fit: cover;">
                        <span class="badge bg-primary text-dark position-absolute top-0 end-0 m-3">New</span>
                    </div>
                    <div class="card-body p-4">
                        <h5 class="fw-bold">Computer Science</h5>
                        <p class="text-muted small mb-3">Master the fundamentals of computing and algorithm design.</p>
                        <a href="main/courses.php?cat=computer-science" class="btn btn-sm btn-outline-primary">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm overflow-hidden">
                    <div class="position-relative">
                        <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c" class="card-img-top" alt="IT" style="height: 200px; object-fit: cover;">
                    </div>
                    <div class="card-body p-4">
                        <h5 class="fw-bold">Information Technology</h5>
                        <p class="text-muted small mb-3">Manage systems and networks for enterprise environments.</p>
                        <a href="main/courses.php?cat=it" class="btn btn-sm btn-outline-primary">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center mt-5">
            <a href="main/courses.php" class="btn btn-primary px-5">View All Courses</a>
        </div>
    </div>
</section>

<!-- Video Section -->
<section class="py-5">
    <div class="container py-5">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <h2 class="fw-bold mb-4">Why Choose HASSER ONLINE?</h2>
                <p class="text-muted mb-4">Our institution is dedicated to providing high-quality technical education that prepares students for real-world challenges. We combine theoretical knowledge with practical skills.</p>
                <ul class="list-unstyled mb-4">
                    <li class="mb-3"><i class="fas fa-check-circle text-primary me-2"></i> Flexible Online Learning</li>
                    <li class="mb-3"><i class="fas fa-check-circle text-primary me-2"></i> Industry-Recognized Certifications</li>
                    <li class="mb-3"><i class="fas fa-check-circle text-primary me-2"></i> Expert Guidance and Mentorship</li>
                    <li class="mb-3"><i class="fas fa-check-circle text-primary me-2"></i> Modern Curriculum Updated Regularly</li>
                </ul>
                <a href="main/about.php" class="btn btn-outline-primary">Discover More About Us</a>
            </div>
            <div class="col-lg-6">
                <div class="ratio ratio-16x9 rounded-4 shadow-lg overflow-hidden border border-5 border-white">
                    <iframe src="images/WhatsApp Video 2026-04-21 at 10.23.36 AM.mp4" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</section>

<?php
$featured_products = [];
try {
    $stmt = $pdo->query("SELECT * FROM products ORDER BY id DESC LIMIT 3");
    $featured_products = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (Throwable $e) {
    $featured_products = [];
}
?>

<?php if (!empty($featured_products)): ?>
<!-- Products Section -->
<section class="py-5">
    <div class="container py-5">
        <div class="d-flex justify-content-between align-items-end gap-3 flex-wrap mb-4">
            <div>
                <p class="text-uppercase text-muted fw-semibold small mb-1">Hassar store</p>
                <h2 class="fw-bold mb-1">Latest Products</h2>
                <p class="text-muted mb-0">Recently added ICT products and learning essentials.</p>
            </div>
            <a href="main/products.php" class="btn btn-outline-primary">
                <i class="fas fa-box-open me-2"></i>View All Products
            </a>
        </div>

        <div class="row g-4">
            <?php foreach ($featured_products as $product): ?>
                <?php
                    $image_src = 'images/lapi.jpg';
                    if (!empty($product['image']) && file_exists(__DIR__ . '/uploads/' . $product['image'])) {
                        $image_src = 'uploads/' . $product['image'];
                    }
                    $stock = (int) ($product['stock'] ?? 0);
                ?>
                <div class="col-md-4">
                    <a href="main/product_view.php?id=<?= $product['id']; ?>" class="product-tile text-decoration-none">
                        <div class="product-image-wrap">
                            <img src="<?= htmlspecialchars($image_src); ?>" alt="<?= htmlspecialchars($product['name']); ?>">
                            <span class="stock-pill <?= $stock > 0 ? 'in-stock' : 'out-stock'; ?>">
                                <?= $stock > 0 ? $stock . ' in stock' : 'Out of stock'; ?>
                            </span>
                        </div>
                        <div class="product-tile-body">
                            <h5 class="fw-bold text-dark mb-2"><?= htmlspecialchars($product['name']); ?></h5>
                            <p class="text-muted small mb-3"><?= htmlspecialchars(substr($product['description'] ?? '', 0, 90)); ?><?= strlen($product['description'] ?? '') > 90 ? '...' : ''; ?></p>
                            <strong class="text-primary">KES <?= number_format($product['price']); ?></strong>
                        </div>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- Call To Action -->
<section class="py-5 bg-dark position-relative overflow-hidden">
    <div class="position-absolute top-0 start-0 w-100 h-100 opacity-25" style="background-image: url('https://www.transparenttextures.com/patterns/cubes.png');"></div>
    <div class="container py-5 position-relative z-1 text-center text-white">
        <h2 class="display-5 fw-bold mb-4">Ready to Transform Your Career?</h2>
        <p class="lead mb-5 opacity-75">Join thousands of students who are already learning and growing with us.</p>
        <div class="d-flex gap-3 justify-content-center flex-wrap">
            <a href="main/signup.php" class="btn btn-primary btn-lg px-5">Join Now</a>
            <a href="main/contacts.php" class="btn btn-outline-light btn-lg px-5">Contact Us</a>
        </div>
    </div>
</section>
<!-- Events & Updates Section -->
<section class="py-5 bg-light">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="section-title">Latest Events & Updates</h2>
            <p class="text-muted">Stay updated with our latest events, adverts and announcements.</p>
        </div>

        <div id="eventsCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-inner">

                <?php
                // ✅ SAMPLE DATA (Replace with DB later)
                $events = [
                    [
                        "title" => "ICT Training Program",
                        "description" => "Join our upcoming ICT training starting May 2026.",
                        "image" => "https://images.unsplash.com/photo-1519389950473-47ba0277781c"
                    ],
                    [
                        "title" => "Data Analysis Bootcamp",
                        "description" => "Master Power BI and data analytics tools.",
                        "image" => "https://images.unsplash.com/photo-1551288049-bebda4e38f71"
                    ],
                    [
                        "title" => "Web Development Intake",
                        "description" => "New students intake now ongoing. Register today.",
                        "image" => "https://images.unsplash.com/photo-1498050108023-c5249f4df085"
                    ]
                ];

                $active = true;
                foreach ($events as $event):
                ?>
                    <div class="carousel-item <?php if($active){ echo 'active'; $active=false; } ?>">
                        <div class="row align-items-center g-4">
                            <div class="col-md-6">
                                <img src="<?= $event['image']; ?>" class="d-block w-100 rounded shadow-sm" style="height: 300px; object-fit: cover;">
                            </div>
                            <div class="col-md-6">
                                <h3 class="fw-bold"><?= $event['title']; ?></h3>
                                <p class="text-muted"><?= $event['description']; ?></p>
                                <a href="main/events.php" class="btn btn-primary btn-sm">Learn More</a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>

            </div>

            <!-- Controls -->
            <button class="carousel-control-prev" type="button" data-bs-target="#eventsCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon bg-dark rounded-circle p-3"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#eventsCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon bg-dark rounded-circle p-3"></span>
            </button>

        </div>
    </div>
</section>
<!-- ✅ COUNTER SCRIPT -->
<script>
document.addEventListener("DOMContentLoaded", () => {
    const counters = document.querySelectorAll('.counter');

    counters.forEach(counter => {
        const updateCounter = () => {
            const target = +counter.getAttribute('data-target');
            const current = +counter.innerText;
            const increment = target / 100;

            if (current < target) {
                counter.innerText = Math.ceil(current + increment);
                setTimeout(updateCounter, 20);
            } else {
                counter.innerText = target;
            }
        };
        updateCounter();
    });
});
</script>

<?php include('footer/footer.php'); ?>
