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

if (!isset($_GET['slug']) || empty($_GET['slug'])) {
    header('Location: ' . APP_URL . '/events');
    exit;
}

$slug = $_GET['slug'];
$pdo = getDatabaseConnection();

$stmt = $pdo->prepare("SELECT * FROM events WHERE slug = ?");
$stmt->execute([$slug]);
$event = $stmt->fetch();

if (!$event) {
    // Show error state
    ?>
    <div class="min-h-screen flex flex-col items-center justify-center p-6 text-center bg-slate-950 pt-36 md:pt-48">
        <i data-lucide="shield-alert" class="w-16 h-16 text-red-400 mb-4"></i>
        <h2 class="text-2xl font-bold text-slate-100 mb-2 font-heading-cyber">Event Not Found</h2>
        <p class="text-slate-400 max-w-md mb-6 font-tech">The requested event could not be found or has been removed.</p>
        <a href="<?= APP_URL ?>/events" class="px-6 py-2.5 rounded-xl bg-cyan-500 text-slate-950 font-bold font-mono-cyber">
            Return to Events Catalog
        </a>
    </div>
    <?php
    require_once __DIR__ . '/../includes/footer.php';
    exit;
}

// Fetch coordinators
$coordStmt = $pdo->prepare("SELECT * FROM coordinators WHERE eventId = ?");
$coordStmt->execute([$event['id']]);
$coordinators = $coordStmt->fetchAll();

$rules = $event['rules'] ? json_decode($event['rules'], true) : [];

function formatFee($fee) {
    return $fee == 0 ? 'Free Entry' : '₹' . number_format($fee);
}

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

/* ==========================================================================
   1. DYNAMIC EVENT IDENTIFICATION & FLAG DETECTION SYSTEM
   --------------------------------------------------------------------------
   Analyzes the event slug and title string to identify specific featured
   events (Protonova, Stellar, Junior Shark, Battleclipse, SparkX, Cosmobolt,
   Infinity Lab, Ninja Coders, CodeBurst) and set active boolean flags.
   ========================================================================== */
$isProtonova   = (str_contains(strtolower($event['slug']), 'protonova')   || str_contains(strtolower($event['title']), 'protonova'));
$isStellar     = (str_contains(strtolower($event['slug']), 'stellar')     || str_contains(strtolower($event['title']), 'stellar'));
$isJuniorShark = (str_contains(strtolower($event['slug']), 'junior-shark') || str_contains(strtolower($event['title']), 'junior shark'));
$isBattleclipse = (str_contains(strtolower($event['slug']), 'battleclipse') || str_contains(strtolower($event['title']), 'battleclipse'));
$isSparkx      = (str_contains(strtolower($event['slug']), 'spark')      || str_contains(strtolower($event['title']), 'spark'));
$isCosmobolt   = (str_contains(strtolower($event['slug']), 'cosmobolt')   || str_contains(strtolower($event['title']), 'cosmobolt'));
$isInfinityLab = (str_contains(strtolower($event['slug']), 'infinity')    || str_contains(strtolower($event['title']), 'infinity'));
$isNinjaCoders = (str_contains(strtolower($event['slug']), 'ninja')       || str_contains(strtolower($event['title']), 'ninja'));
$isCodeburst   = (str_contains(strtolower($event['slug']), 'codeburst')   || str_contains(strtolower($event['title']), 'codeburst'));

/* ==========================================================================
   2. STRICTLY-SCOPED CUSTOM TITLE LOGO ASSET LOOKUP
   --------------------------------------------------------------------------
   Dynamically searches the "assets/img/Event titles/" directory for transparent
   PNG graphics. The file list is strictly scoped to the active event to prevent
   cross-event fallback image leakage.
   ========================================================================== */
$slug = $event['slug'];
$titleImgDir = __DIR__ . '/../assets/img/Event titles/';
$titleImgUrl = null;

$possibleFiles = [
    $slug . '.png',
    $slug . '-title-logo.png',
    $slug . '.jpg',
    $slug . '.jpeg'
];

