<?php
/**
 * Home Page — Gmind Institute
 *
 * Clean, modern landing page with: hero banner, stats counter,
 * popular courses, why choose us, branches, affiliations,
 * photo gallery, toppers, testimonials.
 */

// Provide safe defaults for stats
$statStudents = (int) ($stats['total_students']   ?? 5000);
$statCourses  = (int) ($stats['total_courses']     ?? 30);
$statBranches = (int) ($stats['total_branches']     ?? 15);
$statYears    = (int) ($stats['years_experience']   ?? 10);

// Ensure arrays are set
$sliders         = $sliders         ?? [];
$announcements   = $announcements   ?? [];
$featuredCourses = $featuredCourses ?? [];
$branches        = $branches        ?? [];
$affiliations    = $affiliations    ?? [];
$partners        = $partners        ?? [];
$toppers         = $toppers         ?? [];
$testimonials    = $testimonials    ?? [];
$galleryItems    = $galleryItems    ?? [];
$homeFaqs        = $homeFaqs        ?? [];
$offerPopup      = $offerPopup      ?? ['enabled' => false, 'title' => '', 'description' => '', 'image' => '', 'link' => '', 'link_text' => ''];
$videoTestimonials = $videoTestimonials ?? [];
$featuredBatches   = $featuredBatches   ?? [];
$countdownData     = $countdownData     ?? null;

// Base path for internal links and assets
$basePath = defined('BASE_PATH') ? BASE_PATH : '/gmind';

include __DIR__ . '/../layouts/header.php';

?>
<!-- ============================================================
     1. Hero Banner Section
     ============================================================ -->
<section class="hero-banner" aria-label="Welcome to Gmind Institute">
    <?php if (!empty($sliders)): ?>
    <div class="hero-banner-slider" id="heroSlider">
        <?php foreach ($sliders as $index => $slider): ?>
        <div class="hero-slide<?= $index === 0 ? ' active' : '' ?>">
            <?php if (!empty($slider['image'])): ?>
            <img class="hero-slide-img" src="<?= htmlspecialchars(upload_url($slider['image']), ENT_QUOTES, 'UTF-8') ?>" alt="<?= htmlspecialchars(getBilingual($slider, 'title') ?: __('hero.default_title'), ENT_QUOTES, 'UTF-8') ?>" loading="<?= $index === 0 ? 'eager' : 'lazy' ?>">
            <?php endif; ?>
            <div class="hero-content container">
                <h1><?= htmlspecialchars(getBilingual($slider, 'title') ?: __('hero.default_title'), ENT_QUOTES, 'UTF-8') ?></h1>
                <p><?= htmlspecialchars(getBilingual($slider, 'subtitle') ?: __('hero.default_subtitle'), ENT_QUOTES, 'UTF-8') ?></p>
                <div class="hero-cta">
                    <a href="<?= $basePath ?>/courses" class="btn-hero-primary"><?= __('hero.explore_courses') ?></a>
                    <a href="<?= $basePath ?>/admission" class="btn-hero-outline"><?= __('hero.apply_now') ?></a>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <?php if (count($sliders) > 1): ?>
    <div class="hero-dots">
        <?php foreach ($sliders as $index => $s): ?>
        <span class="hero-dot<?= $index === 0 ? ' active' : '' ?>" data-slide="<?= $index ?>"></span>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
    <?php else: ?>
    <!-- Static hero when no slider images -->
    <div class="hero-static">
        <div class="hero-content container">
            <h1><?= __('hero.default_title') ?></h1>
            <p><?= __('hero.default_subtitle') ?></p>
            <div class="hero-cta">
                <a href="<?= $basePath ?>/courses" class="btn-hero-primary"><?= __('hero.explore_courses') ?></a>
                <a href="<?= $basePath ?>/admission" class="btn-hero-outline"><?= __('hero.apply_now') ?></a>
            </div>
        </div>
    </div>
    <?php endif; ?>
</section>

<!-- ============================================================
     2. Announcement Marquee
     ============================================================ -->
<?php if (!empty($announcements)): ?>
<div class="announcement-bar" role="marquee" aria-label="Latest announcements">
    <div class="container">
        <span class="announcement-label"><?= __('announcement.label') ?></span>
        <div class="announcement-scroll">
            <?php foreach ($announcements as $announcement): ?>
                <span>
                    <?php if (!empty($announcement['link'])): ?>
                        <a href="<?= htmlspecialchars($announcement['link'], ENT_QUOTES, 'UTF-8') ?>" style="color:inherit;">
                            <?= htmlspecialchars(getBilingual($announcement, 'text'), ENT_QUOTES, 'UTF-8') ?>
                        </a>
                    <?php else: ?>
                        <?= htmlspecialchars(getBilingual($announcement, 'text'), ENT_QUOTES, 'UTF-8') ?>
                    <?php endif; ?>
                </span>
            <?php endforeach; ?>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- ============================================================
     2b. Countdown Timer Section
     ============================================================ -->
