<?php
/**
 * public_html/gallery.php — Supernova Gallery Page
 * Rebuilt strictly to match Figma Design Template (https://www.figma.com/make/wgThL16vavqD7kTBRGY0sq/Event-gallery-page)
 *
 * Page Structure & Design Specifications:
 *   1. Section 1: Previous Edition Intro — Header bar, Left Logo Box (solid purple border, corner brackets, star icon, logo tag), Right Info (exact text, 4 scale stats)
 *   2. Section 2: Full-Bleed Hero Image Banner — High-resolution image, dark gradient overlay, overlay badge & title
 *   3. Section 3: Previous Year — Moments — Header bar, subtitle, filter tabs (ALL, CEREMONIES, ROBOTICS, TECHNICAL, ESPORTS), 30 photo masonry items
 *   4. Section 4: Video Highlights — Header bar, < PREV / NEXT > controls, 5 horizontal video cards with duration tags & play overlays
 *   5. Section 5: Forward Teaser (Supernova 2.0 CTA) — Date & venue, sharp REGISTER NOW button
 *   6. Modals: Fullscreen Photo Lightbox (01 / 30 counter, prev/next, arrow keys) & Embedded Video Player Modal
 *
 * HARD REQUIREMENT ENFORCED:
 *   All major image containers, boxes, buttons, cards & modals use sharp 90-degree corners (border-radius: 0 !important;)
 */

require_once __DIR__ . '/includes/header.php';
require_once __DIR__ . '/includes/navbar.php';