if ($isProtonova) {
    $possibleFiles[] = 'protonova-project-competition.png';
    $possibleFiles[] = 'protonova-title-logo.png';
    $possibleFiles[] = 'protonova.png';
} elseif ($isStellar) {
    $possibleFiles[] = 'stellar-hackthon-title-logo.png';
    $possibleFiles[] = 'stellar-hackthon.png';
    $possibleFiles[] = 'stellar.png';
} elseif ($isJuniorShark) {
    $possibleFiles[] = 'junior-shark-pitch-beyond-the-stars-title-logo.png';
    $possibleFiles[] = 'junior-shark-pitch-beyond-the-stars.png';
    $possibleFiles[] = 'junior-shark.png';
} elseif ($isBattleclipse) {
    $possibleFiles[] = 'battleclipse-esports-title-logo.png';
    $possibleFiles[] = 'battleclipse-esports.png';
    $possibleFiles[] = 'battleclipse.png';
} elseif ($isSparkx) {
    $possibleFiles[] = 'sparkx-startup-pitching-title-logo.png';
    $possibleFiles[] = 'sparkx-startup-pitching.png';
    $possibleFiles[] = 'sparkx.png';
    $possibleFiles[] = 'sparks.png';
} elseif ($isCosmobolt) {
    $possibleFiles[] = 'cosmobolt-roborace-title-logo.png';
    $possibleFiles[] = 'cosmobolt-roborace.png';
    $possibleFiles[] = 'cosmobolt.png';
} elseif ($isInfinityLab) {
    $possibleFiles[] = 'infinity-lab-technical-workshop-title-logo.png';
    $possibleFiles[] = 'infinity-lab-technical-workshop.png';
    $possibleFiles[] = 'infinity-lab.png';
} elseif ($isNinjaCoders) {
    $possibleFiles[] = 'ninja-coders-take-the-ninja-road-title-logo.png';
    $possibleFiles[] = 'ninja-coders-take-the-ninja-road.png';
    $possibleFiles[] = 'ninja-coders.png';
} elseif ($isCodeburst) {
    $possibleFiles[] = 'codeburst-competative-programming.png';
    $possibleFiles[] = 'codeburst-competitive-programming.png';
    $possibleFiles[] = 'codeburst.png';
}

foreach ($possibleFiles as $file) {
    if (file_exists($titleImgDir . $file)) {
        $titleImgUrl = APP_URL . '/assets/img/Event%20titles/' . rawurlencode($file);
        break;
    }
}

/* ==========================================================================
   3. CURATED EVENT-SPECIFIC DESIGN TOKENS & COLOR PALETTES
   --------------------------------------------------------------------------
   Configures dynamic Tailwind utility tokens (Aura Glows, Glass Borders,
   Category Badges, Accent Text, Icon Backgrounds, Buttons, Drop Shadows).
   ========================================================================== */