<?php if (!empty($countdownData)): ?>
<section class="home-countdown" style="background:linear-gradient(135deg, #1a1a5e 0%, #4A6CF7 50%, #6C3FE8 100%); padding:60px 0; color:#fff; text-align:center;">
    <div class="container">
        <h2 style="margin:0 0 6px; font-size:28px; font-weight:700;"><?= htmlspecialchars(getBilingual($countdownData, 'title'), ENT_QUOTES, 'UTF-8') ?></h2>
        <p style="margin:0 0 30px; font-size:16px; opacity:0.85;"><?= htmlspecialchars(getBilingual($countdownData, 'subtitle'), ENT_QUOTES, 'UTF-8') ?></p>

        <div id="countdownTimer" style="display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:30px;">
            <div class="countdown-item" style="background:rgba(255,255,255,0.15); backdrop-filter:blur(8px); border-radius:14px; padding:20px 16px; min-width:90px; text-align:center;">
                <span id="cd-days" style="display:block; font-size:42px; font-weight:700; line-height:1;">00</span>
                <span style="font-size:12px; text-transform:uppercase; letter-spacing:1px; opacity:0.8;"><?= __('countdown.days') ?></span>
            </div>
            <div class="countdown-item" style="background:rgba(255,255,255,0.15); backdrop-filter:blur(8px); border-radius:14px; padding:20px 16px; min-width:90px; text-align:center;">
                <span id="cd-hours" style="display:block; font-size:42px; font-weight:700; line-height:1;">00</span>
                <span style="font-size:12px; text-transform:uppercase; letter-spacing:1px; opacity:0.8;"><?= __('countdown.hours') ?></span>
            </div>
            <div class="countdown-item" style="background:rgba(255,255,255,0.15); backdrop-filter:blur(8px); border-radius:14px; padding:20px 16px; min-width:90px; text-align:center;">
                <span id="cd-minutes" style="display:block; font-size:42px; font-weight:700; line-height:1;">00</span>
                <span style="font-size:12px; text-transform:uppercase; letter-spacing:1px; opacity:0.8;"><?= __('countdown.minutes') ?></span>
            </div>
            <div class="countdown-item" style="background:rgba(255,255,255,0.15); backdrop-filter:blur(8px); border-radius:14px; padding:20px 16px; min-width:90px; text-align:center;">
                <span id="cd-seconds" style="display:block; font-size:42px; font-weight:700; line-height:1;">00</span>
                <span style="font-size:12px; text-transform:uppercase; letter-spacing:1px; opacity:0.8;"><?= __('countdown.seconds') ?></span>
            </div>
        </div>

        <a href="<?= htmlspecialchars($countdownData['btn_url'], ENT_QUOTES, 'UTF-8') ?>" style="display:inline-block; padding:14px 36px; background:#fff; color:#4A6CF7; border-radius:50px; font-size:16px; font-weight:700; text-decoration:none; box-shadow:0 4px 16px rgba(0,0,0,0.2); transition:transform 0.2s;">
            <?= htmlspecialchars(getBilingual($countdownData, 'btn_text'), ENT_QUOTES, 'UTF-8') ?> &rarr;
        </a>
    </div>

    <script>
    (function(){
        const targetDate = new Date('<?= $countdownData['date'] ?>').getTime();
        function updateCountdown(){
            const now = new Date().getTime();
            const diff = targetDate - now;
            if(diff <= 0){
                document.getElementById('cd-days').textContent = '00';
                document.getElementById('cd-hours').textContent = '00';
                document.getElementById('cd-minutes').textContent = '00';
                document.getElementById('cd-seconds').textContent = '00';
                return;
            }
            const d = Math.floor(diff / (1000*60*60*24));
            const h = Math.floor((diff % (1000*60*60*24)) / (1000*60*60));
            const m = Math.floor((diff % (1000*60*60)) / (1000*60));
            const s = Math.floor((diff % (1000*60)) / 1000);
            document.getElementById('cd-days').textContent = String(d).padStart(2,'0');
            document.getElementById('cd-hours').textContent = String(h).padStart(2,'0');
            document.getElementById('cd-minutes').textContent = String(m).padStart(2,'0');
            document.getElementById('cd-seconds').textContent = String(s).padStart(2,'0');
        }
        updateCountdown();
        setInterval(updateCountdown, 1000);
    })();
    </script>
</section>
<?php endif; ?>

<!-- ============================================================
     3. Stats Counter Section
     ============================================================ -->
<section class="stats-section" aria-label="Institute statistics">
    <div class="container">
        <div class="stats-grid">
            <div class="stat-item animate-on-scroll">
                <span class="stat-number" data-target="<?= $statStudents ?>">0</span>
                <span class="stat-label"><?= __('stats.students') ?></span>
            </div>
            <div class="stat-item animate-on-scroll" data-delay="100">
                <span class="stat-number" data-target="<?= $statCourses ?>">0</span>
                <span class="stat-label"><?= __('stats.courses') ?></span>
            </div>
            <div class="stat-item animate-on-scroll" data-delay="200">
                <span class="stat-number" data-target="<?= $statBranches ?>">0</span>
                <span class="stat-label"><?= __('stats.branches') ?></span>
            </div>
            <div class="stat-item animate-on-scroll" data-delay="300">
                <span class="stat-number" data-target="<?= $statYears ?>">0</span>
                <span class="stat-label"><?= __('stats.years') ?></span>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     4. Popular Courses Section
     ============================================================ -->
