<?php
require_once __DIR__ . '/includes/header.php';
require_once __DIR__ . '/includes/navbar.php';
require_once __DIR__ . '/includes/database.php';

$pdo = getDatabaseConnection();

// Fetch events for Featured Events & Schedule
$stmt = $pdo->query("SELECT * FROM events WHERE status IN ('PUBLISHED', 'COMPLETED') ORDER BY eventDate, reportingTime");
$allEvents = $stmt->fetchAll();

// Helper to format fee
function formatFee($fee) {
    return $fee == 0 ? 'Free' : '₹' . number_format($fee);
}

// Helper to format prize
function formatPrize($prize) {
    if ($prize == 0) return 'Certificate';
    if ($prize >= 1000) return '₹' . floor($prize / 1000) . 'K';
    return '₹' . number_format($prize);
}

// Category Icon Mapping
function getCategoryIcon($category) {
    $c = strtolower($category);
    if (strpos($c, 'coding') !== false || strpos($c, 'program') !== false) return 'code';
    if (strpos($c, 'debug') !== false || strpos($c, 'ninja') !== false) return 'bug';
    if (strpos($c, 'ui') !== false || strpos($c, 'design') !== false || strpos($c, 'hack') !== false) return 'layout';
    if (strpos($c, 'robot') !== false || strpos($c, 'hardware') !== false) return 'cpu';
    if (strpos($c, 'gaming') !== false || strpos($c, 'sport') !== false) return 'gamepad-2';
    if (strpos($c, 'startup') !== false || strpos($c, 'pitch') !== false) return 'lightbulb';
    if (strpos($c, 'business') !== false) return 'briefcase';
    if (strpos($c, 'project') !== false || strpos($c, 'showcase') !== false) return 'rocket';
    if (strpos($c, 'workshop') !== false || strpos($c, 'training') !== false) return 'wrench';
    if (strpos($c, 'paper') !== false || strpos($c, 'research') !== false) return 'flask-conical';
    if (strpos($c, 'web') !== false || strpos($c, 'app') !== false) return 'globe';
    if (strpos($c, 'quiz') !== false || strpos($c, 'knowledge') !== false) return 'book-open';
    if (strpos($c, 'speak') !== false || strpos($c, 'present') !== false) return 'mic';
    if (strpos($c, 'electric') !== false || strpos($c, 'circuit') !== false) return 'zap';
    return 'sparkles';
}

function getCategoryTab($category) {
    $c = strtolower($category);
    if (
        strpos($c, 'coding') !== false || 
        strpos($c, 'program') !== false || 
        strpos($c, 'debug') !== false
    ) {
        return 'Coding';
    }
    if (strpos($c, 'workshop') !== false || strpos($c, 'training') !== false) return 'Workshop';
    if (strpos($c, 'startup') !== false || strpos($c, 'pitch') !== false || strpos($c, 'business') !== false) return 'Ideation';
    if (strpos($c, 'project') !== false || strpos($c, 'showcase') !== false || strpos($c, 'robot') !== false) return 'Showcase';
    if (strpos($c, 'gaming') !== false || strpos($c, 'sport') !== false) return 'Gaming';
    return 'Other';
}


// Generate tabs
$tabs = ['ALL'];
foreach ($allEvents as $evt) {
    $tab = getCategoryTab($evt['category']);
    if (!in_array($tab, $tabs)) $tabs[] = $tab;
}

// Schedule Logic (Dynamic)
$scheduleDays = [];
foreach ($allEvents as $evt) {
    $dateStr = trim($evt['eventDate']);
    if (empty($dateStr)) continue;

    // Handle formats like "4 and 5 Sep 2026" or "4 & 5 September 2026"
    if (preg_match('/^(\d+)\s*(?:&|and)\s*(\d+)\s+([A-Za-z]+\s+\d{4})$/i', $dateStr, $matches)) {
        $d1 = date('j F Y', strtotime($matches[1] . ' ' . $matches[3]));
        $d2 = date('j F Y', strtotime($matches[2] . ' ' . $matches[3]));
        
        $evtDay1 = $evt;
        $evtDay2 = $evt;
        
        if ($evt['slug'] === 'battleclipse-esports') {
            $evtDay1['title'] = str_replace('esports', 'BGMI', $evt['title']);
            $evtDay2['title'] = str_replace('esports', 'FreeFire', $evt['title']);
        }
        
        $scheduleDays[$d1][] = $evtDay1;
        $scheduleDays[$d2][] = $evtDay2;
    } else {
        $d = date('j F Y', strtotime($dateStr));
        $scheduleDays[$d][] = $evt;
    }
}
// Sort chronologically
uksort($scheduleDays, function($a, $b) {
    return strtotime($a) - strtotime($b);
});