if ($isProtonova) {
    $themeGlow = 'from-amber-500/25 via-yellow-500/10 to-transparent';
    $themeCardBorder = 'border-amber-500/30 shadow-[0_0_40px_rgba(245,158,11,0.12)]';
    $themeBadge = 'bg-amber-500/10 border-amber-500/40 text-amber-400';
    $themeAccentText = 'text-amber-400';
    $themeIconBg = 'bg-amber-500/10 border-amber-500/30 text-amber-400';
    $themeButton = 'bg-amber-500 hover:bg-amber-400 text-slate-950 font-extrabold shadow-[0_0_25px_rgba(245,158,11,0.5)]';
    $themeButtonStyle = 'style="background: #f59e0b !important; color: #020617 !important; font-weight: 800; box-shadow: 0 0 25px rgba(245, 158, 11, 0.5);"';
    $themeBackHover = 'hover:text-amber-400';
    $themeRuleSubicon = 'text-amber-500/80';
    $themeDropShadow = 'drop-shadow-[0_0_35px_rgba(245,158,11,0.5)]';
    $themeTitleImgSize = 'h-48 sm:h-64 md:h-80 lg:h-96';
} elseif ($isStellar) {
    $themeGlow = 'from-purple-600/30 via-fuchsia-600/10 to-transparent';
    $themeCardBorder = 'border-purple-500/30 shadow-[0_0_40px_rgba(168,85,247,0.15)]';
    $themeBadge = 'bg-purple-500/10 border-purple-500/40 text-purple-300';
    $themeAccentText = 'text-purple-400';
    $themeIconBg = 'bg-purple-500/10 border-purple-500/30 text-purple-400';
    $themeButton = 'bg-gradient-to-r from-purple-600 via-fuchsia-500 to-purple-600 hover:from-purple-500 hover:to-fuchsia-400 text-white font-extrabold shadow-[0_0_25px_rgba(168,85,247,0.5)]';
    $themeButtonStyle = 'style="background: linear-gradient(135deg, #9333ea, #c084fc) !important; color: #ffffff !important; font-weight: 800; box-shadow: 0 0 25px rgba(168, 85, 247, 0.5);"';
    $themeBackHover = 'hover:text-purple-400';
    $themeRuleSubicon = 'text-purple-400';
    $themeDropShadow = 'drop-shadow-[0_0_35px_rgba(168,85,247,0.5)]';
    $themeTitleImgSize = 'h-48 sm:h-64 md:h-80 lg:h-[340px]';
} elseif ($isJuniorShark) {
    $themeGlow = 'from-pink-500/25 via-rose-500/10 to-transparent';
    $themeCardBorder = 'border-pink-500/30 shadow-[0_0_40px_rgba(236,72,153,0.15)]';
    $themeBadge = 'bg-pink-500/10 border-pink-500/40 text-pink-400';
    $themeAccentText = 'text-pink-400';
    $themeIconBg = 'bg-pink-500/10 border-pink-500/30 text-pink-400';
    $themeButton = 'bg-gradient-to-r from-pink-500 via-rose-500 to-pink-600 hover:from-pink-400 hover:to-rose-400 text-white font-extrabold shadow-[0_0_25px_rgba(236,72,153,0.5)]';
    $themeButtonStyle = 'style="background: linear-gradient(135deg, #ec4899, #f43f5e) !important; color: #ffffff !important; font-weight: 800; box-shadow: 0 0 25px rgba(236, 72, 153, 0.5);"';
    $themeBackHover = 'hover:text-pink-400';
    $themeRuleSubicon = 'text-pink-400';
    $themeDropShadow = 'drop-shadow-[0_0_35px_rgba(236,72,153,0.5)]';
    $themeTitleImgSize = 'h-48 sm:h-64 md:h-80 lg:h-96';
} elseif ($isBattleclipse) {
    $themeGlow = 'from-purple-600/35 via-violet-600/15 to-transparent';
    $themeCardBorder = 'border-purple-500/35 shadow-[0_0_40px_rgba(147,51,234,0.18)]';
    $themeBadge = 'bg-purple-500/10 border-purple-500/40 text-purple-300';
    $themeAccentText = 'text-purple-400';
    $themeIconBg = 'bg-purple-500/10 border-purple-500/30 text-purple-400';
    $themeButton = 'bg-gradient-to-r from-purple-600 via-violet-600 to-purple-700 hover:from-purple-500 hover:to-violet-500 text-white font-extrabold shadow-[0_0_25px_rgba(147,51,234,0.5)]';
    $themeButtonStyle = 'style="background: linear-gradient(135deg, #9333ea, #7e22ce) !important; color: #ffffff !important; font-weight: 800; box-shadow: 0 0 25px rgba(147, 51, 234, 0.6);"';
    $themeBackHover = 'hover:text-purple-400';
    $themeRuleSubicon = 'text-purple-400';
    $themeDropShadow = 'drop-shadow-[0_0_35px_rgba(147,51,234,0.6)]';
    $themeTitleImgSize = 'h-48 sm:h-64 md:h-80 lg:h-96';
} elseif ($isSparkx) {
    $themeGlow = 'from-emerald-500/25 via-green-500/10 to-transparent';
    $themeCardBorder = 'border-emerald-500/30 shadow-[0_0_40px_rgba(16,185,129,0.15)]';
    $themeBadge = 'bg-emerald-500/10 border-emerald-500/40 text-emerald-400';
    $themeAccentText = 'text-emerald-400';
    $themeIconBg = 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400';
    $themeButton = 'bg-gradient-to-r from-emerald-500 via-green-500 to-emerald-600 hover:from-emerald-400 hover:to-green-400 text-slate-950 font-extrabold shadow-[0_0_25px_rgba(16,185,129,0.5)]';
    $themeButtonStyle = 'style="background: linear-gradient(135deg, #10b981, #22c55e) !important; color: #020617 !important; font-weight: 800; box-shadow: 0 0 25px rgba(16, 185, 129, 0.5);"';
    $themeBackHover = 'hover:text-emerald-400';
    $themeRuleSubicon = 'text-emerald-400';
    $themeDropShadow = 'drop-shadow-[0_0_35px_rgba(16,185,129,0.5)]';
    $themeTitleImgSize = 'h-48 sm:h-64 md:h-80 lg:h-96';
} elseif ($isCosmobolt) {
    $themeGlow = 'from-indigo-600/35 via-purple-600/15 to-transparent';
    $themeCardBorder = 'border-indigo-500/35 shadow-[0_0_40px_rgba(99,102,241,0.18)]';
    $themeBadge = 'bg-indigo-500/10 border-indigo-500/40 text-indigo-400';
    $themeAccentText = 'text-indigo-400';
    $themeIconBg = 'bg-indigo-500/10 border-indigo-500/30 text-indigo-400';
    $themeButton = 'bg-gradient-to-r from-indigo-600 via-purple-600 to-indigo-700 hover:from-indigo-500 hover:to-purple-500 text-white font-extrabold shadow-[0_0_25px_rgba(99,102,241,0.5)]';
    $themeButtonStyle = 'style="background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; color: #ffffff !important; font-weight: 800; box-shadow: 0 0 25px rgba(99, 102, 241, 0.6);"';
    $themeBackHover = 'hover:text-indigo-400';
    $themeRuleSubicon = 'text-indigo-400';
    $themeDropShadow = 'drop-shadow-[0_0_35px_rgba(99,102,241,0.6)]';
    $themeTitleImgSize = 'h-48 sm:h-64 md:h-80 lg:h-96';
} elseif ($isInfinityLab) {
    $themeGlow = 'from-cyan-500/30 via-sky-500/15 to-transparent';
    $themeCardBorder = 'border-cyan-500/35 shadow-[0_0_40px_rgba(6,182,212,0.18)]';
    $themeBadge = 'bg-cyan-500/10 border-cyan-500/40 text-cyan-400';
    $themeAccentText = 'text-cyan-400';
    $themeIconBg = 'bg-cyan-500/10 border-cyan-500/30 text-cyan-400';
    $themeButton = 'bg-gradient-to-r from-cyan-500 via-sky-500 to-blue-600 hover:from-cyan-400 hover:to-sky-400 text-slate-950 font-extrabold shadow-[0_0_25px_rgba(6,182,212,0.5)]';
    $themeButtonStyle = 'style="background: linear-gradient(135deg, #0284c7, #06b6d4) !important; color: #020617 !important; font-weight: 800; box-shadow: 0 0 25px rgba(6, 182, 212, 0.6);"';
    $themeBackHover = 'hover:text-cyan-400';
    $themeRuleSubicon = 'text-cyan-400';
    $themeDropShadow = 'drop-shadow-[0_0_35px_rgba(6,182,212,0.6)]';
    $themeTitleImgSize = 'h-48 sm:h-64 md:h-80 lg:h-96';
} elseif ($isNinjaCoders) {
    $themeGlow = 'from-red-600/35 via-rose-600/15 to-transparent';
    $themeCardBorder = 'border-red-500/35 shadow-[0_0_40px_rgba(239,68,68,0.18)]';
    $themeBadge = 'bg-red-500/10 border-red-500/40 text-red-400';
    $themeAccentText = 'text-red-400';
    $themeIconBg = 'bg-red-500/10 border-red-500/30 text-red-400';
    $themeButton = 'bg-gradient-to-r from-red-600 via-rose-600 to-red-700 hover:from-red-500 hover:to-rose-500 text-white font-extrabold shadow-[0_0_25px_rgba(239,68,68,0.5)]';
    $themeButtonStyle = 'style="background: linear-gradient(135deg, #dc2626, #ef4444) !important; color: #ffffff !important; font-weight: 800; box-shadow: 0 0 25px rgba(239, 68, 68, 0.6);"';
    $themeBackHover = 'hover:text-red-400';
    $themeRuleSubicon = 'text-red-400';
    $themeDropShadow = 'drop-shadow-[0_0_35px_rgba(239,68,68,0.6)]';
    $themeTitleImgSize = 'h-48 sm:h-64 md:h-80 lg:h-96';
} elseif ($isCodeburst) {
    $themeGlow = 'from-orange-600/35 via-amber-600/15 to-transparent';
    $themeCardBorder = 'border-orange-500/35 shadow-[0_0_40px_rgba(249,115,22,0.18)]';
    $themeBadge = 'bg-orange-500/10 border-orange-500/40 text-orange-400';
    $themeAccentText = 'text-orange-400';
    $themeIconBg = 'bg-orange-500/10 border-orange-500/30 text-orange-400';
    $themeButton = 'bg-gradient-to-r from-orange-600 via-amber-500 to-orange-600 hover:from-orange-500 hover:to-amber-400 text-slate-950 font-extrabold shadow-[0_0_25px_rgba(249,115,22,0.5)]';
    $themeButtonStyle = 'style="background: linear-gradient(135deg, #ea580c, #f97316) !important; color: #020617 !important; font-weight: 800; box-shadow: 0 0 25px rgba(249, 115, 22, 0.6);"';
    $themeBackHover = 'hover:text-orange-400';
    $themeRuleSubicon = 'text-orange-400';
    $themeDropShadow = 'drop-shadow-[0_0_35px_rgba(249,115,22,0.6)]';
    $themeTitleImgSize = 'h-48 sm:h-64 md:h-80 lg:h-96';
} else {
    $themeGlow = 'from-cyan-500/20 via-purple-600/10 to-transparent';
    $themeCardBorder = 'border-white/10';
    $themeBadge = 'bg-purple-500/10 border-purple-500/30 text-purple-300';
    $themeAccentText = 'text-cyan-400';
    $themeIconBg = 'bg-cyan-500/10 border-cyan-500/30 text-cyan-400';
    $themeButton = 'bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-slate-950 font-extrabold shadow-glow-cyan';
    $themeButtonStyle = '';
    $themeBackHover = 'hover:text-cyan-400';
    $themeRuleSubicon = 'text-cyan-500/70';
    $themeDropShadow = 'drop-shadow-[0_0_25px_rgba(6,182,212,0.4)]';
    $themeTitleImgSize = 'h-48 sm:h-64 md:h-80 lg:h-96';
}