/* Photo Gallery Data (30 Individual Photos from Supernova 2025 Archive) */
$galleryPhotos = [
    [
        'id'       => 'photo-1',
        'src'      => APP_URL . '/assets/img/gallery/Inaugration.JPG',
        'title'    => 'Grand Festival Inauguration',
        'category' => 'CEREMONIES',
        'desc'     => 'Dignitaries and organizing committee opening Supernova with the ceremonial lighting.'
    ],
    [
        'id'       => 'photo-2',
        'src'      => APP_URL . '/assets/img/gallery/cosmobolt roborace.JPG',
        'title'    => 'Cosmobolt RoboRace Arena',
        'category' => 'ROBOTICS',
        'desc'     => 'Custom obstacle track featuring high-speed autonomous and RC robot racers.'
    ],
    [
        'id'       => 'photo-3',
        'src'      => APP_URL . '/assets/img/gallery/Codeburst.JPG',
        'title'    => 'CodeBurst Competitive Arena',
        'category' => 'TECHNICAL',
        'desc'     => 'Programmers competing in intense speed algorithmic coding challenges.'
    ],
    [
        'id'       => 'photo-4',
        'src'      => APP_URL . '/assets/img/gallery/battleclipse 1.JPG',
        'title'    => 'Battleclipse Esports Championship',
        'category' => 'ESPORTS',
        'desc'     => 'Esports teams battling in high-stakes gaming tournaments.'
    ],
    [
        'id'       => 'photo-5',
        'src'      => APP_URL . '/assets/img/gallery/protonova 1.JPG',
        'title'    => 'Protonova Project Exhibition',
        'category' => 'TECHNICAL',
        'desc'     => 'Students demonstrating innovative hardware and software prototype solutions.'
    ],
    [
        'id'       => 'photo-6',
        'src'      => APP_URL . '/assets/img/gallery/sparkx.JPG',
        'title'    => 'SparkX Pitching Arena',
        'category' => 'TECHNICAL',
        'desc'     => 'Startup founders presenting groundbreaking business models to industry mentors.'
    ],
    [
        'id'       => 'photo-7',
        'src'      => APP_URL . '/assets/img/gallery/Junior Sharks 1.JPG',
        'title'    => 'Junior Sharks Pitch Deck',
        'category' => 'TECHNICAL',
        'desc'     => 'Young innovators presenting futuristic ideas to executive jury panels.'
    ],
    [
        'id'       => 'photo-8',
        'src'      => APP_URL . '/assets/img/gallery/Stellar.JPG',
        'title'    => 'Stellar Hackathon Arena',
        'category' => 'TECHNICAL',
        'desc'     => 'Developers coding nonstop through the 24-hour national hackathon challenge.'
    ],
    [
        'id'       => 'photo-9',
        'src'      => APP_URL . '/assets/img/gallery/Organizing Committee.JPG',
        'title'    => 'Core Organizing Team',
        'category' => 'CEREMONIES',
        'desc'     => 'Student leads and faculty coordinators behind Supernova.'
    ],
    [
        'id'       => 'photo-10',
        'src'      => APP_URL . 
        '/assets/img/gallery/Robo Race Track.JPG',
        'title'    => 'Robo Race Track Setup',
        'category' => 'ROBOTICS',
        'desc'     => 'Precision track layout designed for speed and navigation testing.'
    ],
    [
        'id'       => 'photo-11',
        'src'      => APP_URL . '/assets/img/gallery/Supernova Delegates.JPG',
        'title'    => 'Dignitaries & Keynote Guests',
        'category' => 'CEREMONIES',
        'desc'     => 'University leadership and chief guests attending the inaugural address.'
    ],
    [
        'id'       => 'photo-12',
        'src'      => APP_URL . '/assets/img/gallery/Director%20.jpeg',
        'title'    => 'Director Address',
        'category' => 'CEREMONIES',
        'desc'     => 'Director addressing delegates and participants at Supernova.'
    ],
    [
        'id'       => 'photo-13',
        'src'      => APP_URL . '/assets/img/gallery/inaugration 2.JPG',
        'title'    => 'Lamp Lighting Ceremony',
        'category' => 'CEREMONIES',
        'desc'     => 'Ceremonial commencement marking the launch of the technical festival.'
    ],
    [
        'id'       => 'photo-14',
        'src'      => APP_URL . '/assets/img/gallery/Protonova 3.JPG',
        'title'    => 'Hardware Prototype Showcase',
        'category' => 'TECHNICAL',
        'desc'     => 'Live demonstration of IoT and robotics innovation projects.'
    ],
    [
        'id'       => 'photo-15',
        'src'      => APP_URL . '/assets/img/gallery/Protonova 4.JPG',
        'title'    => 'Jury Project Evaluation',
        'category' => 'TECHNICAL',
        'desc'     => 'Expert jury evaluating student engineering solutions.'
    ],
    [
        'id'       => 'photo-16',
        'src'      => APP_URL . '/assets/img/gallery/Stellar Team.JPG',
        'title'    => 'Hackathon Development Sprint',
        'category' => 'TECHNICAL',
        'desc'     => 'Teams working late into the night building software prototypes.'
    ],
    [
        'id'       => 'photo-17',
        'src'      => APP_URL . '/assets/img/gallery/DOP_3596.JPG',
        'title'    => 'Robotics Track Obstacle Test',
        'category' => 'ROBOTICS',
        'desc'     => 'Robots navigating challenging terrain and turns on the track.'
    ],
    [
        'id'       => 'photo-18',
        'src'      => APP_URL . '/assets/img/gallery/DOP_3668.JPG',
        'title'    => 'Autonomous Bot Trials',
        'category' => 'ROBOTICS',
        'desc'     => 'High-precision sensor calibration before the final RoboRace.'
    ],
    [
        'id'       => 'photo-19',
        'src'      => APP_URL . '/assets/img/gallery/DOP_3854.JPG',
        'title'    => 'Audience & Festival Crowd',
        'category' => 'CEREMONIES',
        'desc'     => 'Students and participants filling the main auditorium.'
    ],
    [
        'id'       => 'photo-20',
        'src'      => APP_URL . '/assets/img/gallery/DOP_3958.JPG',
        'title'    => 'Algorithmic Speed Challenge',
        'category' => 'TECHNICAL',
        'desc'     => 'Coders solving complex algorithmic problems under time pressure.'
    ],
    [
        'id'       => 'photo-21',
        'src'      => APP_URL . '/assets/img/gallery/DOP_4102.JPG',
        'title'    => 'Innovative Engineering Exhibition',
        'category' => 'TECHNICAL',
        'desc'     => 'Student project displays open to visiting delegates.'
    ],
    [
        'id'       => 'photo-22',
        'src'      => APP_URL . '/assets/img/gallery/DOP_4125.JPG',
        'title'    => 'Interactive Tech Workshop',
        'category' => 'TECHNICAL',
        'desc'     => 'Hands-on technical session led by industry experts.'
    ],
    [
        'id'       => 'photo-23',
        'src'      => APP_URL . '/assets/img/gallery/DOP_4191.JPG',
        'title'    => 'Esports Arena Stage',
        'category' => 'ESPORTS',
        'desc'     => 'Pro gamers competing live on stage in front of the audience.'
    ],
    [
        'id'       => 'photo-24',
        'src'      => APP_URL . '/assets/img/gallery/DOP_4251.JPG',
        'title'    => 'Gaming Tournament Knockout',
        'category' => 'ESPORTS',
        'desc'     => 'Intense finals match during the Esports tournament.'
    ],
    [
        'id'       => 'photo-25',
        'src'      => APP_URL . '/assets/img/gallery/DOP_4265.JPG',
        'title'    => 'Organizing Committee & Delegates',
        'category' => 'CEREMONIES',
        'desc'     => 'Grand auditorium group gathering of student coordinators, faculty, and delegates.'
    ],
    [
        'id'       => 'photo-26',
        'src'      => APP_URL . '/assets/img/gallery/DOP_4334.JPG',
        'title'    => 'Startup Pitch Presentation',
        'category' => 'TECHNICAL',
        'desc'     => 'Entrepreneurs pitching business models to potential investors.'
    ],
    [
        'id'       => 'photo-27',
        'src'      => APP_URL . '/assets/img/gallery/DOP_4593.JPG',
        'title'    => 'Valedictory Award Ceremony',
        'category' => 'CEREMONIES',
        'desc'     => 'Winners receiving trophies and certificates on stage.'
    ],
    [
        'id'       => 'photo-28',
        'src'      => APP_URL . '/assets/img/gallery/DOP_4636 2.JPG',
        'title'    => 'Valedictory Award Ceremony',
        'category' => 'CEREMONIES',
        'desc'     => 'Dignitaries and award winners on stage during the valedictory session.',
        'pos'      => 'center 25%'
    ],
    [
        'id'       => 'photo-29',
        'src'      => APP_URL . '/assets/img/gallery/DOP_4661.JPG',
        'title'    => 'Supernova Celebration Highlights',
        'category' => 'CEREMONIES',
        'desc'     => 'Moments of celebration and achievement at Supernova.'
    ],
    [
        'id'       => 'photo-30',
        'src'      => APP_URL . '/assets/img/gallery/keynote_speaker.jpg',
        'title'    => 'Keynote Speaker Session',
        'category' => 'CEREMONIES',
        'desc'     => 'Industry leader delivering the keynote address at Supernova.'
    ],
    [
        'id'       => 'photo-banner',
        'src'      => APP_URL . '/assets/img/gallery/Banner%20title%20image.jpeg',
        'title'    => 'Supernova 2025 Stage Group Photo',
        'category' => 'CEREMONIES',
        'desc'     => 'Auditorium stage group photo of delegates and organizing committee.'
    ],
];

