<?php
/**
 * IBVTE Portal - Homepage
 * Dynamic Marquee & Notifications included
 */
require_once __DIR__ . '/includes/db_config.php';
include 'includes/header.php';
?>

        <!-- Hero Section -->
        <section class="hero-section">
            <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
                </div>
                <div class="carousel-inner">
                    <?php
                    try {
                        $stmt = $pdo->query("SELECT * FROM sliders WHERE status = 'active' ORDER BY display_order ASC, created_at DESC");
                        $sliders = $stmt->fetchAll();
                        if (empty($sliders)):
                    ?>
                        <div class="carousel-item active" data-bs-interval="5000">
                            <img src="https://images.pexels.com/photos/1181533/pexels-photo-1181533.jpeg?auto=compress&cs=tinysrgb&w=1920" class="d-block w-100 hero-img" alt="Education" style="object-fit: cover;">
                            <div class="carousel-caption d-none d-md-block animated fadeInDown">
                                <h2 class="display-4 fw-bold">Empowering Youth through Skill India</h2>
                            </div>
                        </div>
                    <?php else: ?>
                        <?php foreach($sliders as $index => $slider): ?>
                            <div class="carousel-item <?= $index === 0 ? 'active' : '' ?>" data-bs-interval="5000">
                                <img src="<?= htmlspecialchars($slider['image_path']) ?>" class="d-block w-100 hero-img" alt="<?= htmlspecialchars($slider['title']) ?>" style="object-fit: cover;">
                                <div class="carousel-caption d-none d-md-block animated fadeInDown">
                                    <h2 class="display-4 fw-bold"><?= htmlspecialchars($slider['title']) ?></h2>
                                    <?php if($slider['description']): ?>
                                        <p class="lead"><?= htmlspecialchars($slider['description']) ?></p>
                                    <?php endif; ?>
                                    <?php if($slider['button_text']): ?>
                                        <a href="<?= htmlspecialchars($slider['button_link']) ?>" class="btn btn-warning btn-lg rounded-pill fw-bold px-5 py-3 shadow-lg"><?= htmlspecialchars($slider['button_text']) ?></a>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; } catch(Exception $e) {} ?>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>
        </section>

        <!-- Ticker Bar -->
        <section class="ticker-bar bg-primary text-white py-2 overflow-hidden border-bottom border-warning border-3">
            <div class="container-fluid">
                <div class="d-flex align-items-center">
                    <div class="bg-warning text-dark px-3 fw-bold small me-3 py-1 rounded">UPDATES</div>
                    <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" class="flex-grow-1 pt-1">
                        <?php
                        try {
                            $stmt = $pdo->query("SELECT id, title FROM notifications WHERE is_marquee = 1 AND status = 'active' ORDER BY created_at DESC LIMIT 8");
                            $marqueeItems = $stmt->fetchAll();
                            if (empty($marqueeItems)) {
                                echo '<span class="mx-4 small fw-bold">WELCOME TO IBVTE</span>';
                            } else {
                                foreach ($marqueeItems as $item) {
                                    echo '<a href="notification-detail.php?id=' . $item['id'] . '" class="text-white text-decoration-none mx-4 small fw-bold"><i class="fas fa-bullhorn me-2 text-warning"></i>' . htmlspecialchars($item['title']) . '</a>';
                                }
                            }
                        } catch (Exception $e) {
                            echo '<span class="mx-4 small fw-bold">WELCOME TO IBVTE</span>';
                        }
                        ?>
                    </marquee>
                </div>
            </div>
        </section>

        <!-- Leadership & Director Desk Section -->
        <section class="leadership-showcase py-5 bg-light">
            <div class="container">
                <div class="row g-4 align-items-stretch">

                    <!-- BOX 1: Hon'ble Ministers – vertical marquee -->
                    <div class="col-lg-4">
                        <div class="board-box h-100 rounded-4 shadow-sm bg-white p-4 d-flex flex-column" style="min-height:460px;">
                            <div class="box-header mb-3">
                                <span class="badge bg-warning text-dark mb-2">HON'BLE COMMISSION</span>
                                <h4 class="fw-bold mb-2">Indian Board Leadership</h4>
                                <p class="small text-muted">Ministerial leaders supporting IBVTE's vocational mission.</p>
                            </div>
                            <!-- Vertical auto-scroll marquee (one card visible at a time) -->
                            <div class="minister-marquee-wrap flex-grow-1 overflow-hidden rounded-3 border" style="height:340px;">
                                <div class="minister-marquee-inner">
                                    <!-- Card 1 -->
                                    <div class="minister-card text-center p-3 border-bottom">
                                        <img src="https://images.pexels.com/photos/1181690/pexels-photo-1181690.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&fit=crop" alt="Skill Development" class="rounded-circle mb-2 shadow" style="width:80px;height:80px;object-fit:cover;">
                                        <p class="small text-muted mb-0">Hon'ble Minister</p>
                                        <h6 class="fw-bold mb-0">Skill Development</h6>
                                        <span class="badge bg-warning text-dark mt-1 extra-small">Central Minister 1</span>
                                    </div>
                                    <!-- Card 2 -->
                                    <div class="minister-card text-center p-3 border-bottom">
                                        <img src="https://images.pexels.com/photos/1181686/pexels-photo-1181686.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&fit=crop" alt="Education & Training" class="rounded-circle mb-2 shadow" style="width:80px;height:80px;object-fit:cover;">
                                        <p class="small text-muted mb-0">Hon'ble Minister</p>
                                        <h6 class="fw-bold mb-0">Education &amp; Training</h6>
                                        <span class="badge bg-warning text-dark mt-1 extra-small">Central Minister 2</span>
                                    </div>
                                    <!-- Card 3 -->
                                    <div class="minister-card text-center p-3 border-bottom">
                                        <img src="https://images.pexels.com/photos/1181695/pexels-photo-1181695.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&fit=crop" alt="Industry Affairs" class="rounded-circle mb-2 shadow" style="width:80px;height:80px;object-fit:cover;">
                                        <p class="small text-muted mb-0">Hon'ble Minister</p>
                                        <h6 class="fw-bold mb-0">Industry Affairs</h6>
                                        <span class="badge bg-warning text-dark mt-1 extra-small">Central Minister 3</span>
                                    </div>
                                    <!-- Card 4 -->
                                    <div class="minister-card text-center p-3 border-bottom">
                                        <img src="https://images.pexels.com/photos/1181671/pexels-photo-1181671.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&fit=crop" alt="Labour & Employment" class="rounded-circle mb-2 shadow" style="width:80px;height:80px;object-fit:cover;">
                                        <p class="small text-muted mb-0">Hon'ble Minister</p>
                                        <h6 class="fw-bold mb-0">Labour &amp; Employment</h6>
                                        <span class="badge bg-warning text-dark mt-1 extra-small">Central Minister 4</span>
                                    </div>
                                    <!-- Card 5 -->
                                    <div class="minister-card text-center p-3 border-bottom">
                                        <img src="https://images.pexels.com/photos/1181675/pexels-photo-1181675.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&fit=crop" alt="Digital Initiatives" class="rounded-circle mb-2 shadow" style="width:80px;height:80px;object-fit:cover;">
                                        <p class="small text-muted mb-0">Hon'ble Minister</p>
                                        <h6 class="fw-bold mb-0">Digital Initiatives</h6>
                                        <span class="badge bg-warning text-dark mt-1 extra-small">Central Minister 5</span>
                                    </div>
                                    <!-- Card 6 -->
                                    <div class="minister-card text-center p-3">
                                        <img src="https://images.pexels.com/photos/1181698/pexels-photo-1181698.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&fit=crop" alt="Higher Education" class="rounded-circle mb-2 shadow" style="width:80px;height:80px;object-fit:cover;">
                                        <p class="small text-muted mb-0">Hon'ble Minister</p>
                                        <h6 class="fw-bold mb-0">Higher Education</h6>
                                        <span class="badge bg-warning text-dark mt-1 extra-small">Central Minister 6</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- BOX 2: Governance Team – 7 Pexels images -->
                    <div class="col-lg-4">
                        <div class="board-box h-100 rounded-4 shadow-sm bg-white p-4 d-flex flex-column" style="min-height:460px;">
                            <div class="box-header mb-3">
                                <span class="badge bg-primary text-white mb-2">GOVERNANCE TEAM</span>
                                <h4 class="fw-bold mb-2">Celebrating our Governance Team</h4>
                                <p class="small text-muted">Gallery of government leaders and ministers supporting IBVTE.</p>
                            </div>
                            <!-- 7 images: top row 3, middle row 3, bottom row 1 spanning full -->
                            <div class="flex-grow-1">
                                <div class="row g-2 mb-2">
                                    <div class="col-4">
                                        <div class="gallery-card rounded-3 overflow-hidden shadow-sm">
                                            <img src="https://images.pexels.com/photos/2182970/pexels-photo-2182970.jpeg?auto=compress&cs=tinysrgb&w=300&h=200&fit=crop" class="img-fluid w-100" style="height:80px;object-fit:cover;" alt="Central Minister 1">
                                            <div class="gallery-caption p-1 bg-white text-center"><span class="extra-small fw-bold d-block">Central Min. 1</span></div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="gallery-card rounded-3 overflow-hidden shadow-sm">
                                            <img src="https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=300&h=200&fit=crop" class="img-fluid w-100" style="height:80px;object-fit:cover;" alt="Central Minister 2">
                                            <div class="gallery-caption p-1 bg-white text-center"><span class="extra-small fw-bold d-block">Central Min. 2</span></div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="gallery-card rounded-3 overflow-hidden shadow-sm">
                                            <img src="https://images.pexels.com/photos/3184292/pexels-photo-3184292.jpeg?auto=compress&cs=tinysrgb&w=300&h=200&fit=crop" class="img-fluid w-100" style="height:80px;object-fit:cover;" alt="Central Minister 3">
                                            <div class="gallery-caption p-1 bg-white text-center"><span class="extra-small fw-bold d-block">Central Min. 3</span></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-2 mb-2">
                                    <div class="col-4">
                                        <div class="gallery-card rounded-3 overflow-hidden shadow-sm">
                                            <img src="https://images.pexels.com/photos/3184296/pexels-photo-3184296.jpeg?auto=compress&cs=tinysrgb&w=300&h=200&fit=crop" class="img-fluid w-100" style="height:80px;object-fit:cover;" alt="Central Minister 4">
                                            <div class="gallery-caption p-1 bg-white text-center"><span class="extra-small fw-bold d-block">Central Min. 4</span></div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="gallery-card rounded-3 overflow-hidden shadow-sm">
                                            <img src="https://images.pexels.com/photos/3184297/pexels-photo-3184297.jpeg?auto=compress&cs=tinysrgb&w=300&h=200&fit=crop" class="img-fluid w-100" style="height:80px;object-fit:cover;" alt="Central Minister 5">
                                            <div class="gallery-caption p-1 bg-white text-center"><span class="extra-small fw-bold d-block">Central Min. 5</span></div>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="gallery-card rounded-3 overflow-hidden shadow-sm">
                                            <img src="https://images.pexels.com/photos/3184298/pexels-photo-3184298.jpeg?auto=compress&cs=tinysrgb&w=300&h=200&fit=crop" class="img-fluid w-100" style="height:80px;object-fit:cover;" alt="Central Minister 6">
                                            <div class="gallery-caption p-1 bg-white text-center"><span class="extra-small fw-bold d-block">Central Min. 6</span></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-2">
                                    <div class="col-12">
                                        <div class="gallery-card rounded-3 overflow-hidden shadow-sm">
                                            <img src="https://images.pexels.com/photos/1550337/pexels-photo-1550337.jpeg?auto=compress&cs=tinysrgb&w=800&h=200&fit=crop" class="img-fluid w-100" style="height:100px;object-fit:cover;" alt="Prime Minister / National Leadership">
                                            <div class="gallery-caption p-2 bg-white text-center">
                                                <h6 class="mb-0 fw-bold">National Leadership</h6>
                                                <span class="extra-small text-muted">Prime Minister &amp; Cabinet</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- BOX 3: Director's Desk (already fine) -->
                    <div class="col-lg-4">
                        <div class="board-box h-100 rounded-4 shadow-sm bg-white p-4 d-flex flex-column" style="min-height:460px;">
                            <div class="box-header mb-3">
                                <span class="badge bg-danger text-white mb-2">DIRECTOR'S DESK</span>
                                <h4 class="fw-bold mb-2">From Director's Desk</h4>
                                <p class="small text-muted">IBVTE leadership vision and message for the vocational ecosystem.</p>
                            </div>
                            <div class="director-box overflow-hidden rounded-4 mb-3" style="height:200px;">
                                <img src="https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=800&h=400&fit=crop" class="img-fluid w-100 h-100 object-fit-cover" alt="Director IBVTE">
                            </div>
                            <div class="flex-grow-1">
                                <p class="small text-muted">Indian Board of Vocational and Technical Education (IBVTE) is committed to transforming technical education through industry-aligned skills, practical training, and inclusive certification frameworks.</p>
                                <p class="small text-muted">We are building an education system where students, institutions, and employers collaborate for real-world careers and national development.</p>
                            </div>
                            <div class="mt-3 text-end">
                                <a href="about/vision.php" class="btn btn-outline-primary rounded-pill px-4">Read More</a>
                            </div>
                        </div>
                    </div>

                </div><!-- /.row -->
            </div><!-- /.container -->
        </section>

        <style>
        /* ── Vertical scrolling minister marquee ── */
        .minister-marquee-wrap { position: relative; }
        .minister-marquee-inner {
            display: flex;
            flex-direction: column;
            animation: scrollUp 18s linear infinite;
        }
        .minister-marquee-wrap:hover .minister-marquee-inner { animation-play-state: paused; }
        @keyframes scrollUp {
            0%   { transform: translateY(0); }
            100% { transform: translateY(-50%); }
        }
        .minister-card { background: #fff; transition: background .3s; }
        .minister-card:hover { background: #fffbf0; }
        .extra-small { font-size: 0.72rem; }
        .gallery-card img { transition: transform .4s; }
        .gallery-card:hover img { transform: scale(1.05); }
        </style>

        <script>
        // Duplicate cards so scroll loops seamlessly
        document.addEventListener('DOMContentLoaded', function(){
            var inner = document.querySelector('.minister-marquee-inner');
            if(inner){
                var clone = inner.cloneNode(true);
                inner.parentNode.appendChild(clone);
            }
        });
        </script>

        <!-- Section 2: Vision & Grid -->
        <section id="about" class="py-4 bg-light">
            <div class="container">
                <div class="row g-4">
                    <div class="col-lg-7">
                        <div class="bg-white p-4 rounded-3 shadow-sm h-100 position-relative border-top border-primary border-4">
                            <div class="row">
                                <div class="col-md-5">
                                    <img src="https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=600&h=400&fit=crop" class="img-fluid rounded border shadow-sm" alt="Vision">
                                </div>
                                <div class="col-md-7">
                                    <h4 class="text-primary fw-bold mb-3">Board Vision</h4>
                                    <p class="extra-small text-justify text-muted">The Indian Board of Vocational and Technical Education (IBVTE) aims to redefine technical education. We focus on practical knowledge, skill-based curriculum, and national level certifications that provide students a competitive edge in the global market. Our mission is to bridge the educational gap between rural and urban India through innovative vocational programs.</p>
                                    <a href="about.php" class="btn btn-primary btn-sm rounded-pill px-4 mt-2">Know More +</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="row g-2">
                            <div class="col-4"><div class="service-icon-box bg-orange hover-up shadow-sm small-grid"><i class="fas fa-home"></i><span class="extra-small fw-bold text-center">General</span></div></div>
                            <div class="col-4"><div class="service-icon-box bg-cyan hover-up shadow-sm small-grid"><i class="fas fa-user-graduate"></i><span class="extra-small fw-bold text-center">Main Exam</span></div></div>
                            <div class="col-4"><div class="service-icon-box bg-secondary hover-up shadow-sm small-grid"><i class="fas fa-search"></i><span class="extra-small fw-bold text-center">Affiliation</span></div></div>
                            <div class="col-4"><div class="service-icon-box bg-purple hover-up shadow-sm small-grid"><i class="fas fa-file-alt"></i><span class="extra-small fw-bold text-center">Prastav</span></div></div>
                            <div class="col-4"><div class="service-icon-box bg-success hover-up shadow-sm small-grid"><i class="fas fa-user-plus"></i><span class="extra-small fw-bold text-center">Enrollment</span></div></div>
                            <div class="col-4"><div class="service-icon-box bg-primary hover-up shadow-sm small-grid"><i class="fas fa-user"></i><span class="extra-small fw-bold text-center">Registration</span></div></div>
                            <div class="col-4"><div class="service-icon-box bg-dark hover-up shadow-sm small-grid"><i class="fas fa-list-ul"></i><span class="extra-small fw-bold text-center">LGS</span></div></div>
                            <div class="col-4"><div class="service-icon-box bg-danger hover-up shadow-sm small-grid"><i class="fas fa-check-circle"></i><span class="extra-small fw-bold text-center">Verify</span></div></div>
                            <div class="col-4"><div class="service-icon-box bg-warning hover-up shadow-sm small-grid"><i class="fas fa-book-open"></i><span class="extra-small fw-bold text-center">Brochure</span></div></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 3: Action Cards -->
        <section class="py-4 bg-white">
            <div class="container">
                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="action-login-card bg-light p-4 rounded-3 text-center border-top border-info border-5 shadow-sm">
                            <h5 class="fw-bold text-info mb-3">Main School/College</h5>
                            <p class="extra-small text-muted mb-4">For board-affiliated schools/colleges, student registration, and academic procedures.</p>
                            <div class="d-grid gap-2"><a href="college/login.php" class="btn btn-dark rounded-pill fw-bold">Login Here</a><a href="affiliation/apply.php" class="btn btn-primary rounded-pill fw-bold">Register Here</a></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="action-login-card bg-light p-4 rounded-3 text-center border-top border-primary border-5 shadow-sm">
                            <h5 class="fw-bold text-primary mb-3">ARC Center Login</h5>
                            <p class="extra-small text-muted mb-4">Authorized Admission Partner Centers can login and register students here.</p>
                            <div class="d-grid gap-2"><a href="arc/login.php" class="btn btn-dark rounded-pill fw-bold">Login Here</a><a href="#" class="btn btn-primary rounded-pill fw-bold">Register Here</a></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="action-login-card bg-light p-4 rounded-3 text-center border-top border-danger border-5 shadow-sm">
                            <h5 class="fw-bold text-danger mb-3">Student Login</h5>
                            <p class="extra-small text-muted mb-4">Duly registered students can login to view results, materials, and profiles.</p>
                            <div class="d-grid gap-2"><a href="student/login.php" class="btn btn-dark rounded-pill fw-bold">Login Here</a><a href="login.php" class="btn btn-primary rounded-pill fw-bold">Check Status</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Our Courses Section -->
        <section class="py-5 bg-light">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="fw-bold text-primary">OUR <span class="text-warning">COURSES</span></h2>
                    <div class="mx-auto bg-primary" style="height: 4px; width: 60px;"></div>
                </div>
                <div class="row g-4 justify-content-center">
                    <?php
                    try {
                        require_once 'includes/db.php';
                        $db = DB();
                        // Order requested by user: Nursing, Vocational, Technical, Management, Information Tech, Paramedical
                        $featuredNames = ['Nursing', 'Vocational', 'Technical', 'Management', 'Information Tech', 'Paramedical'];
                        
                        // Fetch categories and maintain the specific order
                        $allCats = $db->fetchAll("SELECT * FROM course_categories WHERE is_active = 1");
                        $catMap = [];
                        foreach($allCats as $c) { $catMap[strtolower($c['name'])] = $c; }
                        
                        foreach ($featuredNames as $name): 
                            $c = $catMap[strtolower($name)] ?? null;
                            if(!$c) continue;
                        ?>
                        <div class="col-6 col-md-4 col-lg-2">
                            <a href="all-courses.php?category=<?= urlencode($c['name']) ?>" class="text-decoration-none">
                                <div class="course-box bg-white rounded-4 shadow-sm overflow-hidden border-0 hover-up h-100 shadow-hover">
                                    <div class="position-relative">
                                        <div class="ratio ratio-1x1">
                                            <img src="<?= $c['image'] ?? 'https://images.unsplash.com/photo-1513258496099-48168024adb0?w=400' ?>" class="object-fit-cover w-100 h-100 transition-transform" alt="<?= htmlspecialchars($c['name']) ?>">
                                        </div>
                                        <div class="course-overlay">
                                            <span class="btn btn-light btn-sm rounded-pill fw-bold extra-small px-3">View More</span>
                                        </div>
                                    </div>
                                    <div class="p-3 text-center">
                                        <h6 class="text-primary mb-1 fw-bold text-truncate"><?= htmlspecialchars($c['name']) ?></h6>
                                        <div class="mx-auto bg-warning" style="height: 2px; width: 30px;"></div>
                                        <p class="text-muted extra-small mt-2 mb-0"><?= htmlspecialchars($c['name']) ?></p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <?php endforeach; 
                    } catch(Exception $e) {} ?>
                </div>
                <style>
                    .course-box { transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #eee !important; }
                    .course-box:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; border-color: var(--bs-warning) !important; }
                    .course-box img { transition: transform 0.5s ease; }
                    .course-box:hover img { transform: scale(1.1); }
                    .course-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(59, 11, 124, 0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
                    .course-box:hover .course-overlay { opacity: 1; }
                    .extra-small { font-size: 0.7rem; }
                </style>
                <div class="text-center mt-5">
                    <a href="all-courses.php" class="btn btn-primary rounded-pill px-5 fw-bold shadow-sm">View All Courses <i class="fas fa-arrow-right ms-2"></i></a>
                </div>
            </div>
        </section>

        <!-- News Section -->
        <section class="py-5 bg-white border-top">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center mb-4 bg-primary text-white p-2 rounded shadow-sm">
                    <h3 class="fw-bold m-0 fs-5 ps-2">News</h3>
                    <a href="news.php" class="btn btn-sm btn-outline-light rounded-pill px-3">View All</a>
                </div>
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="news-video-card bg-light rounded-3 overflow-hidden shadow-sm h-100 border">
                            <div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/HndV87XpkG0" title="Vocational Education" allowfullscreen></iframe></div>
                            <div class="p-3"><p class="text-muted small mb-1"><i class="far fa-calendar-alt me-1"></i>Feb 10, 2026</p><h6 class="fw-bold small mb-0">Introduction to Vocational Training Excellence</h6></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="news-video-card bg-light rounded-3 overflow-hidden shadow-sm h-100 border">
                            <div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/9No-FiE9y6w" title="Skill Development" allowfullscreen></iframe></div>
                            <div class="p-3"><p class="text-muted small mb-1"><i class="far fa-calendar-alt me-1"></i>Feb 10, 2026</p><h6 class="fw-bold small mb-0">New Opportunities in Technical Education</h6></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="news-video-card bg-light rounded-3 overflow-hidden shadow-sm h-100 border">
                            <div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/T6fV1B_N0yI" title="Education System" allowfullscreen></iframe></div>
                            <div class="p-3"><p class="text-muted small mb-1"><i class="far fa-calendar-alt me-1"></i>Feb 03, 2026</p><h6 class="fw-bold small mb-0">Annual Convocation Highlights 2025</h6></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="news-video-card bg-light rounded-3 overflow-hidden shadow-sm h-100 border">
                            <div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/lK-L4uYmP0o" title="Career Guidance" allowfullscreen></iframe></div>
                            <div class="p-3"><p class="text-muted small mb-1"><i class="far fa-calendar-alt me-1"></i>Feb 02, 2026</p><h6 class="fw-bold small mb-0">Career Guidance for Vocational Students</h6></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Notifications, Syllabus & Bank Details Section -->
        <section class="py-5 bg-light border-top border-bottom">
            <div class="container">
                <div class="row g-4">
                    <div class="col-lg-8">
                        <div class="card border-0 shadow-sm rounded-3 overflow-hidden h-100 border-top border-primary border-4">
                            <div class="card-header bg-primary text-white py-3"><h5 class="fw-bold mb-0 fs-6"><i class="fas fa-bullhorn me-2"></i>Notifications/ Press Release</h5></div>
                            <div class="card-body p-0">
                                <div class="scroll-list p-3" style="max-height: 400px; overflow-y: auto;">
                                    <?php
                                    try {
                                        $stmt = $pdo->query("SELECT * FROM notifications WHERE status = 'active' ORDER BY created_at DESC LIMIT 10");
                                        $notifications = $stmt->fetchAll();
                                        if (empty($notifications)) {
                                            echo '<p class="text-muted small">No notifications found.</p>';
                                        } else {
                                            foreach ($notifications as $notif) {
                                                $date = date('Y-m-d', strtotime($notif['created_at']));
                                                echo '<div class="notification-item border-bottom pb-2 mb-2"><p class="text-muted extra-small mb-1"><i class="far fa-calendar-alt me-1"></i>Date: ' . $date . '</p><a href="notification-detail.php?id=' . $notif['id'] . '" class="text-primary fw-bold small text-decoration-none d-block">' . htmlspecialchars($notif['title']) . '</a></div>';
                                            }
                                        }
                                    } catch (Exception $e) {}
                                    ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card border-0 shadow-sm rounded-3 overflow-hidden h-100 border-top border-success border-4">
                            <div class="card-header bg-success text-white py-3"><h5 class="fw-bold mb-0 fs-6"><i class="fas fa-book me-2"></i>Syllabus Download</h5></div>
                            <div class="card-body p-3">
                                <ul class="list-unstyled small mb-0">
                                    <li class="mb-3 border-bottom pb-2"><a href="#" class="text-decoration-none text-dark d-flex justify-content-between"><span>ParaMedical Syllabus</span><i class="fas fa-download text-success"></i></a></li>
                                    <li class="mb-3 border-bottom pb-2"><a href="#" class="text-decoration-none text-dark d-flex justify-content-between"><span>Nursing Syllabus</span><i class="fas fa-download text-success"></i></a></li>
                                    <li class="mb-3 border-bottom pb-2"><a href="#" class="text-decoration-none text-dark d-flex justify-content-between"><span>Vocational Syllabus</span><i class="fas fa-download text-success"></i></a></li>
                                    <li class="mb-0"><a href="#" class="text-decoration-none text-dark d-flex justify-content-between"><span>IT Syllabus</span><i class="fas fa-download text-success"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <style>
            .course-box { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
            .course-box:hover { border-color: var(--bs-warning) !important; transform: translateY(-10px); }
            .course-box img { transition: transform 0.5s ease; }
            .course-box:hover img { transform: scale(1.1); }
            .shadow-hover:hover { box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; }
        </style>

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