<section class="courses-section" id="courses" aria-label="Popular courses">
    <div class="container">
        <div class="section-heading">
            <h2><?= __('courses.popular_title') ?></h2>
            <p><?= __('courses.popular_subtitle') ?></p>
        </div>

        <div class="course-filters" role="tablist" aria-label="Filter courses by category">
            <button class="course-filter-btn active" data-category="all" role="tab" aria-selected="true"><?= __('courses.filter_all') ?></button>
            <button class="course-filter-btn" data-category="computer" role="tab" aria-selected="false"><?= __('courses.filter_computer') ?></button>
            <button class="course-filter-btn" data-category="accounting" role="tab" aria-selected="false"><?= __('courses.filter_accounting') ?></button>
            <button class="course-filter-btn" data-category="programming" role="tab" aria-selected="false"><?= __('courses.filter_programming') ?></button>
            <button class="course-filter-btn" data-category="design" role="tab" aria-selected="false"><?= __('courses.filter_design') ?></button>
        </div>

        <div class="courses-grid">
            <?php if (!empty($featuredCourses)): ?>
                <?php foreach ($featuredCourses as $course): ?>
                <div class="course-card animate-on-scroll" data-category="<?= htmlspecialchars($course['category'] ?? 'computer', ENT_QUOTES, 'UTF-8') ?>">
                    <div class="course-card-image">
                        <img
                            src="<?= htmlspecialchars(!empty($course['image']) ? upload_url($course['image']) : $basePath . '/images/course-default.jpg', ENT_QUOTES, 'UTF-8') ?>"
                            alt="<?= htmlspecialchars(getBilingual($course, 'name') ?: 'Course', ENT_QUOTES, 'UTF-8') ?>"
                            loading="lazy"
                        >
                        <span class="course-card-badge badge-<?= htmlspecialchars($course['category'] ?? 'computer', ENT_QUOTES, 'UTF-8') ?>">
                            <?= htmlspecialchars(ucfirst($course['category'] ?? 'Course'), ENT_QUOTES, 'UTF-8') ?>
                        </span>
                    </div>
                    <div class="course-card-body">
                        <h3 class="course-card-title"><?= htmlspecialchars(getBilingual($course, 'name') ?: 'Course', ENT_QUOTES, 'UTF-8') ?></h3>
                        <div class="course-card-meta">
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                <?= htmlspecialchars(getBilingual($course, 'duration') ?: 'N/A', ENT_QUOTES, 'UTF-8') ?>
                            </span>
                            <span class="fee">
                                <?php
                                    $fee = (float) ($course['fee'] ?? 0);
                                    echo $fee > 0 ? '&#8377;' . number_format($fee, 0) : __('courses.contact_us');
                                ?>
                            </span>
                        </div>
                        <a href="<?= $basePath ?>/courses/<?= htmlspecialchars($course['id'] ?? '#', ENT_QUOTES, 'UTF-8') ?>" class="btn-enroll"><?= __('courses.enroll_now') ?></a>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php else: ?>
                <?php
                $fallbackCourses = [
                    ['name' => 'ADCA', 'category' => 'computer', 'duration' => '12 Months', 'fee' => 25000],
                    ['name' => 'DCA', 'category' => 'computer', 'duration' => '6 Months', 'fee' => 15000],
                    ['name' => 'Tally Prime', 'category' => 'accounting', 'duration' => '3 Months', 'fee' => 8000],
                    ['name' => 'Python Programming', 'category' => 'programming', 'duration' => '6 Months', 'fee' => 20000],
                    ['name' => 'Web Design', 'category' => 'design', 'duration' => '6 Months', 'fee' => 18000],
                    ['name' => 'Graphic Design', 'category' => 'design', 'duration' => '4 Months', 'fee' => 12000],
                ];
                ?>
                <?php foreach ($fallbackCourses as $fc): ?>
                <div class="course-card animate-on-scroll" data-category="<?= $fc['category'] ?>">
                    <div class="course-card-image">
                        <img src="<?= $basePath ?>/images/course-default.jpg" alt="<?= $fc['name'] ?>" loading="lazy">
                        <span class="course-card-badge badge-<?= $fc['category'] ?>"><?= ucfirst($fc['category']) ?></span>
                    </div>
                    <div class="course-card-body">
                        <h3 class="course-card-title"><?= $fc['name'] ?></h3>
                        <div class="course-card-meta">
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                <?= $fc['duration'] ?>
                            </span>
                            <span class="fee">&#8377;<?= number_format($fc['fee'], 0) ?></span>
                        </div>
                        <a href="<?= $basePath ?>/admission" class="btn-enroll"><?= __('courses.enroll_now') ?></a>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- ============================================================
     5. Why Choose Us Section
     ============================================================ -->
<section class="why-choose-section" aria-label="Why choose Gmind Institute">
    <div class="container">
        <div class="section-heading">
            <h2><?= __('why.title') ?></h2>
            <p><?= __('why.subtitle') ?></p>
        </div>

        <div class="why-choose-grid">
            <div class="why-choose-item animate-on-scroll">
                <div class="why-choose-icon icon-navy" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
                </div>
                <h3 class="why-choose-title"><?= __('why.faculty_title') ?></h3>
                <p class="why-choose-desc"><?= __('why.faculty_desc') ?></p>
            </div>

            <div class="why-choose-item animate-on-scroll" data-delay="100">
                <div class="why-choose-icon icon-scarlet" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                </div>
                <h3 class="why-choose-title"><?= __('why.recognised_title') ?></h3>
                <p class="why-choose-desc"><?= __('why.recognised_desc') ?></p>
            </div>

            <div class="why-choose-item animate-on-scroll" data-delay="200">
                <div class="why-choose-icon icon-gold" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>
                </div>
                <h3 class="why-choose-title"><?= __('why.placement_title') ?></h3>
                <p class="why-choose-desc"><?= __('why.placement_desc') ?></p>
            </div>

            <div class="why-choose-item animate-on-scroll" data-delay="300">
                <div class="why-choose-icon icon-navy" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                </div>
                <h3 class="why-choose-title"><?= __('why.exam_title') ?></h3>
                <p class="why-choose-desc"><?= __('why.exam_desc') ?></p>
            </div>

            <div class="why-choose-item animate-on-scroll" data-delay="400">
                <div class="why-choose-icon icon-scarlet" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                </div>
                <h3 class="why-choose-title"><?= __('why.certificate_title') ?></h3>
                <p class="why-choose-desc"><?= __('why.certificate_desc') ?></p>
            </div>

            <div class="why-choose-item animate-on-scroll" data-delay="500">
                <div class="why-choose-icon icon-gold" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
                </div>
                <h3 class="why-choose-title"><?= __('why.support_title') ?></h3>
                <p class="why-choose-desc"><?= __('why.support_desc') ?></p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     6. Branches Section
     ============================================================ -->