// Sort events within each day
foreach ($scheduleDays as &$dayEvents) {
    usort($dayEvents, function($a, $b) {
        $timeA = strtotime($a['reportingTime']);
        $timeB = strtotime($b['reportingTime']);
        if ($timeA !== $timeB) return $timeA <=> $timeB;
        
        // Push Battleclipse lower in the list for the same time slot
        $isBattleA = ($a['slug'] === 'battleclipse-esports') ? 1 : 0;
        $isBattleB = ($b['slug'] === 'battleclipse-esports') ? 1 : 0;
        if ($isBattleA !== $isBattleB) return $isBattleA <=> $isBattleB;
        
        return strcmp($a['title'], $b['title']);
    });
}
unset($dayEvents);
?>

<main>
    <!-- Hero animation keyframes — CSS-only so they play on every load/reload with zero JS dependency -->
    <style>
    @keyframes sn-warp-in {
        0%   { opacity: 0; transform: perspective(700px) scale(0.55) translateZ(-350px); filter: blur(10px) brightness(2.5); }
        60%  { opacity: 1; filter: blur(1px) brightness(1.1); }
        100% { opacity: 1; transform: perspective(700px) scale(1) translateZ(0); filter: none; }
    }
    @keyframes sn-fade-up {
        0%   { opacity: 0; transform: translateY(28px); filter: blur(4px); }
        100% { opacity: 1; transform: translateY(0); filter: none; }
    }
    @keyframes sn-badge-in {
        0%   { opacity: 0; transform: scale(0.85) translateY(-10px); filter: blur(4px); }
        100% { opacity: 1; transform: scale(1) translateY(0); filter: none; }
    }
    /* Hero badge */
    .sn-hero-badge {
        animation: sn-badge-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: 0.05s;
    }
    /* SUPERNOVA 2.0 title */
    #supernova-hero-heading .supernova-chrome-title {
        animation: sn-warp-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: 0.2s;
    }
    /* SPARK THE FUTURE subtitle */
    #supernova-hero-heading .supernova-spark-outline {
        animation: sn-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: 0.55s;
    }
    /* Subtitle dates */
    #supernova-hero-heading .supernova-date-subtitle {
        animation: sn-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: 0.7s;
    }
    /* Tagline paragraph */
    #sn-hero-tagline {
        animation: sn-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: 0.75s;
    }
    /* Hero stat cards & Committee member cards */
    .sn-hero-stat,
    .committee-card {
        position: relative;
        background: rgba(10, 15, 30, 0.20) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .sn-hero-stat {
        animation: sn-fade-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .sn-hero-stat:nth-child(1) { animation-delay: 0.85s; }
    .sn-hero-stat:nth-child(2) { animation-delay: 1.0s;  }
    
    .sn-hero-stat::before,
    .committee-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(150px circle at center, rgba(255,255,255,0.035), transparent 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }
    .sn-hero-stat:hover::before,
    .committee-card:hover::before {
        opacity: 1;
    }
    
    .sn-hero-stat:hover,
    .committee-card:hover {
        transform: translateY(-5px) scale(1.02);
    }

    .cyber-corner {
        position: absolute;
        width: 22px;
        height: 22px;
        border-color: currentColor;
        border-style: solid;
        opacity: 0.85;
        filter: drop-shadow(0 0 4px currentColor);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sn-hero-stat:hover .cyber-corner,
    .committee-card:hover .cyber-corner {
        opacity: 1;
        filter: drop-shadow(0 0 12px currentColor);
    }
    .corner-tl { top: -1px; left: -1px; border-width: 4px 0 0 4px; border-top-left-radius: 4px; }
    .corner-tr { top: -1px; right: -1px; border-width: 4px 4px 0 0; border-top-right-radius: 4px; }
    .corner-bl { bottom: -1px; left: -1px; border-width: 0 0 4px 4px; border-bottom-left-radius: 4px; }
    .corner-br { bottom: -1px; right: -1px; border-width: 0 4px 4px 0; border-bottom-right-radius: 4px; }

    /* Prevent scroll-animations.js from touching the hero heading
       (it's always in viewport so the JS transition-based system breaks on reload) */
    #supernova-hero-heading { data-sn-hero: "true"; }
    </style>

    <!-- HERO / ABOUT SECTION -->
    <section id="about" class="relative pt-36 pb-20 md:pt-48 md:pb-36 overflow-hidden flex flex-col items-center justify-center text-center px-4 bg-cyber-grid bg-radial-glow">
        <div class="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[550px] bg-gradient-to-r from-purple-900/30 via-cyan-500/20 to-blue-900/30 rounded-full blur-[160px] pointer-events-none transform-gpu"></div>

        <!-- data-animate="skip" prevents scroll-animations.js from touching this element -->
        <h1 class="mb-6 max-w-7xl w-full leading-none" id="supernova-hero-heading" data-animate="skip">
            <img src="<?= APP_URL ?>/assets/img/Untitled%20-%20August%2013,%202026%20at%2022.42.07.png" alt="SUPERNOVA 2.0" class="supernova-chrome-title block mx-auto w-[110%] max-w-7xl object-contain drop-shadow-2xl scale-110 md:scale-100 mt-4 md:mt-0 mb-6">
            <span class="supernova-spark-outline text-2xl sm:text-4xl lg:text-5xl mt-6 block font-extrabold tracking-[0.22em]">
                SPARK THE FUTURE
            </span>
            <span class="supernova-date-subtitle text-slate-300 text-xl sm:text-3xl md:text-4xl mt-6 block tracking-[0.18em] uppercase" style="font-family: 'Oxanium', sans-serif; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,0.65);">
                4 & 5 September 2026
            </span>
        </h1>



        <!-- Floating Text Stats -->
        <style>
            @keyframes float-text {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-12px); }
            }
            .floating-stat {
                animation: float-text 4s ease-in-out infinite;
                text-align: center;
                padding: 20px;
            }
            .floating-stat.stat-delay {
                animation-delay: 2s;
            }
        </style>
        <div class="flex flex-col sm:flex-row justify-center items-center gap-160 sm:gap-[15vw] md:gap-[30vw] w-full max-w-[90%] mx-auto mb-20" data-animate="skip">
            <!-- Stat 1: Prize Pool -->
            <div class="floating-stat">
                <div style="font-family:'Orbitron',sans-serif;font-size:clamp(28px,5vw,42px);font-weight:900;color:#fff;text-shadow:0 0 25px #f59e0b,0 0 50px #f59e0b;letter-spacing:0.05em;">₹1 LAKH</div>
                <div style="font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:0.3em;color:rgba(251,191,36,0.9);font-weight:700;margin-top:8px;">TOTAL PRIZE POOL</div>
            </div>

            
            <!-- Stat 2: Events -->
            <div class="floating-stat stat-delay">
                <div style="font-family:'Orbitron',sans-serif;font-size:clamp(28px,5vw,42px);font-weight:900;color:#fff;text-shadow:0 0 25px #06b6d4,0 0 50px #06b6d4;letter-spacing:0.05em;">9 EVENTS</div>
                <div style="font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:0.3em;color:rgba(103,232,249,0.9);font-weight:700;margin-top:8px;">FLAGSHIP EVENTS</div>
            </div>
        </div>


        <!-- Live Monospaced Countdown -->
        <!-- Rolling Digit Countdown -->
        <div class="my-8">
            <div class="text-[11px] font-mono-cyber uppercase tracking-widest text-cyan-400 mb-6 flex items-center justify-center gap-2">
                <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-ping"></span>
                SUPERNOVA BEGINS IN
            </div>

            <style>
            /* ---- Supernova Rolling Digit Countdown ---- */
            #sn-countdown {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0;
                font-family: 'Black Ops One', 'Bebas Neue', monospace;
            }
            .sn-unit {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
            }
            .sn-unit-label {
                font-family: 'Share Tech Mono', monospace;
                font-size: 10px;
                font-weight: bold;
                letter-spacing: 0.25em;
                color: rgba(100,220,255,0.85);
                text-transform: uppercase;
                margin-top: 8px;
            }
            .sn-digits-row {
                display: flex;
                gap: 3px;
            }
            /* Each single digit column */
            .sn-digit-col {
                width: clamp(36px, 6vw, 72px);
                height: clamp(52px, 9vw, 100px);
                overflow: hidden;
                position: relative;
                border-radius: 8px;
                background: rgba(6, 10, 28, 0.85);
                border: 1px solid rgba(6,182,212,0.18);
                box-shadow:
                    0 0 12px rgba(6,182,212,0.07),
                    inset 0 1px 0 rgba(255,255,255,0.05),
                    inset 0 -1px 0 rgba(0,0,0,0.4);
            }
            /* Fade masks top and bottom */
            .sn-digit-col::before,
            .sn-digit-col::after {
                content: '';
                position: absolute;
                left: 0; right: 0;
                height: 30%;
                z-index: 2;
                pointer-events: none;
            }
            .sn-digit-col::before {
                top: 0;
                background: linear-gradient(to bottom, rgba(3,6,20,0.95) 0%, transparent 100%);
            }
            .sn-digit-col::after {
                bottom: 0;
                background: linear-gradient(to top, rgba(3,6,20,0.95) 0%, transparent 100%);
            }
            /* The sliding strip */
            .sn-digit-strip {
                display: flex;
                flex-direction: column;
                transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
                will-change: transform;
            }
            /* Each individual digit cell */
            .sn-digit-cell {
                display: flex;
                align-items: center;
                justify-content: center;
                width: clamp(36px, 6vw, 72px);
                height: clamp(52px, 9vw, 100px);
                font-size: clamp(28px, 5vw, 64px);
                font-weight: 900;
                line-height: 1;
                color: #e0f0ff;
                text-shadow:
                    0 0 15px rgba(80,180,255,0.5),
                    0 1px 0 rgba(255,255,255,0.15);
                user-select: none;
            }
            /* Separator colon */
            .sn-sep {
                font-family: 'Share Tech Mono', monospace;
                font-size: clamp(24px, 4vw, 52px);
                font-weight: 900;
                color: rgba(6,182,212,0.5);
                padding: 0 clamp(4px, 1vw, 10px);
                margin-bottom: 26px;
                line-height: 1;
                text-shadow: 0 0 10px rgba(6,182,212,0.4);
                animation: snColonPulse 1s step-start infinite;
            }
            @keyframes snColonPulse {
                0%, 100% { opacity: 1; }
                50%       { opacity: 0.2; }
            }
            /* Highlight bar across the center active digit */
            .sn-digit-col .sn-active-bar {
                position: absolute;
                left: 0; right: 0;
                top: 50%;
                transform: translateY(-50%);
                height: clamp(52px, 9vw, 100px);
                border-top: 1px solid rgba(6,182,212,0.25);
                border-bottom: 1px solid rgba(6,182,212,0.25);
                background: linear-gradient(180deg,
                    rgba(6,182,212,0.04) 0%,
                    rgba(6,182,212,0.09) 50%,
                    rgba(6,182,212,0.04) 100%);
                z-index: 1;
                pointer-events: none;
            }
            </style>

            <div id="sn-countdown">
                <!-- DAYS -->
                <div class="sn-unit" id="sn-unit-days">
                    <div class="sn-digits-row">
                        <div class="sn-digit-col" id="sn-days-t"><div class="sn-active-bar"></div><div class="sn-digit-strip"></div></div>
                        <div class="sn-digit-col" id="sn-days-o"><div class="sn-active-bar"></div><div class="sn-digit-strip"></div></div>
                    </div>
                    <span class="sn-unit-label">Days</span>
                </div>

                <span class="sn-sep">:</span>

                <!-- HOURS -->
                <div class="sn-unit" id="sn-unit-hours">
                    <div class="sn-digits-row">
                        <div class="sn-digit-col" id="sn-hours-t"><div class="sn-active-bar"></div><div class="sn-digit-strip"></div></div>
                        <div class="sn-digit-col" id="sn-hours-o"><div class="sn-active-bar"></div><div class="sn-digit-strip"></div></div>
                    </div>
                    <span class="sn-unit-label">Hours</span>
                </div>

                <span class="sn-sep">:</span>

                <!-- MINUTES -->
                <div class="sn-unit" id="sn-unit-mins">
                    <div class="sn-digits-row">
                        <div class="sn-digit-col" id="sn-mins-t"><div class="sn-active-bar"></div><div class="sn-digit-strip"></div></div>
                        <div class="sn-digit-col" id="sn-mins-o"><div class="sn-active-bar"></div><div class="sn-digit-strip"></div></div>
                    </div>
                    <span class="sn-unit-label">Minutes</span>
                </div>

                <span class="sn-sep">:</span>

                <!-- SECONDS -->
                <div class="sn-unit" id="sn-unit-secs">
                    <div class="sn-digits-row">
                        <div class="sn-digit-col" id="sn-secs-t"><div class="sn-active-bar"></div><div class="sn-digit-strip"></div></div>
                        <div class="sn-digit-col" id="sn-secs-o"><div class="sn-active-bar"></div><div class="sn-digit-strip"></div></div>
                    </div>
                    <span class="sn-unit-label">Seconds</span>
                </div>
            </div>
        </div>


        <div class="flex flex-wrap justify-center gap-4 mt-2">
            <a href="<?= APP_URL ?>/events" class="px-8 py-4 rounded-xl bg-gradient-to-r from-cyan-500 via-blue-600 to-purple-600 hover:from-cyan-400 hover:to-purple-500 text-slate-950 font-black font-mono-cyber text-base tracking-wider transition-all shadow-glow-cyan flex items-center gap-2">
                BROWSE ALL EVENTS <i data-lucide="arrow-right" class="w-5 h-5"></i>
            </a>
        </div>
    </section>

    <!-- FEATURED EVENTS SECTION -->
    <section id="events" class="py-24 px-4 max-w-7xl mx-auto relative bg-cyber-grid">
        <div class="text-center mb-12">
            <span class="text-cyan-400 text-xs font-mono-cyber uppercase tracking-widest px-4 py-1.5 rounded-full bg-cyan-500/10 border border-cyan-500/30">
                FEATURED COMPETITIONS & WORKSHOPS
            </span>
            <h2 class="text-4xl sm:text-5xl font-heading-cyber font-extrabold text-white mt-6">
                SUPERNOVA 2.0 LINEUP
            </h2>
        </div>

        <div class="flex flex-wrap justify-center gap-2 mb-12" id="event-tabs">
            <?php foreach ($tabs as $tab): ?>
            <button data-tab="<?= htmlspecialchars($tab) ?>" class="event-filter-btn px-5 py-2 rounded-xl text-xs font-mono-cyber tracking-wider transition-all flex items-center gap-1.5 <?= $tab === 'ALL' ? 'bg-gradient-to-r from-cyan-500 to-purple-600 text-slate-950 font-black shadow-glow-cyan' : 'glass-panel text-slate-400 hover:text-white hover:border-cyan-500/40' ?>">
                <i data-lucide="filter" class="w-3 h-3"></i> <?= htmlspecialchars($tab) ?>
            </button>
            <?php endforeach; ?>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="events-grid">
            <?php if (count($allEvents) === 0): ?>
                <div class="col-span-3 text-center py-20 glass-panel rounded-2xl border border-white/10">
                    <i data-lucide="sparkles" class="w-10 h-10 text-cyan-400 mx-auto mb-4 opacity-40"></i>
                    <p class="text-slate-400 text-lg">No events available right now. Check back soon!</p>
                </div>
            <?php else: 
                // Define priority order for featured lineup
                $featuredEvents = $allEvents;
                usort($featuredEvents, function($a, $b) {
                    $priority = [
                        'SparkX - Startup Pitching' => 1,
                        'Stellar - Hackthon' => 2,
                        'Protonova - Project Competition' => 3
                    ];
                    $pa = $priority[$a['title']] ?? 99;
                    $pb = $priority[$b['title']] ?? 99;
                    
                    if ($pa !== $pb) return $pa <=> $pb;
                    
                    // Fallback to time sorting
                    return strtotime($a['eventDate'] . ' ' . $a['reportingTime']) <=> strtotime($b['eventDate'] . ' ' . $b['reportingTime']);
                });
            ?>
                <?php foreach ($featuredEvents as $evt): 
                    $catTab = getCategoryTab($evt['category']);
                ?>
                <div class="event-card glass-card p-6 rounded-2xl border border-cyan-500/20 flex flex-col justify-between group hover:border-cyan-400/80 hover:shadow-glow-cyan transition-all relative overflow-hidden" data-category="<?= htmlspecialchars($catTab) ?>">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-br from-cyan-500/10 to-purple-500/10 rounded-bl-full pointer-events-none group-hover:scale-125 transition-transform"></div>
                    <div>
                        <div class="flex items-center justify-between gap-2 mb-4">
                            <?php 
                                $expectedLogo = '/assets/img/events/' . $evt['title'] . '.png';
                                $hasLogo = !empty($evt['bannerUrl']) || file_exists(__DIR__ . $expectedLogo);
                                $logoSrc = !empty($evt['bannerUrl']) ? APP_URL . $evt['bannerUrl'] : APP_URL . $expectedLogo;
                            ?>
                            <?php if ($hasLogo): ?>
                                <div class="w-12 h-12 rounded-xl bg-black border border-cyan-500/30 p-1 shrink-0 group-hover:scale-110 transition-transform overflow-hidden shadow-glow-cyan flex items-center justify-center">
                                    <img src="<?= htmlspecialchars($logoSrc) ?>" alt="<?= htmlspecialchars($evt['title']) ?>" class="w-full h-full object-contain invert">
                                </div>
                            <?php else: ?>
                                <div class="p-3 rounded-xl bg-cyan-500/10 text-cyan-400 border border-cyan-500/30 group-hover:scale-110 group-hover:bg-cyan-500/20 transition-all shrink-0">
                                    <i data-lucide="<?= getCategoryIcon($evt['category']) ?>" class="w-6 h-6"></i>
                                </div>
                            <?php endif; ?>
                        </div>
                        <span class="text-[11px] font-mono-cyber font-bold text-purple-400 uppercase tracking-wider block mb-1">
                            <?= htmlspecialchars($evt['category']) ?>
                        </span>
                        <h3 class="text-2xl font-heading-cyber font-bold text-slate-100 group-hover:text-cyan-400 transition-colors mb-2">
                            <?= htmlspecialchars($evt['title']) ?>
                        </h3>
                        <p class="text-slate-400 font-tech text-sm line-clamp-3 mb-6 leading-relaxed">
                            <?= htmlspecialchars($evt['description']) ?>
                        </p>
                    </div>
                    <div>
                        <div class="space-y-2 text-xs font-mono-cyber text-slate-300 border-t border-white/10 pt-4 mb-6">
                            <div class="flex items-center gap-2">
                                <i data-lucide="calendar" class="w-4 h-4 text-cyan-400 shrink-0"></i>
                                <span><?= htmlspecialchars($evt['eventDate']) ?> • <?= htmlspecialchars($evt['reportingTime']) ?></span>
                            </div>
                            <div class="flex items-center gap-2">
                                <i data-lucide="map-pin" class="w-4 h-4 text-cyan-400 shrink-0"></i>
                                <span class="truncate"><?= htmlspecialchars($evt['venue']) ?></span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between border-t border-white/10 pt-4">
                            <div>
                                <span class="text-[10px] text-slate-500 uppercase font-mono-cyber block">ENTRY FEE</span>
                                <span class="text-base font-bold font-mono-cyber text-cyan-400"><?= formatFee($evt['registrationFee']) ?></span>
                            </div>
                            <a href="<?= APP_URL ?>/events/details.php?slug=<?= htmlspecialchars($evt['slug']) ?>" class="px-4 py-2 rounded-xl bg-slate-900 hover:bg-cyan-500 hover:text-slate-950 text-slate-200 font-mono-cyber font-bold text-xs border border-cyan-500/30 transition-all flex items-center gap-1">
                                DETAILS <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </section>

    <!-- SCHEDULE TIMELINE SECTION -->
    <section id="schedule" class="py-24 px-4 max-w-5xl mx-auto relative bg-cyber-grid">
        <div class="text-center mb-12">
            <span class="text-cyan-400 text-xs font-mono-cyber uppercase tracking-widest px-4 py-1.5 rounded-full bg-cyan-500/10 border border-cyan-500/30">
                [EVENT SCHEDULE & TIMELINE]
            </span>
            <h2 class="text-4xl sm:text-5xl font-heading-cyber font-extrabold text-white mt-6">
                SUPERNOVA 2.0 SCHEDULE
            </h2>
        </div>

        <div class="flex flex-wrap justify-center items-center gap-3 sm:gap-4 mb-12" id="schedule-tabs">
            <?php 
            $dayIndex = 1;
            foreach ($scheduleDays as $dayDate => $eventsForDay): 
                $btnClasses = ($dayIndex === 1) 
                    ? "schedule-tab-btn px-5 sm:px-6 py-3 rounded-xl text-xs font-mono-cyber font-bold tracking-wider transition-all flex items-center gap-2 bg-gradient-to-r from-cyan-500 to-purple-600 text-slate-950 shadow-glow-cyan"
                    : "schedule-tab-btn px-5 sm:px-6 py-3 rounded-xl text-xs font-mono-cyber font-bold tracking-wider transition-all flex items-center gap-2 glass-panel bg-slate-900/30 border border-white/20 text-slate-200 hover:text-white hover:border-cyan-400/60";
                
                $badgeClasses = ($dayIndex === 1) ? "bg-slate-950/30" : "bg-white/10";
            ?>
            <button data-day="day<?= $dayIndex ?>" class="<?= $btnClasses ?>">
                <i data-lucide="calendar" class="w-4 h-4"></i> DAY <?= $dayIndex ?> • <?= strtoupper(htmlspecialchars($dayDate)) ?>
                <span class="ml-1 <?= $badgeClasses ?> px-1.5 py-0.5 rounded-md text-[10px]"><?= count($eventsForDay) ?></span>
            </button>
            <?php 
                $dayIndex++;
            endforeach; 
            ?>
        </div>

        <div class="relative space-y-6 before:absolute before:left-4 sm:before:left-8 before:-translate-x-1/2 before:top-4 before:bottom-4 before:w-0.5 before:bg-gradient-to-b before:from-cyan-500 before:via-purple-500 before:to-blue-600" id="schedule-container">
            <?php 
            $dayIndex = 1;
            foreach ($scheduleDays as $dayDate => $eventsForDay): 
            ?>
            <!-- Day <?= $dayIndex ?> Events -->
            <div id="schedule-day<?= $dayIndex ?>" class="schedule-list space-y-4 <?= ($dayIndex === 1) ? '' : 'hidden' ?>">
                <?php if(empty($eventsForDay)): ?>
                    <div class="relative pl-10 sm:pl-16">
                        <div class="glass-panel p-8 rounded-2xl border border-cyan-500/10 flex flex-col items-center gap-3 text-center">
                            <i data-lucide="sparkles" class="w-8 h-8 text-cyan-400 opacity-30"></i>
                            <p class="text-slate-400 text-sm font-mono-cyber">No events scheduled for this day yet.</p>
                        </div>
                    </div>
                <?php else: ?>
                    <?php foreach ($eventsForDay as $item): ?>
                        <div class="relative pl-14 sm:pl-20 group">
                            <div class="absolute z-10 left-4 sm:left-8 top-6 -translate-x-1/2 w-4 h-4 rounded-full bg-slate-950 border-2 border-cyan-400 group-hover:bg-cyan-400 group-hover:scale-125 transition-all shadow-glow-cyan"></div>
                            <div class="glass-panel bg-slate-950/20 p-6 rounded-2xl border border-white/10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 hover:border-cyan-400/80 hover:bg-slate-900/40 hover:shadow-glow-cyan transition-all">
                                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
                                    <div class="p-3 rounded-xl bg-cyan-500/10 text-cyan-400 font-mono-cyber font-bold text-sm border border-cyan-500/30 flex items-center gap-2 shrink-0">
                                        <i data-lucide="clock" class="w-4 h-4 text-cyan-300"></i> <?= htmlspecialchars($item['reportingTime']) ?>
                                    </div>
                                    <div>
                                        <span class="text-[10px] font-mono-cyber font-bold text-purple-400 uppercase tracking-widest block"><?= htmlspecialchars($item['category']) ?></span>
                                        <a href="<?= APP_URL ?>/events/details.php?slug=<?= htmlspecialchars($item['slug']) ?>" class="text-xl font-heading-cyber font-bold text-slate-100 group-hover:text-cyan-400 transition-colors hover:underline">
                                            <?= htmlspecialchars($item['title']) ?>
                                        </a>
                                        <?php if ($item['slug'] === 'battleclipse-esports'): ?>
                                        <div class="flex gap-2 mt-2">
                                            <?php if (strpos($item['title'], 'BGMI') !== false): ?>
                                            <span class="px-2 py-0.5 rounded-md bg-orange-500/20 text-orange-400 text-[10px] font-mono-cyber font-bold border border-orange-500/30">BGMI</span>
                                            <?php elseif (strpos($item['title'], 'FreeFire') !== false): ?>
                                            <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] font-mono-cyber font-bold border border-red-500/30">FREE FIRE</span>
                                            <?php else: ?>
                                            <span class="px-2 py-0.5 rounded-md bg-orange-500/20 text-orange-400 text-[10px] font-mono-cyber font-bold border border-orange-500/30">BGMI</span>
                                            <span class="px-2 py-0.5 rounded-md bg-red-500/20 text-red-400 text-[10px] font-mono-cyber font-bold border border-red-500/30">FREE FIRE</span>
                                            <?php endif; ?>
                                        </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2 text-xs font-mono-cyber text-slate-300 bg-slate-900/30 px-4 py-2 rounded-xl border border-cyan-500/20 shrink-0">
                                    <i data-lucide="map-pin" class="w-4 h-4 text-cyan-400"></i>
                                    <span><?= htmlspecialchars($item['venue']) ?></span>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
            <?php 
                $dayIndex++;
            endforeach; 
            ?>
        </div>
    </section>

    <!-- COMMITTEE SECTION -->
    <section id="committee" class="py-24 px-4 max-w-5xl mx-auto text-center relative bg-cyber-grid">
        <div class="mb-12">
            <span class="text-cyan-400 text-xs font-mono-cyber uppercase tracking-widest px-4 py-1.5 rounded-full bg-cyan-500/10 border border-cyan-500/30">
                [STUDENT LEADERSHIP]
            </span>
            <h2 class="text-4xl sm:text-5xl font-heading-cyber font-extrabold text-white mt-6">
                ORGANIZING COMMITTEE
            </h2>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <?php 
            $committee = [
                ['name' => 'Khush Motwani',    'role' => 'Committee Head', 'photo' => APP_URL . '/assets/img/committee/khush-motwani.png'],
                ['name' => 'Jagruti Pardeshi', 'role' => 'Committee Head', 'photo' => APP_URL . '/assets/img/committee/jagruti-pardeshi.jpeg'],
                ['name' => 'Ghazi Haniya',      'role' => 'Committee Head', 'photo' => APP_URL . '/assets/img/committee/hania-ghazi.png'],
                ['name' => 'Hitesh Phule',     'role' => 'Committee Head', 'photo' => APP_URL . '/assets/img/committee/hitesh-phule.png'],
            ];
            foreach ($committee as $member): 
                $initials = substr($member['name'], 0, 1) . substr(strrchr($member['name'], " "), 1, 1);
                $hasPhoto = !empty($member['photo']);
            ?>
            <div class="committee-card glass-panel p-6 sm:p-7 rounded-xl border-2 border-cyan-500/35 shadow-[0_0_15px_rgba(6,182,212,0.12)] text-center hover:border-cyan-400/90 hover:shadow-[0_0_35px_rgba(6,182,212,0.35)] transition-all group relative overflow-hidden flex flex-col h-full">
                <!-- Cyber Corners -->
                <div class="cyber-corner corner-tl text-cyan-400"></div>
                <div class="cyber-corner corner-tr text-cyan-400"></div>
                <div class="cyber-corner corner-bl text-cyan-400"></div>
                <div class="cyber-corner corner-br text-cyan-400"></div>
                <div class="shrink-0 rounded-full bg-gradient-to-tr from-purple-600 via-cyan-400 to-blue-600 p-0.5 mx-auto mb-4 shadow-glow-cyan group-hover:scale-110 transition-transform duration-300" style="<?= $hasPhoto ? 'width: 10rem; height: 10rem;' : 'width: 5rem; height: 5rem;' ?>">
                    <?php if ($hasPhoto): ?>
                        <img
                            src="<?= htmlspecialchars($member['photo']) ?>"
                            alt="<?= htmlspecialchars($member['name']) ?>"
                            class="w-full h-full rounded-full object-cover object-center"
                        />
                    <?php else: ?>
                        <div class="w-full h-full bg-slate-950 rounded-full flex items-center justify-center text-cyan-400 font-mono-cyber font-extrabold text-2xl">
                            <?= $initials ?>
                        </div>
                    <?php endif; ?>
                </div>
                <h3 class="text-2xl font-heading-cyber font-bold text-slate-100 group-hover:text-cyan-400 transition-colors mb-4">
                    <?= htmlspecialchars($member['name']) ?>
                </h3>
                <div class="mt-auto">
                    <span class="inline-flex items-center gap-1.5 text-xs font-mono-cyber font-bold text-cyan-400 bg-cyan-500/10 px-3.5 py-1.5 rounded-full border border-cyan-500/30">
                        <i data-lucide="shield-check" class="w-3.5 h-3.5"></i> <?= htmlspecialchars($member['role']) ?>
                    </span>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </section>


</main>

<!-- Page Specific Scripts -->
<script src="<?= APP_URL ?>/assets/js/home.js?v=<?= filemtime(__DIR__ . '/assets/js/home.js') ?>"></script>
<script src="<?= APP_URL ?>/assets/js/fleet-flyover.js?v=<?= filemtime(__DIR__ . '/assets/js/fleet-flyover.js') ?>"></script>


<?php require_once __DIR__ . '/includes/footer.php'; ?>