/* Video Highlights Data (Official Teaser Video) */
$videos = [
    [
        'id'       => 'vid-1',
        'title'    => 'SUPERNOVA 2.0 OFFICIAL TEASER',
        'subtitle' => 'SCHOOL OF ENGINEERING & TECHNOLOGY · MGM UNIVERSITY',
        'duration' => 'FULL HD',
        'thumb'    => APP_URL . '/assets/img/gallery/newspaper_clipping.jpg',
        'videoUrl' => APP_URL . '/assets/videos/' . rawurlencode('Supernova 2.0 teaser.mp4')
    ],
];
?>

<!-- Link Figma Gallery Stylesheet -->
<link rel="stylesheet" href="<?= APP_URL ?>/assets/css/gallery.css">

<div class="gallery-page text-slate-100 min-h-screen pt-36 md:pt-44 pb-20 relative overflow-hidden bg-slate-950">

    <!-- Clean Container (No Ambient Glow) -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 space-y-12 sm:space-y-20">

        <!-- Back to Home Button -->
        <div class="mb-6 sm:mb-10">
            <a href="<?= APP_URL ?>/" class="inline-flex items-center gap-2 px-4 py-2 bg-slate-900/80 border border-cyan-500/30 hover:border-cyan-400/60 text-xs font-mono-cyber text-cyan-400 transition-all duration-300 backdrop-blur-md group w-fit">
                <i data-lucide="arrow-left" class="w-4 h-4 transition-transform group-hover:-translate-x-1"></i>
                <span>BACK TO HOME</span>
            </a>
        </div>

        <!-- ====================================================================
             SECTION 1: PREVIOUS EDITION (Banner Title Image + Description)
             ==================================================================== -->
        <section class="space-y-16">
            <!-- Section Header Bar -->
            <div class="flex items-center gap-4">
                <div class="flex items-center gap-3">
                    <div class="w-1.5 h-6 bg-cyan-400"></div>
                    <h2 class="text-xl sm:text-2xl font-black tracking-wider text-cyan-400 font-mono-cyber uppercase whitespace-nowrap">
                        PREVIOUS EDITION
                    </h2>
                </div>
                <div class="flex-1 h-px bg-cyan-500/20"></div>
            </div>

            <!-- Two-Column Layout: Left Image/Logo Box + Right Info & Scale Stats (Figma Side-by-Side Match) -->
            <div class="gal-sec1-grid">

                <!-- Left Column: Previous Edition Logo (Clean Borderless Image, Natural Ratio) -->
                <div class="gal-sec1-left flex items-center justify-center overflow-hidden w-full max-h-[300px] md:max-h-[350px] group cursor-pointer"
                     onclick="openLightbox('<?= APP_URL ?>/assets/img/gallery/supernova_2025_logo.png')">
                    <img src="<?= APP_URL ?>/assets/img/gallery/supernova_2025_logo.png"
                         alt="Supernova 2025 Logo — Spark the Future"
                         class="w-full h-auto max-h-full object-contain transition-transform duration-500 group-hover:scale-105">
                </div>

                <!-- Right Column: Exact Figma Text & Scale Stats -->
                <div class="gal-sec1-right space-y-6 py-2">
                    <div>
                        <p class="text-slate-200 text-base sm:text-lg md:text-xl leading-relaxed sm:leading-loose font-tech max-w-4xl">
                            Supernova 2025 was the first-ever tech fest organized by the School of Engineering and Technology, MGM University—a landmark beginning to a new chapter of innovation, technology, and creativity. Bringing together talented minds, exciting competitions, and an atmosphere charged with energy, the inaugural edition became a celebration of ideas, collaboration, and ambition. From intense technical challenges to unforgettable moments beyond the competitions, Supernova 2025 was a resounding success and a proud milestone for MGM University, creating a legacy that sets the stage for everything yet to come.
                        </p>
                    </div>
                </div>

            </div>

        </section>


        <!-- ====================================================================
             SECTION 2: CINEMATIC HERO BANNER (Banner Title Image Before Collage — Borderless)
             ==================================================================== -->
        <section class="relative overflow-hidden bg-slate-950 group cursor-pointer"
                 onclick="openLightbox('<?= APP_URL ?>/assets/img/gallery/Banner%20title%20image.jpeg')">

            <!-- Full-Bleed Image Container (Expanded Vertical Height) -->
            <div class="w-full h-96 sm:h-[520px] md:h-[680px] lg:h-[760px] relative overflow-hidden bg-slate-950">
                <img src="<?= APP_URL ?>/assets/img/gallery/Banner%20title%20image.jpeg"
                     alt="Supernova 2025 Auditorium Stage Delegates & Organizing Team"
                     class="w-full h-full object-cover object-center transition-transform duration-700 group-hover:scale-105">

                <!-- Dark Gradient Overlay -->
                <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/30 to-transparent pointer-events-none"></div>

                <!-- Bottom Left Overlay Caption -->
                <div class="absolute bottom-6 left-6 sm:bottom-8 sm:left-8 z-10 space-y-1 pointer-events-none">
                    <span class="px-2.5 py-0.5 bg-cyan-950/80 border border-cyan-500/50 text-[10px] sm:text-xs font-mono-cyber text-cyan-300 font-bold uppercase tracking-wider inline-block">
                        MEMORIES FROM THE PREVIOUS EDITION
                    </span>
                    <h3 class="text-xl sm:text-3xl font-black text-silver-metallic font-heading-cyber">
                        SUPERNOVA 2025
                    </h3>
                </div>
            </div>
        </section>


        <!-- ====================================================================
             SECTION 3: PREVIOUS YEAR — MOMENTS (Photo Collage Grid)
             ==================================================================== -->
        <section id="moments-section">

            <!-- =========================================================
                 COLLAGE GRID — 4 columns, asymmetric row-spans (Figma exact)
                 Pattern repeats every 10 images across 3 grid-rows.
                 "tall" items span 2 rows; dark bg gap = 4px between images.
                 ========================================================= -->
            <?php
            /*
             * Grid positions for 28 photos — 3 blocks (10, 10, 8 photos across rows 1-9)
             * col  → CSS grid-column value
             * row  → CSS grid-row value  (e.g. "4 / span 2" for tall items)
             */
            $gridPos = [
                // ── Block A: rows 1-3 (10 items) ──────────────────────────────────────
                ['col'=>'1','row'=>'1'],               // 1  normal
                ['col'=>'2','row'=>'1'],               // 2  normal
                ['col'=>'3','row'=>'1'],               // 3  normal
                ['col'=>'4','row'=>'1 / span 2'],      // 4  TALL right
                ['col'=>'1','row'=>'2 / span 2'],      // 5  TALL left
                ['col'=>'2','row'=>'2'],               // 6  normal
                ['col'=>'3','row'=>'2'],               // 7  normal
                ['col'=>'2','row'=>'3'],               // 8  normal
                ['col'=>'3','row'=>'3'],               // 9  normal
                ['col'=>'4','row'=>'3'],               // 10 normal
                // ── Block B: rows 4-6 (10 items) ──────────────────────────────────────
                ['col'=>'1','row'=>'4'],               // 11 normal
                ['col'=>'2','row'=>'4 / span 2'],      // 12 TALL centre-left
                ['col'=>'3','row'=>'4'],               // 13 normal
                ['col'=>'4','row'=>'4'],               // 14 normal
                ['col'=>'1','row'=>'5'],               // 15 normal
                ['col'=>'3','row'=>'5 / span 2'],      // 16 TALL centre-right
                ['col'=>'4','row'=>'5'],               // 17 normal
                ['col'=>'1','row'=>'6'],               // 18 normal
                ['col'=>'2','row'=>'6'],               // 19 normal
                ['col'=>'4','row'=>'6'],               // 20 normal
                // ── Block C: rows 7-9 (10 items) ──────────────────────────────────────
                ['col'=>'1','row'=>'7'],               // 21 normal
                ['col'=>'2','row'=>'7'],               // 22 normal
                ['col'=>'3','row'=>'7'],               // 23 normal
                ['col'=>'4','row'=>'7 / span 2'],      // 24 TALL right
                ['col'=>'1','row'=>'8 / span 2'],      // 25 TALL left
                ['col'=>'2','row'=>'8'],               // 26 normal
                ['col'=>'3','row'=>'8'],               // 27 normal
                ['col'=>'2','row'=>'9'],               // 28 normal
                ['col'=>'3','row'=>'9'],               // 29 normal
                ['col'=>'4','row'=>'9'],               // 30 normal
            ];
            ?>

            <div id="gal-collage-grid" class="gal-collage pt-2">
                <?php foreach ($galleryPhotos as $index => $photo):
                    if ($photo['id'] === 'photo-banner') continue;
                    $pos = $gridPos[$index] ?? ['col'=>'auto','row'=>'auto'];
                    $style = "grid-column:{$pos['col']};grid-row:{$pos['row']};";
                ?>
                    <div class="gal-collage-item relative overflow-hidden bg-slate-900 group cursor-pointer"
                         style="<?= $style ?>"
                         onclick="openLightbox(<?= $index ?>)">

                        <img src="<?= htmlspecialchars($photo['src']) ?>"
                             alt="<?= htmlspecialchars($photo['title']) ?>"
                             class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
                             style="<?= !empty($photo['pos']) ? "object-position: {$photo['pos']} !important;" : 'object-position: center !important;' ?>"
                             loading="lazy">
                    </div>
                <?php endforeach; ?>
            </div>

        </section>


        <!-- Clean Section Divider with Glowing Accent -->
        <div class="pt-16 sm:pt-28 pb-4">
            <div class="w-full h-px bg-gradient-to-r from-transparent via-cyan-500/40 to-transparent"></div>
        </div>

        <!-- ====================================================================
             SECTION 4: SUPERNOVA REWIND (Featured Video Player)
             ==================================================================== -->
        <section class="space-y-14 sm:space-y-20">
            
            <!-- Section Header -->
            <div class="flex items-center justify-between border-b border-cyan-500/20 pb-4 mb-12 sm:mb-16">
                <div>
                    <div class="flex items-center gap-3 mb-1">
                        <div class="w-1.5 h-6 bg-cyan-400"></div>
                        <h2 class="text-xl sm:text-2xl font-black tracking-wider text-cyan-400 font-mono-cyber uppercase">
                            SUPERNOVA REWIND
                        </h2>
                    </div>
                </div>
            </div>

            <!-- Single Featured Video Player (Borderless Frame) -->
            <div class="max-w-4xl mx-auto">
                <div class="relative overflow-hidden bg-slate-950 shadow-2xl">
                    <video controls preload="metadata" poster="<?= APP_URL ?>/assets/img/gallery/newspaper_clipping.jpg" class="w-full h-64 sm:h-[480px] object-cover">
                        <source src="<?= APP_URL ?>/assets/videos/<?= rawurlencode('Supernova 2.0 teaser.mp4') ?>" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
            </div>

        </section>



    </div>
