<?php
/**
 * Homepage Sections — ADD THESE to your existing app/Views/home/index.php
 *
 * Place each section at the appropriate location in your homepage.
 * Each section is self-contained with its own styles.
 */
$bp = defined('BASE_PATH') ? BASE_PATH : '/gmind';
?>

<!-- ═══════════════════════════════════════════════════════════════
     SECTION 1: COUNTDOWN TIMER
     Place this AFTER the hero slider and BEFORE the stats 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($countdownData['title'], ENT_QUOTES, 'UTF-8') ?></h2>
        <p style="margin:0 0 30px; font-size:16px; opacity:0.85;"><?= htmlspecialchars($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;">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;">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;">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;">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($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; ?>


<!-- ═══════════════════════════════════════════════════════════════
     SECTION 2: VIDEO TESTIMONIALS
     Place this AFTER the text 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</h2>
            <p style="margin:0; font-size:16px; color:#888;">Hear from our students about their experience</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']);
                $ytId = \App\Models\VideoTestimonial::extractYoutubeId($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)';">
                <!-- Video Embed -->
                <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($vt['student_name'], ENT_QUOTES, 'UTF-8') ?>"></iframe>
                </div>
                <!-- Info -->
                <div style="padding:16px 18px;">
                    <h4 style="margin:0 0 4px; font-size:15px; font-weight:600; color:#222;"><?= htmlspecialchars($vt['student_name'], ENT_QUOTES, 'UTF-8') ?></h4>
                    <?php if ($vt['course_name']): ?>
                    <p style="margin:0 0 4px; font-size:13px; color:#4A6CF7; font-weight:500;"><?= htmlspecialchars($vt['course_name'], ENT_QUOTES, 'UTF-8') ?></p>
                    <?php endif; ?>
                    <?php if ($vt['short_text']): ?>
                    <p style="margin:0; font-size:13px; color:#888; line-height:1.4;">"<?= htmlspecialchars($vt['short_text'], ENT_QUOTES, 'UTF-8') ?>"</p>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>


<!-- ═══════════════════════════════════════════════════════════════
     SECTION 3: FEATURED UPCOMING BATCHES
     Place this AFTER video testimonials and BEFORE the FAQ 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;">Upcoming Batches</h2>
            <p style="margin:0; font-size:16px; color:#888;">New batches starting soon — enroll before seats fill up!</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($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($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 ($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($b['timing'], ENT_QUOTES, 'UTF-8') ?>
                    </div>
                    <?php endif; ?>
                    <?php if ($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($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'] ?> seats left
                    </div>
                    <?php if ($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>
                        ₹<?= number_format((float)$b['fee']) ?>
                    </div>
                    <?php endif; ?>
                </div>

                <a href="<?= $bp ?>/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;">Enroll Now</a>
            </div>
            <?php endforeach; ?>
        </div>

        <div style="text-align:center; margin-top:30px;">
            <a href="<?= $bp ?>/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';">View All Batches</a>
        </div>
    </div>
</section>
<?php endif; ?>