<section class="branches-section" aria-label="Our branches">
    <div class="container">
        <div class="section-heading">
            <h2><?= __('branches.title') ?></h2>
            <p><?= __('branches.subtitle') ?></p>
        </div>

        <div class="branches-grid">
            <?php if (!empty($branches)): ?>
                <?php foreach ($branches as $branch):
                    // Parse facilities
                    $facilities = [];
                    if (!empty($branch['facilities'])) {
                        $decoded = json_decode($branch['facilities'], true);
                        if (is_array($decoded)) $facilities = $decoded;
                    }
                    $facilityIcons = [
                        'AC Classrooms' => '❄️', 'WiFi' => '📶', 'Computer Lab' => '💻',
                        'Library' => '📚', 'Parking' => '🅿️', 'CCTV Surveillance' => '📹',
                        'Drinking Water' => '💧', 'Washroom' => '🚻', 'Projector' => '📽️',
                        'Generator Backup' => '⚡', 'Canteen' => '🍽️',
                    ];
                    $isTrusted = !empty($branch['is_trusted']);
                ?>
                <div class="branch-card animate-on-scroll" style="position:relative;<?= $isTrusted ? 'border:2px solid #f39c12;' : '' ?>">
                    <?php if ($isTrusted): ?>
                    <div style="position:absolute;top:0;right:0;background:#f39c12;color:#fff;padding:4px 14px;border-radius:0 0 0 8px;font-size:0.72rem;font-weight:700;z-index:2;">⭐ TRUSTED</div>
                    <?php endif; ?>
                    <div class="branch-card-image">
                        <img
                            src="<?= htmlspecialchars(!empty($branch['photo_front']) ? upload_url($branch['photo_front']) : (!empty($branch['image']) ? upload_url($branch['image']) : $basePath . '/images/branch-default.jpg'), ENT_QUOTES, 'UTF-8') ?>"
                            alt="<?= htmlspecialchars(getBilingual($branch, 'name') ?: getBilingual($branch, 'city') ?: 'Branch', ENT_QUOTES, 'UTF-8') ?>"
                            loading="lazy"
                        >
                    </div>
                    <div class="branch-card-body">
                        <h3 class="branch-card-city" style="font-size:1.05rem;"><?= htmlspecialchars(getBilingual($branch, 'name') ?: getBilingual($branch, 'city') ?: 'Branch', ENT_QUOTES, 'UTF-8') ?></h3>
                        <div class="branch-card-state"><?= htmlspecialchars(getBilingual($branch, 'city') ?: ($branch['city'] ?? ''), ENT_QUOTES, 'UTF-8') ?>, <?= htmlspecialchars($branch['state'] ?? '', ENT_QUOTES, 'UTF-8') ?></div>

                        <!-- Address -->
                        <div class="branch-card-address" style="margin-top:6px;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
                            <?= htmlspecialchars(mb_substr($branch['address'] ?? '', 0, 60), ENT_QUOTES, 'UTF-8') ?><?= mb_strlen($branch['address'] ?? '') > 60 ? '...' : '' ?>
                        </div>

                        <!-- Timing + Phone row -->
                        <div style="display:flex;gap:12px;margin-top:6px;flex-wrap:wrap;font-size:0.78rem;color:#666;">
                            <?php if (!empty($branch['opening_time'])): ?>
                            <span style="display:inline-flex;align-items:center;gap:4px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#1a4fa0" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                <?= htmlspecialchars($branch['opening_time'], ENT_QUOTES, 'UTF-8') ?> - <?= htmlspecialchars($branch['closing_time'] ?? '', ENT_QUOTES, 'UTF-8') ?>
                            </span>
                            <?php endif; ?>
                            <?php if (!empty($branch['phone'])): ?>
                            <span style="display:inline-flex;align-items:center;gap:4px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#1a4fa0" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
                                <a href="tel:<?= htmlspecialchars($branch['phone'], ENT_QUOTES, 'UTF-8') ?>" style="color:#1a4fa0;text-decoration:none;"><?= htmlspecialchars($branch['phone'], ENT_QUOTES, 'UTF-8') ?></a>
                            </span>
                            <?php endif; ?>
                        </div>

                        <!-- Facilities badges -->
                        <?php if (!empty($facilities)): ?>
                        <div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;">
                            <?php foreach (array_slice($facilities, 0, 5) as $f): ?>
                            <span style="background:#eaf0fb;color:#1a4fa0;padding:2px 8px;border-radius:10px;font-size:0.7rem;font-weight:500;"><?= $facilityIcons[$f] ?? '✓' ?> <?= htmlspecialchars($f, ENT_QUOTES, 'UTF-8') ?></span>
                            <?php endforeach; ?>
                            <?php if (count($facilities) > 5): ?>
                            <span style="background:#f0f0f0;color:#999;padding:2px 8px;border-radius:10px;font-size:0.7rem;">+<?= count($facilities) - 5 ?> more</span>
                            <?php endif; ?>
                        </div>
                        <?php endif; ?>

                        <!-- Description snippet -->
                        <?php if (!empty($branch['description'])): ?>
                        <p style="font-size:0.76rem;color:#888;margin-top:8px;line-height:1.5;"><?= htmlspecialchars(mb_substr($branch['description'], 0, 80), ENT_QUOTES, 'UTF-8') ?><?= mb_strlen($branch['description']) > 80 ? '...' : '' ?></p>
                        <?php endif; ?>

                        <!-- Actions: Know More + Map -->
                        <div style="display:flex;gap:8px;margin-top:10px;align-items:center;">
                            <a href="<?= $basePath ?>/branch-info/<?= urlencode($branch['branch_code'] ?? $branch['id']) ?>" style="display:inline-flex;align-items:center;gap:4px;padding:6px 14px;background:linear-gradient(135deg,#1a4fa0,#0d2b6e);color:#fff;border-radius:6px;text-decoration:none;font-size:0.78rem;font-weight:600;">
                                Know More →
                            </a>
                            <?php if (!empty($branch['map_link'])): ?>
                            <a href="<?= htmlspecialchars($branch['map_link'], ENT_QUOTES, 'UTF-8') ?>" target="_blank" rel="noopener noreferrer" style="display:inline-flex;align-items:center;gap:4px;padding:6px 12px;background:#eaf0fb;color:#1a4fa0;border-radius:6px;text-decoration:none;font-size:0.76rem;font-weight:500;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>
                                Map
                            </a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="branches-empty">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
                    <p><?= __('branches.coming_soon') ?></p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- ============================================================
     7. Affiliation & Partners Section
     ============================================================ -->