</div>


<!-- ====================================================================
     LIGHTBOX MODAL (Full-Screen Image Viewer with Overlapping Nav Arrows)
     ==================================================================== -->
<div id="gal-lightbox" class="fixed inset-0 z-[999999] bg-slate-950/95 backdrop-blur-xl items-center justify-center font-mono-cyber hidden">
    
    <!-- Backdrop Click Listener -->
    <div class="absolute inset-0 z-0 cursor-pointer" onclick="closeLightbox()"></div>

    <!-- Close Button (Top Right Corner) -->
    <button onclick="closeLightbox()" aria-label="Close Lightbox" class="gal-lb-close-btn">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
    </button>

    <!-- Previous Photo Arrow (Overlapping Left Edge) -->
    <button onclick="lbPrev(); event.stopPropagation();" aria-label="Previous Photo" class="gal-lb-nav-btn prev-btn">
        <svg class="w-7 h-7 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path></svg>
    </button>

    <!-- Next Photo Arrow (Overlapping Right Edge) -->
    <button onclick="lbNext(); event.stopPropagation();" aria-label="Next Photo" class="gal-lb-nav-btn next-btn">
        <svg class="w-7 h-7 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path></svg>
    </button>

    <!-- Center Image Container (Clean Borderless Image View) -->
    <div class="w-full h-full flex items-center justify-center overflow-hidden p-4 sm:p-12 relative z-10 pointer-events-none">
        <img id="lb-img" src="" alt="Supernova Photo" class="max-h-[85vh] max-w-[90vw] object-contain pointer-events-auto shadow-2xl">
    </div>