/* ==========================================================================
   4. EXPLICIT INLINE STYLE FALLBACK LAYER
   --------------------------------------------------------------------------
   Ensures phone/email icons, rule numbers, and category badge pills receive
   100% theme color fidelity without Tailwind JIT purging or inheritance bugs.
   ========================================================================== */
$themeAccentTextStyle = match(true) {
    $isProtonova => 'style="color: #fbbf24 !important;"',
    $isStellar => 'style="color: #c084fc !important;"',
    $isJuniorShark => 'style="color: #f43f5e !important;"',
    $isBattleclipse => 'style="color: #a855f7 !important;"',
    $isSparkx => 'style="color: #22c55e !important;"',
    $isCosmobolt => 'style="color: #818cf8 !important;"',
    $isInfinityLab => 'style="color: #00d2ff !important;"',
    $isNinjaCoders => 'style="color: #ef4444 !important;"',
    $isCodeburst => 'style="color: #f97316 !important;"',
    default => 'style="color: #22d3ee !important;"'
};

$themeIconBgStyle = match(true) {
    $isProtonova => 'style="background: rgba(245, 158, 11, 0.15) !important; border: 1px solid rgba(245, 158, 11, 0.4) !important; color: #fbbf24 !important;"',
    $isStellar => 'style="background: rgba(168, 85, 247, 0.15) !important; border: 1px solid rgba(168, 85, 247, 0.4) !important; color: #c084fc !important;"',
    $isJuniorShark => 'style="background: rgba(236, 72, 153, 0.15) !important; border: 1px solid rgba(236, 72, 153, 0.4) !important; color: #f43f5e !important;"',
    $isBattleclipse => 'style="background: rgba(147, 51, 234, 0.15) !important; border: 1px solid rgba(147, 51, 234, 0.4) !important; color: #a855f7 !important;"',
    $isSparkx => 'style="background: rgba(16, 185, 129, 0.15) !important; border: 1px solid rgba(16, 185, 129, 0.4) !important; color: #22c55e !important;"',
    $isCosmobolt => 'style="background: rgba(99, 102, 241, 0.18) !important; border: 1px solid rgba(99, 102, 241, 0.4) !important; color: #818cf8 !important;"',
    $isInfinityLab => 'style="background: rgba(6, 182, 212, 0.15) !important; border: 1px solid rgba(6, 182, 212, 0.4) !important; color: #00d2ff !important;"',
    $isNinjaCoders => 'style="background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #ef4444 !important;"',
    $isCodeburst => 'style="background: rgba(249, 115, 22, 0.15) !important; border: 1px solid rgba(249, 115, 22, 0.4) !important; color: #f97316 !important;"',
    default => 'style="background: rgba(6, 182, 212, 0.15) !important; border: 1px solid rgba(6, 182, 212, 0.4) !important; color: #22d3ee !important;"'
};