<?php if (!empty($affiliations) || !empty($partners)): ?>
<section class="affiliations-section" aria-label="Affiliations and partners">
    <div class="container">
        <?php if (!empty($affiliations)): ?>
        <div class="affiliations-subsection">
            <h3><?= __('affiliations.affiliated') ?></h3>
            <div class="logo-strip-wrapper">
                <div class="logo-strip">
                    <?php $affLoop = array_merge($affiliations, $affiliations); ?>
                    <?php foreach ($affLoop as $aff): ?>
                    <div class="logo-strip-item">
                        <?php if (!empty($aff['website'])): ?>
                        <a href="<?= htmlspecialchars($aff['website'], ENT_QUOTES, 'UTF-8') ?>" target="_blank" rel="noopener noreferrer">
                        <?php endif; ?>
                            <img src="<?= htmlspecialchars(!empty($aff['logo']) ? upload_url($aff['logo']) : $basePath . '/images/logo-placeholder.png', ENT_QUOTES, 'UTF-8') ?>" alt="<?= htmlspecialchars(getBilingual($aff, 'name') ?: 'Affiliate', ENT_QUOTES, 'UTF-8') ?>" loading="lazy">
                        <?php if (!empty($aff['website'])): ?>
                        </a>
                        <?php endif; ?>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <?php if (!empty($partners)): ?>
        <div class="affiliations-subsection">
            <h3><?= __('affiliations.partners') ?></h3>
            <div class="logo-strip-wrapper">
                <div class="logo-strip">
                    <?php $partLoop = array_merge($partners, $partners); ?>
                    <?php foreach ($partLoop as $partner): ?>
                    <div class="logo-strip-item">
                        <?php if (!empty($partner['website'])): ?>
                        <a href="<?= htmlspecialchars($partner['website'], ENT_QUOTES, 'UTF-8') ?>" target="_blank" rel="noopener noreferrer">
                        <?php endif; ?>
                            <img src="<?= htmlspecialchars(!empty($partner['logo']) ? upload_url($partner['logo']) : $basePath . '/images/logo-placeholder.png', ENT_QUOTES, 'UTF-8') ?>" alt="<?= htmlspecialchars(getBilingual($partner, 'name') ?: 'Partner', ENT_QUOTES, 'UTF-8') ?>" loading="lazy">
                        <?php if (!empty($partner['website'])): ?>
                        </a>
                        <?php endif; ?>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<!-- ============================================================
     8. Photo Gallery Section
     ============================================================ -->
<section class="gallery-section" aria-label="Photo Gallery">
    <div class="container">
        <div class="section-heading">
            <h2><?= __('gallery.title') ?></h2>
            <p><?= __('gallery.subtitle') ?></p>
        </div>

        <?php if (!empty($galleryItems)): ?>
        <div class="gallery-grid">
            <?php foreach ($galleryItems as $item): ?>
            <div class="gallery-card animate-on-scroll" onclick="openLightbox(this)">
                <div class="gallery-card-image">
                    <img
                        src="<?= htmlspecialchars(!empty($item['image']) ? upload_url($item['image']) : $basePath . '/images/gallery-default.jpg', ENT_QUOTES, 'UTF-8') ?>"
                        alt="<?= htmlspecialchars(getBilingual($item, 'title') ?: 'Gallery Image', ENT_QUOTES, 'UTF-8') ?>"
                        loading="lazy"
                        data-title="<?= htmlspecialchars(getBilingual($item, 'title') ?: '', ENT_QUOTES, 'UTF-8') ?>"
                    >
                    <div class="gallery-card-overlay">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
                    </div>
                </div>
                <?php if (!empty($item['title'])): ?>
                <div class="gallery-card-info">
                    <h3 class="gallery-card-title"><?= htmlspecialchars(getBilingual($item, 'title'), ENT_QUOTES, 'UTF-8') ?></h3>
                    <?php if (!empty($item['category'])): ?>
                    <span class="gallery-card-category"><?= htmlspecialchars(ucfirst($item['category']), ENT_QUOTES, 'UTF-8') ?></span>
                    <?php endif; ?>
                </div>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
        </div>
        <?php else: ?>
        <div class="gallery-empty">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
            <p><?= __('gallery.coming_soon') ?></p>
        </div>
        <?php endif; ?>

        <div style="text-align:center; margin-top:2rem;">
            <a href="<?= $basePath ?>/gallery" class="btn-outline"><?= __('gallery.view_full') ?></a>
        </div>
    </div>
</section>

<!-- Lightbox Modal -->
<div class="gallery-lightbox" id="galleryLightbox">
    <button class="gallery-lightbox-close" aria-label="Close lightbox">&times;</button>
    <img class="gallery-lightbox-img" id="lightboxImg" src="" alt="">
    <div class="gallery-lightbox-caption" id="lightboxCaption"></div>
</div>

<!-- ============================================================
     9. Toppers Section
     ============================================================ -->
<section class="toppers-section section-navy" aria-label="Star performers">
    <div class="container">
        <div class="section-heading">
            <h2><?= __('toppers.title') ?></h2>
            <p><?= __('toppers.subtitle') ?></p>
        </div>

        <div class="toppers-grid">
            <?php if (!empty($toppers)): ?>
                <?php foreach ($toppers as $index => $topper): ?>
                    <?php
                    $rankClass = '';
                    if ($index === 0) $rankClass = 'rank-1';
                    elseif ($index === 1) $rankClass = 'rank-2';
                    elseif ($index === 2) $rankClass = 'rank-3';
                    ?>
                <div class="topper-card <?= $rankClass ?> animate-on-scroll">
                    <img
                        class="topper-photo"
                        src="<?= htmlspecialchars(!empty($topper['photo']) ? upload_url($topper['photo']) : $basePath . '/images/avatar-default.png', ENT_QUOTES, 'UTF-8') ?>"
                        alt="<?= htmlspecialchars(getBilingual($topper, 'name') ?: 'Student', ENT_QUOTES, 'UTF-8') ?>"
                        loading="lazy"
                    >
                    <div class="topper-name"><?= htmlspecialchars(getBilingual($topper, 'name') ?: 'Student', ENT_QUOTES, 'UTF-8') ?></div>
                    <div class="topper-course"><?= htmlspecialchars(getBilingual($topper, 'course_name') ?: ($topper['course_id'] ?? ''), ENT_QUOTES, 'UTF-8') ?></div>
                    <?php if (!empty($topper['marks']) || !empty($topper['grade'])): ?>
                    <div class="topper-marks">
                        <?= htmlspecialchars($topper['marks'] ?? $topper['grade'] ?? '', ENT_QUOTES, 'UTF-8') ?>
                    </div>
                    <?php endif; ?>
                    <div class="topper-meta">
                        <?php if (!empty($topper['batch_year'])): ?>
                            <?= htmlspecialchars((string) $topper['batch_year'], ENT_QUOTES, 'UTF-8') ?>
                        <?php endif; ?>
                        <?php if (!empty($topper['branch_name'])): ?>
                            &bull; <?= htmlspecialchars(getBilingual($topper, 'branch_name'), ENT_QUOTES, 'UTF-8') ?>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="toppers-empty">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                    <p><?= __('toppers.coming_soon') ?></p>
                </div>
            <?php endif; ?>
        </div>

        <?php if (!empty($toppers)): ?>
        <div style="text-align:center; margin-top:2rem;">
            <a href="<?= $basePath ?>/toppers" class="toppers-view-all"><?= __('toppers.view_all') ?> &rarr;</a>
        </div>
        <?php endif; ?>
    </div>