</div>


<!-- ====================================================================
     VIDEO MODAL (Embedded HTML5 / iFrame Video Player)
     ==================================================================== -->
<div id="gal-video-modal" class="fixed inset-0 z-[999999] bg-slate-950/95 backdrop-blur-xl hidden items-center justify-center p-4 sm:p-8 font-mono-cyber">
    <div class="w-full max-w-5xl bg-slate-900 border border-cyan-500/50 p-4 sm:p-6 relative space-y-4 shadow-2xl">
        <div class="flex items-center justify-between border-b border-cyan-500/30 pb-3">
            <h3 id="vid-modal-title" class="text-base sm:text-lg font-bold text-white font-heading-cyber">SUPERNOVA 2025 OFFICIAL AFTERMOVIE</h3>
            <button onclick="closeVideoModal()" class="p-2 bg-slate-950 border border-white/20 hover:border-cyan-400 text-slate-300 hover:text-white transition-colors cursor-pointer">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
        <div class="aspect-video w-full bg-black relative flex items-center justify-center overflow-hidden border border-white/10">
            <video id="vid-modal-player" controls class="w-full h-full object-contain hidden">
                <source id="vid-modal-source" src="" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <iframe id="vid-modal-iframe" src="" class="w-full h-full hidden" allowfullscreen allow="autoplay"></iframe>
        </div>
    </div>
</div>


<!-- Link Figma Gallery Logic -->
<script>
window.galleryPhotos = <?= json_encode($galleryPhotos) ?>;
</script>
<script src="<?= APP_URL ?>/assets/js/gallery.js"></script>

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