$themeBadgeStyle = match(true) {
    $isProtonova => 'style="background: rgba(245, 158, 11, 0.12) !important; border: 1px solid rgba(245, 158, 11, 0.4) !important; color: #fbbf24 !important;"',
    $isStellar => 'style="background: rgba(168, 85, 247, 0.12) !important; border: 1px solid rgba(168, 85, 247, 0.4) !important; color: #c084fc !important;"',
    $isJuniorShark => 'style="background: rgba(236, 72, 153, 0.12) !important; border: 1px solid rgba(236, 72, 153, 0.4) !important; color: #f43f5e !important;"',
    $isBattleclipse => 'style="background: rgba(147, 51, 234, 0.12) !important; border: 1px solid rgba(147, 51, 234, 0.4) !important; color: #a855f7 !important;"',
    $isSparkx => 'style="background: rgba(16, 185, 129, 0.12) !important; border: 1px solid rgba(16, 185, 129, 0.4) !important; color: #22c55e !important;"',
    $isCosmobolt => 'style="background: rgba(99, 102, 241, 0.12) !important; border: 1px solid rgba(99, 102, 241, 0.4) !important; color: #818cf8 !important;"',
    $isInfinityLab => 'style="background: rgba(6, 182, 212, 0.12) !important; border: 1px solid rgba(6, 182, 212, 0.4) !important; color: #00d2ff !important;"',
    $isNinjaCoders => 'style="background: rgba(239, 68, 68, 0.12) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #ef4444 !important;"',
    $isCodeburst => 'style="background: rgba(249, 115, 22, 0.15) !important; border: 1px solid rgba(249, 115, 22, 0.5) !important; color: #f97316 !important;"',
    default => 'style="background: rgba(6, 182, 212, 0.12) !important; border: 1px solid rgba(6, 182, 212, 0.4) !important; color: #22d3ee !important;"'
};