</section>

<!-- ============================================================
     10. Testimonials Section
     ============================================================ -->
<section class="testimonials-section" aria-label="Student testimonials">
    <div class="container">
        <div class="section-heading">
            <h2><?= __('testimonials.title') ?></h2>
            <p><?= __('testimonials.subtitle') ?></p>
        </div>

        <div class="testimonials-wrapper">
            <div class="testimonials-track">
                <?php if (!empty($testimonials)): ?>
                    <?php foreach ($testimonials as $testimonial): ?>
                        <?php $rating = (int) ($testimonial['rating'] ?? 5); ?>
                    <div class="testimonial-card">
                        <div class="testimonial-card-inner">
                            <div class="testimonial-stars" aria-label="Rating: <?= $rating ?> out of 5">
                                <?php for ($i = 1; $i <= 5; $i++): ?>
                                <span class="star<?= $i > $rating ? ' empty' : '' ?>">&#9733;</span>
                                <?php endfor; ?>
                            </div>
                            <p class="testimonial-text"><?= htmlspecialchars(getBilingual($testimonial, 'review') ?: __('testimonials.default_review'), ENT_QUOTES, 'UTF-8') ?></p>
                            <div class="testimonial-author">
                                <img
                                    class="testimonial-avatar"
                                    src="<?= htmlspecialchars(!empty($testimonial['photo']) ? upload_url($testimonial['photo']) : $basePath . '/images/avatar-default.png', ENT_QUOTES, 'UTF-8') ?>"
                                    alt="<?= htmlspecialchars(getBilingual($testimonial, 'name') ?: 'Student', ENT_QUOTES, 'UTF-8') ?>"
                                    loading="lazy"
                                >
                                <div class="testimonial-author-info">
                                    <span class="testimonial-author-name"><?= htmlspecialchars(getBilingual($testimonial, 'name') ?: 'Student', ENT_QUOTES, 'UTF-8') ?></span>
                                    <span class="testimonial-author-course"><?= htmlspecialchars(getBilingual($testimonial, 'course_name') ?: '', ENT_QUOTES, 'UTF-8') ?></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <?php
                    $fallbackTestimonials = [
                        ['name' => 'Ravi Kumar', 'course' => 'ADCA', 'rating' => 5, 'review' => 'Gmind Institute completely transformed my career. The ADCA course was comprehensive and the faculty was incredibly supportive. I landed a great job within 2 months!'],
                        ['name' => 'Anjali Singh', 'course' => 'Tally Prime', 'rating' => 5, 'review' => 'The Tally Prime course is the best investment I made for my career in accounting. Practical training and real-world projects gave me the confidence to handle complex tasks.'],
                        ['name' => 'Mohit Jain', 'course' => 'Python Programming', 'rating' => 4, 'review' => 'Excellent Python course with hands-on projects. The instructors go above and beyond to ensure every student understands the concepts. Highly recommended!'],
                        ['name' => 'Neha Gupta', 'course' => 'Web Design', 'rating' => 5, 'review' => 'The web design course taught me everything from HTML to advanced CSS and JavaScript. I now work as a freelance web designer thanks to Gmind Institute.'],
                    ];
                    ?>
                    <?php foreach ($fallbackTestimonials as $ftest): ?>
                    <div class="testimonial-card">
                        <div class="testimonial-card-inner">
                            <div class="testimonial-stars" aria-label="Rating: <?= $ftest['rating'] ?> out of 5">
                                <?php for ($i = 1; $i <= 5; $i++): ?>
                                <span class="star<?= $i > $ftest['rating'] ? ' empty' : '' ?>">&#9733;</span>
                                <?php endfor; ?>
                            </div>
                            <p class="testimonial-text"><?= $ftest['review'] ?></p>
                            <div class="testimonial-author">
                                <img class="testimonial-avatar" src="<?= $basePath ?>/images/avatar-default.png" alt="<?= $ftest['name'] ?>" loading="lazy">
                                <div class="testimonial-author-info">
                                    <span class="testimonial-author-name"><?= $ftest['name'] ?></span>
                                    <span class="testimonial-author-course"><?= $ftest['course'] ?></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>

            <?php if (!empty($testimonials) || !empty($fallbackTestimonials ?? [])): ?>
            <div class="testimonials-nav">
                <button class="testimonials-arrow testimonials-prev" aria-label="Previous testimonial">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
                </button>
                <div class="testimonials-dots"></div>
                <button class="testimonials-arrow testimonials-next" aria-label="Next testimonial">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
                </button>
            </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- ============================================================
     10b. Video Testimonials Section
     ============================================================ -->
<?php if (!empty($videoTestimonials)): ?>
<section class="home-video-testimonials" style="padding:60px 0; background:#F7F8FC;">
    <div class="container">
        <div style="text-align:center; margin-bottom:40px;">
            <h2 style="margin:0 0 8px; font-size:28px; font-weight:700; color:#222;"><?= __('video_testimonials.title') ?></h2>
            <p style="margin:0; font-size:16px; color:#888;"><?= __('video_testimonials.subtitle') ?></p>
        </div>

        <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px;">
            <?php foreach ($videoTestimonials as $vt):
                $embedUrl = \App\Models\VideoTestimonial::getEmbedUrl($vt['video_url']);
            ?>
            <div style="background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06); transition:transform 0.3s, box-shadow 0.3s;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)';" onmouseout="this.style.transform=''; this.style.boxShadow='0 2px 12px rgba(0,0,0,0.06)';">
                <div style="position:relative; padding-top:56.25%; background:#000;">
                    <iframe src="<?= htmlspecialchars($embedUrl, ENT_QUOTES, 'UTF-8') ?>" style="position:absolute; top:0; left:0; width:100%; height:100%; border:none;" allowfullscreen loading="lazy" title="<?= htmlspecialchars(getBilingual($vt, 'student_name') ?: 'Student', ENT_QUOTES, 'UTF-8') ?>"></iframe>
                </div>
                <div style="padding:16px 18px;">
                    <h4 style="margin:0 0 4px; font-size:15px; font-weight:600; color:#222;"><?= htmlspecialchars(getBilingual($vt, 'student_name') ?: 'Student', ENT_QUOTES, 'UTF-8') ?></h4>
                    <?php if (!empty($vt['course_name'])): ?>
                    <p style="margin:0 0 4px; font-size:13px; color:#4A6CF7; font-weight:500;"><?= htmlspecialchars(getBilingual($vt, 'course_name'), ENT_QUOTES, 'UTF-8') ?></p>
                    <?php endif; ?>
                    <?php if (!empty($vt['short_text'])): ?>
                    <p style="margin:0; font-size:13px; color:#888; line-height:1.4;">"<?= htmlspecialchars(getBilingual($vt, 'short_text'), ENT_QUOTES, 'UTF-8') ?>"</p>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ============================================================
     11. FAQ Section
     ============================================================ -->
<?php if (!empty($homeFaqs)): ?>
<section class="faq-home-section" aria-label="Frequently Asked Questions">
    <div class="container">
        <div class="section-heading">
            <h2><?= __('faq.title') ?></h2>
            <p><?= __('faq.subtitle') ?></p>
        </div>

        <div class="faq-home-grid">
            <?php foreach ($homeFaqs as $index => $faq): ?>
            <details class="faq-item animate-on-scroll"<?= $index === 0 ? ' open' : '' ?>>
                <summary class="faq-question">
                    <span><?= htmlspecialchars(getBilingual($faq, 'question') ?: '', ENT_QUOTES, 'UTF-8') ?></span>
                    <svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
                </summary>
                <div class="faq-answer">
                    <p><?= htmlspecialchars(getBilingual($faq, 'answer') ?: '', ENT_QUOTES, 'UTF-8') ?></p>
                </div>
            </details>
            <?php endforeach; ?>
        </div>

        <div style="text-align:center; margin-top:2rem;">
            <a href="<?= $basePath ?>/faq" class="btn-outline"><?= __('faq.view_all') ?></a>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ============================================================
     12b. Featured Upcoming Batches Section
     ============================================================ -->
<?php if (!empty($featuredBatches)): ?>
<section class="home-featured-batches" style="padding:60px 0; background:#fff;">
    <div class="container">
        <div style="text-align:center; margin-bottom:40px;">
            <h2 style="margin:0 0 8px; font-size:28px; font-weight:700; color:#222;"><?= __('batches.title') ?></h2>
            <p style="margin:0; font-size:16px; color:#888;"><?= __('batches.subtitle') ?></p>
        </div>

        <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px;">
            <?php foreach ($featuredBatches as $b): ?>
            <div style="background:#F7F8FC; border-radius:14px; padding:24px; border-top:4px solid #4A6CF7; transition:transform 0.3s;" onmouseover="this.style.transform='translateY(-4px)';" onmouseout="this.style.transform='';">
                <div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">
                    <div style="background:#4A6CF7; color:#fff; border-radius:10px; padding:8px 12px; text-align:center; min-width:55px;">
                        <div style="font-size:10px; text-transform:uppercase; font-weight:600;"><?= date('M', strtotime($b['start_date'])) ?></div>
                        <div style="font-size:22px; font-weight:700; line-height:1;"><?= date('d', strtotime($b['start_date'])) ?></div>
                    </div>
                    <div>
                        <h4 style="margin:0; font-size:15px; font-weight:600; color:#222;"><?= htmlspecialchars(getBilingual($b, 'batch_name') ?: '', ENT_QUOTES, 'UTF-8') ?></h4>
                        <?php if (!empty($b['course_name'])): ?>
                        <p style="margin:2px 0 0; font-size:12px; color:#4A6CF7;"><?= htmlspecialchars(getBilingual($b, 'course_name'), ENT_QUOTES, 'UTF-8') ?></p>
                        <?php endif; ?>
                    </div>
                </div>

                <div style="display:flex; flex-direction:column; gap:6px; font-size:13px; color:#666; margin-bottom:14px;">
                    <?php if (!empty($b['timing'])): ?>
                    <div style="display:flex; align-items:center; gap:6px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4A6CF7" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        <?= htmlspecialchars(getBilingual($b, 'timing') ?: ($b['timing'] ?? ''), ENT_QUOTES, 'UTF-8') ?>
                    </div>
                    <?php endif; ?>
                    <?php if (!empty($b['days'])): ?>
                    <div style="display:flex; align-items:center; gap:6px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4A6CF7" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/></svg>
                        <?= htmlspecialchars(getBilingual($b, 'days') ?: ($b['days'] ?? ''), ENT_QUOTES, 'UTF-8') ?>
                    </div>
                    <?php endif; ?>
                    <div style="display:flex; align-items:center; gap:6px;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4A6CF7" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                        <?= (int)$b['seats_available'] ?> <?= __('batches.seats_left') ?>
                    </div>
                    <?php if (!empty($b['fee'])): ?>
                    <div style="display:flex; align-items:center; gap:6px; font-weight:600; color:#222;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4A6CF7" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
                        &#8377;<?= number_format((float)$b['fee']) ?>
                    </div>
                    <?php endif; ?>
                </div>

                <a href="<?= $basePath ?>/admission" style="display:block; text-align:center; padding:8px 0; background:linear-gradient(135deg,#4A6CF7,#6C3FE8); color:#fff; border-radius:8px; font-size:13px; font-weight:600; text-decoration:none;"><?= __('courses.enroll_now') ?></a>
            </div>
            <?php endforeach; ?>
        </div>

        <div style="text-align:center; margin-top:30px;">
            <a href="<?= $basePath ?>/batch-schedule" style="display:inline-block; padding:10px 28px; border:2px solid #4A6CF7; color:#4A6CF7; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none; transition:all 0.2s;" onmouseover="this.style.background='#4A6CF7'; this.style.color='#fff';" onmouseout="this.style.background=''; this.style.color='#4A6CF7';"><?= __('batches.view_all') ?></a>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ============================================================
     Demo Class Booking Section
     ============================================================ -->