/* ==========================================================================
   5. CELESTIAL WHITE STARLIGHT GLOW AURA (HERO CARD ONLY)
   --------------------------------------------------------------------------
   Applies a radiant white celestial outer glow shadow, 1.5px white border rim,
   and top celestial starlight beam sweep exclusively to Box 1 (Hero Title Card).
   ========================================================================== */
$celestialCardStyle = 'style="box-shadow: 0 0 30px rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important;"';
?>

<div class="min-h-screen bg-transparent text-slate-100 pb-12 px-4 sm:px-6 lg:px-8 relative pt-36 md:pt-48">
    <div class="max-w-5xl mx-auto relative z-10">
        <a href="<?= APP_URL ?>/events" class="inline-flex items-center gap-2.5 px-4 py-2.5 rounded-xl bg-slate-900/30 border border-white/15 hover:border-white/30 text-sm text-slate-300 <?= $themeBackHover ?> mb-8 transition-all duration-300 font-tech shadow-lg backdrop-blur-md group">
            <i data-lucide="arrow-left" class="w-4 h-4 transition-transform group-hover:-translate-x-1"></i> 
            <span>Back to All Events</span>
        </a>

        <!-- Hero Card (Card 1) -->
        <div class="glass-panel p-8 md:p-12 rounded-3xl <?= $themeCardBorder ?> mb-8 relative overflow-hidden" <?= $celestialCardStyle ?>>

            <div class="flex flex-wrap items-center justify-between gap-4 mb-2 relative z-10">
                <span class="px-3 py-1 rounded-full <?= $themeBadge ?> text-xs font-bold uppercase tracking-wider font-mono-cyber inline-block" <?= $themeBadgeStyle ?>>
                    <?= htmlspecialchars($event['category']) ?>
                </span>
            </div>

            <?php if ($titleImgUrl): ?>
                <div class="-mt-8 sm:-mt-12 md:-mt-14 mb-4 flex justify-center items-center w-full relative z-10">
                    <img src="<?= $titleImgUrl ?>" alt="<?= htmlspecialchars($event['title']) ?>" class="<?= $themeTitleImgSize ?> w-auto max-w-full object-contain mx-auto <?= $themeDropShadow ?>" style="mix-blend-mode: lighten;" />
                </div>
            <?php else: ?>
                <h1 class="text-4xl md:text-6xl font-black text-slate-100 mb-6 tracking-tight font-heading-cyber relative z-10 text-center mx-auto">
                    <?= htmlspecialchars($event['title']) ?>
                </h1>
            <?php endif; ?>

            <p class="text-slate-300 text-lg md:text-xl leading-relaxed mt-6 mb-10 max-w-3xl font-tech relative z-10 text-center mx-auto">
                <?= htmlspecialchars($event['description']) ?>
            </p>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 border-t border-white/10 pt-8 mb-8 relative z-10">
                <div class="flex items-center gap-3">
                    <div class="p-3 rounded-xl <?= $themeIconBg ?>" <?= $themeIconBgStyle ?>>
                        <i data-lucide="calendar" class="w-5 h-5"></i>
                    </div>
                    <div class="font-mono-cyber">
                        <span class="text-xs text-slate-400 block font-medium">Date & Time</span>
                        <span class="font-semibold text-slate-200"><?= htmlspecialchars($event['eventDate']) ?> • <?= htmlspecialchars($event['reportingTime']) ?></span>
                    </div>
                </div>

                <div class="flex items-center gap-3">
                    <div class="p-3 rounded-xl <?= $themeIconBg ?>" <?= $themeIconBgStyle ?>>
                        <i data-lucide="map-pin" class="w-5 h-5"></i>
                    </div>
                    <div class="font-mono-cyber">
                        <span class="text-xs text-slate-400 block font-medium">Event Venue</span>
                        <span class="font-semibold text-slate-200"><?= htmlspecialchars($event['venue']) ?></span>
                    </div>
                </div>

                <div class="flex items-center gap-3">
                    <div class="p-3 rounded-xl <?= $themeIconBg ?>" <?= $themeIconBgStyle ?>>
                        <i data-lucide="trophy" class="w-5 h-5"></i>
                    </div>
                    <div class="font-mono-cyber">
                        <span class="text-xs text-slate-400 block font-medium">Registration Fee</span>
                        <span class="font-bold <?= $themeAccentText ?> text-lg" <?= $themeAccentTextStyle ?>>
                            <?= formatFee($event['registrationFee']) ?>
                        </span>
                    </div>
                </div>
            </div>

            <div class="flex flex-wrap items-center gap-4 relative z-20">
                <?php 
                $registrationUrl = ($event['slug'] === 'junior-shark-pitch-beyond-the-stars') 
                    ? ERP_JUNIOR_SHARK_REGISTRATION_URL 
                    : ERP_GLOBAL_REGISTRATION_URL;
                ?>
                <a href="<?= htmlspecialchars($registrationUrl) ?>" target="_blank" rel="noopener noreferrer" class="px-8 py-4 rounded-xl <?= $themeButton ?> font-mono-cyber transition-all flex items-center gap-2 relative z-20" <?= $themeButtonStyle ?>>
                    Register Now
                </a>
            </div>
        </div>

        <!-- Rules & Coordinators Layout -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Rules List (Card 2) -->
            <div class="md:col-span-2 glass-panel p-8 rounded-3xl <?= $themeCardBorder ?>">
                <h3 class="text-xl font-bold text-slate-100 mb-6 flex items-center gap-2 font-heading-cyber relative z-10">
                    <i data-lucide="check-circle-2" class="w-5 h-5 <?= $themeAccentText ?>" <?= $themeAccentTextStyle ?>></i> Event Rules & Guidelines
                </h3>
                <?php if (empty($rules)): ?>
                    <p class="text-slate-400 text-sm font-tech relative z-10">Standard Supernova 2.0 code of conduct applies.</p>
                <?php else: ?>
                    <ul class="space-y-3 font-tech relative z-10">
                        <?php 
                        $mainPointIdx = 1;
                        foreach ($rules as $rule): 
                            $isSubpoint = str_starts_with(trim($rule), '-');
                            $cleanRule = $isSubpoint ? ltrim(trim($rule), '- ') : $rule;
                        ?>
                            <li class="flex items-start gap-3 text-slate-300 text-sm <?= $isSubpoint ? 'pl-9' : '' ?>">
                                <?php if (!$isSubpoint): ?>
                                    <span class="w-6 h-6 rounded-full <?= $themeIconBg ?> font-bold text-xs flex items-center justify-center shrink-0 mt-0.5" <?= $themeIconBgStyle ?>>
                                        <?= $mainPointIdx++ ?>
                                    </span>
                                    <span class="font-bold text-slate-100 mt-1"><?= htmlspecialchars($cleanRule) ?></span>
                                <?php else: ?>
                                    <i data-lucide="chevron-right" class="w-4 h-4 <?= $themeRuleSubicon ?> shrink-0 mt-0.5" <?= $themeAccentTextStyle ?>></i>
                                    <span class="mt-0.5"><?= htmlspecialchars($cleanRule) ?></span>
                                <?php endif; ?>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                <?php endif; ?>
            </div>

            <!-- Coordinators (Card 3) -->
            <div class="glass-panel p-8 rounded-3xl <?= $themeCardBorder ?> h-fit">
                <h3 class="text-xl font-bold text-slate-100 mb-6 flex items-center gap-2 font-heading-cyber relative z-10">
                    <i data-lucide="users" class="w-5 h-5 <?= $themeAccentText ?>" <?= $themeAccentTextStyle ?>></i> Event Coordinators
                </h3>
                <?php if (empty($coordinators)): ?>
                    <p class="text-slate-400 text-sm font-tech">Coordinator details will be updated shortly.</p>
                <?php else: ?>
                    <div class="space-y-4 font-tech">
                        <?php foreach ($coordinators as $coord): ?>
                            <div class="p-4 rounded-xl bg-slate-900/20 border border-white/5">
                                <h4 class="font-bold text-slate-200"><?= htmlspecialchars($coord['name']) ?></h4>
                                <?php if (!empty($coord['phone'])): ?>
                                    <div class="flex items-center gap-2 text-xs text-slate-300 mt-1.5">
                                        <i data-lucide="phone" class="w-4 h-4 shrink-0 <?= $themeAccentText ?>" <?= $themeAccentTextStyle ?>></i>
                                        <span class="font-mono-cyber"><?= htmlspecialchars(str_replace(' ', '', $coord['phone'])) ?></span>
                                    </div>
                                <?php endif; ?>
                                <?php if (!empty($coord['email'])): ?>
                                    <div class="flex items-center gap-2 text-xs text-slate-300 mt-1.5">
                                        <i data-lucide="mail" class="w-4 h-4 shrink-0 <?= $themeAccentText ?>" <?= $themeAccentTextStyle ?>></i>
                                        <span><?= htmlspecialchars($coord['email']) ?></span>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

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

<script>
// Apply blackhole color theme for this event page (hard load / direct URL visit).
// Delay slightly so blackhole.js module has time to register its event listener.
(function() {
    var SLUG_THEMES = {
        'sparkx-startup-pitching':             'green',
        'stellar-hackthon':                    'purple',
        'battleclipse-esports':                'purple',
        'protonova-project-competition':       'orange',
        'ninja-coders-take-the-ninja-road':    'red',
        'codeburst-competative-programming':   'golden',
        'junior-shark-pitch-beyond-the-stars': 'pink',
        'infinity-lab-technical-workshop':     'teal',
    };
    var slug  = new URLSearchParams(window.location.search).get('slug') || '';
    var theme = SLUG_THEMES[slug] || 'default';

    function tryApply() {
        if (typeof window.blackholeSetTheme === 'function') {
            window.blackholeSetTheme(theme, 1500);
        } else {
            // blackhole.js not ready yet — dispatch DOM event, it will catch it
            document.dispatchEvent(new CustomEvent('blackhole:setTheme', {
                detail: { theme: theme, duration: 1500 }
            }));
        }
    }

    // Try immediately, then retry once after a short delay as a safety net
    setTimeout(tryApply, 100);
    setTimeout(tryApply, 800);
})();
</script>