<section class="demo-class-section" aria-label="Book a Free Demo Class">
    <div class="container">
        <div class="demo-class-layout">
            <!-- Left Info -->
            <div class="demo-class-info">
                <div class="section-heading" style="text-align:left;">
                    <h2><?= __('demo.title') ?></h2>
                    <p><?= __('demo.subtitle') ?></p>
                </div>
                <ul class="demo-class-benefits">
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        <span><?= __('demo.benefit_1') ?></span>
                    </li>
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        <span><?= __('demo.benefit_2') ?></span>
                    </li>
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        <span><?= __('demo.benefit_3') ?></span>
                    </li>
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        <span><?= __('demo.benefit_4') ?></span>
                    </li>
                </ul>
            </div>

            <!-- Form -->
            <div class="demo-class-form-wrapper">
                <form method="POST" action="<?= $basePath ?>/demo-class" class="demo-class-form" novalidate>
                    <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken ?? '', ENT_QUOTES, 'UTF-8') ?>">

                    <div class="demo-form-grid">
                        <div class="demo-form-group">
                            <label for="demo_student_name"><?= __('demo.student_name') ?> <span class="required">*</span></label>
                            <input type="text" id="demo_student_name" name="student_name" required placeholder="<?= __('demo.placeholder_name') ?>">
                        </div>
                        <div class="demo-form-group">
                            <label for="demo_email"><?= __('demo.email') ?> <span class="required">*</span></label>
                            <input type="email" id="demo_email" name="email" required placeholder="<?= __('demo.placeholder_email') ?>">
                        </div>
                        <div class="demo-form-group">
                            <label for="demo_contact"><?= __('demo.contact') ?> <span class="required">*</span></label>
                            <input type="tel" id="demo_contact" name="contact" required placeholder="<?= __('demo.placeholder_phone') ?>">
                        </div>
                        <div class="demo-form-group">
                            <label for="demo_batch"><?= __('demo.preferred_batch') ?></label>
                            <select id="demo_batch" name="batch">
                                <option value=""><?= __('demo.select_batch') ?></option>
                                <option value="Morning (7-9 AM)"><?= __('demo.batch_morning_7') ?></option>
                                <option value="Morning (9-11 AM)"><?= __('demo.batch_morning_9') ?></option>
                                <option value="Afternoon (12-2 PM)"><?= __('demo.batch_afternoon_12') ?></option>
                                <option value="Afternoon (2-4 PM)"><?= __('demo.batch_afternoon_2') ?></option>
                                <option value="Evening (4-6 PM)"><?= __('demo.batch_evening_4') ?></option>
                                <option value="Evening (6-8 PM)"><?= __('demo.batch_evening_6') ?></option>
                                <option value="Weekend"><?= __('demo.batch_weekend') ?></option>
                            </select>
                        </div>
                        <div class="demo-form-group">
                            <label for="demo_course"><?= __('demo.course') ?> <span class="required">*</span></label>
                            <select id="demo_course" name="course_id" required>
                                <option value=""><?= __('demo.select_course') ?></option>
                                <?php if (!empty($featuredCourses)): ?>
                                    <?php foreach ($featuredCourses as $course): ?>
                                    <option value="<?= htmlspecialchars($course['id'] ?? '', ENT_QUOTES, 'UTF-8') ?>">
                                        <?= htmlspecialchars(getBilingual($course, 'name') ?: '', ENT_QUOTES, 'UTF-8') ?>
                                    </option>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </select>
                        </div>
                        <div class="demo-form-group">
                            <label for="demo_date"><?= __('demo.demo_date') ?> <span class="required">*</span></label>
                            <input type="date" id="demo_date" name="demo_date" required min="<?= date('Y-m-d') ?>">
                        </div>
                    </div>

                    <button type="submit" class="btn-primary demo-form-submit">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                        <?= __('demo.book_button') ?>
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     Newsletter Subscription Section
     ============================================================ -->
<?php include __DIR__ . '/newsletter_section.php'; ?>

<!-- CTA Banner -->
<section class="cta-banner" aria-label="Call to action">
    <div class="container">
        <div class="cta-content">
            <h2><?= __('cta.title') ?></h2>
            <p><?= __('cta.subtitle') ?></p>
            <div class="cta-buttons">
                <a href="<?= $basePath ?>/admission" class="btn-hero-primary"><?= __('cta.apply_now') ?></a>
                <a href="<?= $basePath ?>/contact" class="btn-hero-outline"><?= __('cta.contact_us') ?></a>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     Offer Popup (controlled from Admin Settings)
     ============================================================ -->
<?php if (!empty($offerPopup['enabled'])): ?>
<div class="offer-popup-overlay" id="offerPopupOverlay">
    <div class="offer-popup" id="offerPopup" role="dialog" aria-label="Special Offer">
        <button class="offer-popup-close" id="offerPopupClose" aria-label="<?= __('offer.close') ?>">&times;</button>
        <?php if (!empty($offerPopup['image'])): ?>
        <div class="offer-popup-image">
            <img src="<?= htmlspecialchars(upload_url($offerPopup['image']), ENT_QUOTES, 'UTF-8') ?>" alt="<?= htmlspecialchars(getBilingual($offerPopup, 'title') ?: __('offer.default_title'), ENT_QUOTES, 'UTF-8') ?>">
        </div>
        <?php endif; ?>
        <div class="offer-popup-content">
            <?php if (!empty($offerPopup['title'])): ?>
            <h3 class="offer-popup-title"><?= htmlspecialchars(getBilingual($offerPopup, 'title'), ENT_QUOTES, 'UTF-8') ?></h3>
            <?php endif; ?>
            <?php if (!empty($offerPopup['description'])): ?>
            <p class="offer-popup-desc"><?= htmlspecialchars(getBilingual($offerPopup, 'description'), ENT_QUOTES, 'UTF-8') ?></p>
            <?php endif; ?>
            <?php if (!empty($offerPopup['link'])): ?>
            <a href="<?= htmlspecialchars($offerPopup['link'], ENT_QUOTES, 'UTF-8') ?>" class="offer-popup-btn">
                <?= htmlspecialchars(getBilingual($offerPopup, 'link_text') ?: __('offer.learn_more'), ENT_QUOTES, 'UTF-8') ?>
            </a>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php endif; include __DIR__ . '/../layouts/footer.php';
?>
