<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>BlockZone Lab - Web3 Gaming Hub</title>
    <link rel="icon" href="public/favicon.svg" type="image/svg+xml">

    
    <!-- SEO Meta Tags -->
    <meta name="description" content="BlockZone Lab - Professional gaming tournaments with real USDC prizes and comprehensive blockchain education. FREE first game daily, $0.25 per game or $2.50 day pass until 11pm EST.">
    <meta name="keywords" content="blockchain gaming, USDC prizes, crypto education, skill-based games, neon drop, tournaments">
    
    <!-- Critical CSS - Inline for instant rendering -->
    <style>
        /* CRITICAL RENDERING PATH - Minimal styles for instant visual feedback */
        :root {
            --primary: #00ff41;
            --bg-primary: #0a0a0a;
            --text-primary: #ffffff;
            --text-secondary: #cccccc;
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            background: var(--bg-primary);
            color: var(--text-primary);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        /* INSTANT LOADING STATES */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
        }
        
        .loading-screen.fade-out {
            opacity: 0;
            pointer-events: none;
        }
        
        .loading-content {
            text-align: center;
            color: var(--primary);
        }
        
        .loading-logo {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        
        .loading-progress {
            width: 200px;
            height: 4px;
            background: rgba(0, 255, 65, 0.2);
            border-radius: 2px;
            overflow: hidden;
            margin: 1rem auto;
        }
        
        .loading-bar {
            height: 100%;
            background: var(--primary);
            width: 0%;
            transition: width 0.3s ease;
            animation: shimmer 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        /* CRITICAL NAVIGATION */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 255, 65, 0.2);
            z-index: 1000;
            opacity: 0;
            transform: translateY(-100%);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .navbar.loaded {
            opacity: 1;
            transform: translateY(0);
        }
        
        .navbar-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64px;
        }
        
        .navbar-brand {
            color: var(--primary);
            font-size: 1.5rem;
            font-weight: bold;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 1px;
        }
        
        .brand-letter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 3px;
            font-size: 14px;
            font-weight: bold;
            color: #000;
            background: #00ff41;
            border: 1px solid rgba(0, 255, 65, 0.3);
            box-shadow: 0 0 5px rgba(0, 255, 65, 0.2);
        }
        
        .brand-letter:nth-child(6) {
            /* The "Z" - EXACTLY like favicon */
            background: #00FFFF;
            border: 2px solid #ff4444;
            color: #ff4444;
            box-shadow: 0 0 8px rgba(255, 68, 68, 0.4);
            position: relative;
            overflow: hidden;
        }
        
        .brand-letter:nth-child(6)::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            background: #ff4444;
            border-radius: 1px;
            z-index: 1;
        }
        
        .brand-letter:nth-child(6)::after {
            content: 'Z';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ff4444;
            font-weight: 900;
            font-size: 10px;
            z-index: 2;
            text-shadow: 1px 1px 0px #cc0000;
        }
        
        .brand-letter:nth-child(10) {
            /* The space - make it invisible */
            background: transparent;
            border: none;
            box-shadow: none;
            width: 8px;
        }
        
        /* CRITICAL HERO SECTION */
        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem 1rem;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .hero-section.loaded {
            opacity: 1;
            transform: translateY(0);
        }
        

        
        .hero-title {
            font-size: clamp(3.5rem, 12vw, 6rem);
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 1rem;
            text-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
        }
        
        .hero-subtitle {
            font-size: clamp(1.2rem, 4vw, 1.8rem);
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }
        
        /* HERO CARDS - 3-second gradual materialization */
        .hero-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 3rem;
            max-width: 450px;
            margin: 0 auto;
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            transition: all 3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .hero-cards.loaded {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        
        .hero-card {
            background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            border: 2px solid rgba(0, 255, 65, 0.3);
            border-radius: 20px;
            padding: 0;
            width: 200px; /* Fixed width for 2:3 ratio */
            height: 300px; /* Fixed height for 2:3 ratio */
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .hero-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0, 255, 65, 0.1) 0%, rgba(0, 255, 65, 0.05) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        
        .hero-card:hover::before {
            opacity: 1;
        }
        
        .hero-card:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: #00ff41;
            box-shadow: 
                0 20px 40px rgba(0, 255, 65, 0.3),
                0 0 30px rgba(0, 255, 65, 0.2);
        }
        
        .hero-card-header {
            padding: 1.5rem 1.5rem 1rem;
            text-align: center;
        }
        
        .hero-card-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* Pixel blocks for Neon Drop card */
        .pixel-blocks {
            display: flex;
            gap: 8px;
            justify-content: center;
            align-items: center;
        }
        
        .pixel-block {
            width: 16px;
            height: 16px;
            border-radius: 2px;
            position: relative;
        }
        
        .pixel-block.block-1 {
            background: #00ff41;
            box-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
        }
        
        .pixel-block.block-2 {
            background: #ff6b35;
            box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
        }
        
        .pixel-block.block-3 {
            background: #4ecdc4;
            box-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
        }
        
        /* Academy icons for Academy card */
        .academy-icons {
            font-size: 1.5rem;
            color: #00ff41;
            text-shadow: 0 0 15px rgba(0, 255, 65, 0.5);
            letter-spacing: 0.3rem;
        }
        
        .hero-card-header h3 {
            color: #00ff41;
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
        }
        
        .hero-card-subtitle {
            color: #a0a0a0;
            font-size: 0.8rem;
            font-weight: 300;
            text-align: center;
            margin-top: 0.5rem;
            line-height: 1.3;
        }
        
        .hero-card-content {
            padding: 0 1.5rem 1.5rem;
        }
        
        .hero-card-content p {
            color: #cccccc;
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 1rem;
        }
        
        .hero-card-features {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .hero-card-features span {
            background: rgba(0, 255, 65, 0.1);
            color: #00ff41;
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
            border: 1px solid rgba(0, 255, 65, 0.2);
        }
        
        .hero-card-footer {
            padding: 0 1.5rem 1.5rem;
        }
        
        .card-action-text {
            color: #00ff41;
            font-size: 0.9rem;
            font-weight: 600;
            text-align: center;
            text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
            margin-top: 20px; /* Move text down 20px total */
        }
        

        
        .btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .btn-primary {
            background: var(--primary);
            color: #000;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 255, 65, 0.3);
        }
        
        .btn-outline {
            background: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
        }
        
        .btn-outline:hover {
            background: var(--primary);
            color: #000;
        }
        
        /* PROGRESSIVE ENHANCEMENT MARKERS */
        .enhancement-ready {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .enhancement-ready.loaded {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* PLAYING CARD SIZING - 25% smaller for real card feel */
        .action-card {
            max-width: 300px; /* Reduced from ~400px */
            min-height: 400px; /* Reduced from ~500px */
        }
        
        .action-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .action-card-header {
            padding: 1.5rem 1.5rem 1rem;
        }
        
        .action-card-content {
            padding: 0 1.5rem 1.5rem;
        }
        
        .action-card-footer {
            padding: 0 1.5rem 1.5rem;
        }
        
        .action-icon {
            font-size: 2rem; /* Reduced from ~2.5rem */
            margin-bottom: 0.75rem;
        }
        
        .action-card-header h3 {
            font-size: 1.25rem; /* Reduced from ~1.5rem */
            margin-bottom: 0.5rem;
        }
        
        .action-subtitle {
            font-size: 0.875rem; /* Reduced from ~1rem */
        }
        
        .action-features {
            gap: 0.5rem;
        }
        
        .action-features span {
            font-size: 0.75rem; /* Reduced from ~0.875rem */
            padding: 0.25rem 0.5rem;
        }
        
        /* RESPONSIVE */
        @media (max-width: 768px) {
            .hero-cards {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                max-width: 250px;
            }
            
            .hero-card {
                width: 200px;
                height: 300px;
            }
            
            .hero-card-icon {
                font-size: 2rem;
            }
            
            .hero-card-header h3 {
                font-size: 1.25rem;
            }
            
            .btn {
                width: 100%;
                max-width: 300px;
            }
        }
        
        /* Game Title Block Cutouts - Exact match from Neon Drop game */
        .game-title-blocks {
            display: flex;
            gap: 2px;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .title-block {
            width: 20px;
            height: 20px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Bungee', monospace;
            font-weight: bold;
            font-size: 14px;
            position: relative;
            color: #000;
            text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .title-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 3px;
            z-index: -1;
        }
        
        .title-neon {
            background: linear-gradient(135deg, #FFFF00, #FFD700);
        }
        
        .title-neon::before {
            background: linear-gradient(135deg, #FFFF00, #FFD700);
        }
        
        .title-drop {
            background: linear-gradient(135deg, #8A2BE2, #9370DB);
        }
        
        .title-drop::before {
            background: linear-gradient(135deg, #8A2BE2, #9370DB);
        }
        
        .title-block:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
        }
        
        .title-spacer {
            background: transparent !important;
            box-shadow: none !important;
            width: 20px !important;
        }
        
        .title-spacer::before {
            display: none !important;
        }
        
        /* Position icons at top of cards - mathematically calculated */
        .hero-card-icon {
            margin-top: -24px !important; /* Counteract the 24px header padding */
            margin-bottom: 20px !important; /* Consistent spacing to align titles */
        }
        
        /* Academy card specific positioning - higher up */
        .academy-card .hero-card-icon {
            margin-top: -47px !important; /* Counteract the 24px header padding + 23px additional lift */
        }
        
        .academy-icons {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px; /* Match the block spacer width */
            font-size: 1.8rem; /* Increase size to match visual weight of blocks */
            width: 100%;
        }
        
        .academy-icons {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px; /* Match the block spacer width */
            font-size: 1.8rem; /* Increase size to match visual weight of blocks */
            width: 100%;
        }
        
        .academy-icons {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px; /* Match the block spacer width */
            font-size: 1.8rem; /* Increase size to match visual weight of blocks */
            width: 100%;
        }
        
        .academy-icons span:first-child {
            font-size: 1.26rem; /* 30% smaller than 1.8rem */
        }
        
        .academy-icons span:nth-child(2) {
            font-size: 1.26rem; /* 30% smaller than 1.8rem */
        }
    </style>
    
    <!-- Preload critical resources -->
    <link rel="preload" href="assets/css/design-system.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="assets/css/game-wrapper.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    
    <!-- Google Fonts - Load asynchronously -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
    
    <!-- Favicon -->
    <link rel="icon" href="public/favicon.svg" type="image/svg+xml">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#00ff41">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    
    <!-- Web3 Dependencies - Load asynchronously -->
    <script>
        // Async Web3 loading with fallback
        (function() {
            const script = document.createElement('script');
            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/ethers/6.8.1/ethers.umd.min.js';
            script.async = true;
            script.onload = function() {
                window.ethers = ethers;
                console.log('✅ Ethers.js loaded asynchronously');
                // Trigger Web3 enhancement phase
                if (window.enhancementPhase) {
                    window.enhancementPhase.triggerWeb3Enhancement();
                }
            };
            script.onerror = function() {
                console.warn('⚠️ Ethers.js failed to load - Web3 features disabled');
            };
            document.head.appendChild(script);
        })();
    </script>
    
    <!-- Instant Mobile Detection -->
    <script>
        // Mobile detection and CSS property setup for main landing page
        (function() {
            window.BlockZoneMobile = {
                _isMobile: window.innerWidth <= 768 || /Android|iPhone|iPad|iPod/i.test(navigator.userAgent),
                _isTablet: window.innerWidth > 768 && window.innerWidth <= 1024 && 'ontouchstart' in window,
                _hasTouch: 'ontouchstart' in window || navigator.maxTouchPoints > 0,
                _isPWA: window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true,
                isMobile() { return this._isMobile; },
                isTablet() { return this._isTablet; },
                hasTouch() { return this._hasTouch; },
                isPWA() { return this._isPWA; },
                hasPhysicalKeyboard() { 
                    return !/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) || window.innerWidth > 1024;
                },
                needsMobileControls() {
                    return (this._isMobile || this._isTablet) && !this.hasPhysicalKeyboard();
                },
                getScreenSize() {
                    const w = window.innerWidth;
                    return w <= 480 ? 'small' : w <= 768 ? 'medium' : w <= 1024 ? 'large' : 'xlarge';
                }
            };
            document.documentElement.style.setProperty('--is-mobile', window.BlockZoneMobile._isMobile ? '1' : '0');
            document.documentElement.style.setProperty('--has-touch', window.BlockZoneMobile._hasTouch ? '1' : '0');
            document.documentElement.style.setProperty('--has-keyboard', window.BlockZoneMobile.hasPhysicalKeyboard() ? '1' : '0');
            document.documentElement.style.setProperty('--needs-mobile-controls', window.BlockZoneMobile.needsMobileControls() ? '1' : '0');
        })();
    </script>
</head>

<body class="landing-page">
    <!-- Loading Screen - Instant Visual Feedback -->
    <div class="loading-screen" id="loadingScreen">
        <div class="loading-content">
            <div class="loading-logo">✧ BlockZone Lab</div>
            <div class="loading-progress">
                <div class="loading-bar" id="loadingBar"></div>
            </div>
            <div>Loading Web3 Gaming Experience...</div>
        </div>
    </div>

    <!-- Navigation - Fixed and Optimized -->
    <nav class="navbar" id="navbar">
        <div class="navbar-container">
            <a href="/" class="navbar-brand">
                <span class="brand-letter">B</span>
                <span class="brand-letter">l</span>
                <span class="brand-letter">o</span>
                <span class="brand-letter">c</span>
                <span class="brand-letter">k</span>
                <span class="brand-letter">Z</span>
                <span class="brand-letter">o</span>
                <span class="brand-letter">n</span>
                <span class="brand-letter">e</span>
                <span class="brand-letter"> </span>
                <span class="brand-letter">L</span>
                <span class="brand-letter">a</span>
                <span class="brand-letter">b</span>
            </a>
            
            <ul class="navbar-nav">
                <li><a href="/" class="nav-link active">Home</a></li>
                <li><a href="/games/" class="nav-link">Games</a></li>
                <li><a href="/academy/" class="nav-link">Academy</a></li>
                <li><a href="/pages/business-model.html" class="nav-link">Business</a></li>
                <li><a href="/pages/whitepaper.html" class="nav-link">Whitepaper</a></li>
            </ul>
            
            <div class="navbar-actions">
                <a href="/pages/user-profile.html" class="btn btn-secondary btn-sm">Profile</a>
                <a href="/games/" class="btn btn-secondary btn-sm">Play Now</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section - Critical Content First -->
    <section class="hero-section" id="heroSection">
        <div class="hero-content">
            <h1 class="hero-title">BlockZone Lab</h1>
            <p class="hero-subtitle">Premium Blockchain Edutainment</p>
            <div class="hero-cards" id="heroCards">
                <!-- Game Card -->
                <div class="hero-card game-card card card--hover card--glow" onclick="handlePlayNowClick('neondrop')">
                    <div class="hero-card-header">
                        <div class="hero-card-icon">
                            <div class="game-title-blocks">
                                <div class="title-block title-neon">N</div>
                                <div class="title-block title-neon">E</div>
                                <div class="title-block title-neon">O</div>
                                <div class="title-block title-neon">N</div>
                                <div class="title-block title-spacer"></div>
                                <div class="title-block title-drop">D</div>
                                <div class="title-block title-drop">R</div>
                                <div class="title-block title-drop">O</div>
                                <div class="title-block title-drop">P</div>
                            </div>
                        </div>
                        <h3>Daily Leaderboard Challenge</h3>
                    </div>
                    <div class="hero-card-footer">
                        <div class="card-action-text">Compete & Challenge</div>
                    </div>
                </div>
                
                <!-- Academy Card -->
                <div class="hero-card academy-card card card--hover card--glow" onclick="window.location.href='/academy/'">
                    <div class="hero-card-header">
                        <div class="hero-card-icon">
                            <div class="academy-icons">
                                <span>⬜</span>
                                <span>🔗</span>
                                <span>🎓</span>
                            </div>
                        </div>
                        <h3>Crypto Academy</h3>
                    </div>
                    <div class="hero-card-footer">
                        <div class="card-action-text">Explore & Develop</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Progressive Enhancement Content -->
    <div class="enhancement-ready" id="enhancementContent">
        <!-- Welcome System -->
        <div id="welcomeBanner" style="display: none;">
            <!-- Will be populated by JavaScript -->
        </div>

        <!-- Yellow Animated Banner for Daily Leaderboard -->
        <section class="daily-leaderboard-banner">
            <div class="banner-content">
                <div class="banner-icon">🏆</div>
                <div class="banner-text">
                    <h3>Neon Drop Daily Challenge</h3>
                    <p>USDC prizes, hyperbolic decay payouts, daily tournaments!</p>
                </div>
                <div class="banner-stats">
                    <div class="stat">
                        <span class="stat-number">USDC</span>
                        <span class="stat-label">Prizes</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">30%</span>
                        <span class="stat-label">1st Place</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">11pm</span>
                        <span class="stat-label">Daily Reset</span>
                    </div>
                </div>
                <a href="#" class="banner-btn" onclick="showLeaderboard()">View Leaderboard</a>
            </div>
        </section>

        <!-- Mission Statement Section -->
        <section class="mission-section section">
            <div class="container">
                <div class="mission-content">
                    <div class="mission-text">
                        <h2>Our Mission: Educate, Entertain, Empower</h2>
                        <p class="mission-description">
                            At BlockZone Lab, we believe the best way to learn blockchain technology is by experiencing it firsthand. 
                            Our platform combines competitive gaming with comprehensive education to create an engaging learning environment 
                            that rewards both skill and knowledge.
                        </p>
                        <div class="mission-pillars">
                            <div class="pillar">
                                <div class="pillar-icon">🎮</div>
                                <h3>Entertain</h3>
                                <p>Skill-based gaming tournaments with real USDC prizes make learning exciting and rewarding.</p>
                            </div>
                            <div class="pillar">
                                <div class="pillar-icon">📚</div>
                                <h3>Educate</h3>
                                <p>Comprehensive blockchain curriculum from basics to advanced DeFi concepts.</p>
                            </div>
                            <div class="pillar">
                                <div class="pillar-icon">🚀</div>
                                <h3>Empower</h3>
                                <p>Hands-on experience with real blockchain technology and smart contracts.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>



        <!-- Educational Impact Section -->
        <section class="education-section section">
            <div class="container">
                <div class="education-content">
                    <div class="education-text">
                        <h2>Making Blockchain Education Accessible</h2>
                        <p class="education-description">
                            Traditional blockchain education can be dry and theoretical. We've solved this by creating 
                            an immersive learning environment where you earn while you learn. Our platform demonstrates 
                            real blockchain applications through gaming, making complex concepts tangible and engaging.
                        </p>
                        <div class="education-benefits">
                            <div class="benefit">
                                <div class="benefit-icon">🎯</div>
                                <h4>Hands-On Experience</h4>
                                <p>Interact with real smart contracts and USDC transactions</p>
                            </div>
                            <div class="benefit">
                                <div class="benefit-icon">💰</div>
                                <h4>Earn While Learning</h4>
                                <p>Win real prizes while mastering blockchain concepts</p>
                            </div>
                            <div class="benefit">
                                <div class="benefit-icon">🌐</div>
                                <h4>Community Driven</h4>
                                <p>Learn alongside other blockchain enthusiasts</p>
                            </div>
                            <div class="benefit">
                                <div class="benefit-icon">📈</div>
                                <h4>Progressive Learning</h4>
                                <p>Structured curriculum from beginner to advanced</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Footer -->
        <footer class="footer">
            <div class="container">
                <div class="footer-content">
                    <div class="footer-brand">
                        <span>✧</span> BlockZone Lab
                        <p>Professional gaming meets blockchain education</p>
                    </div>
                    
                    <div class="footer-links">
                                            <div class="footer-section">
                        <h4>Platform</h4>
                        <ul>
                            <li><a href="/games/">Games</a></li>
                            <li><a href="/academy/">Academy</a></li>
                            <li><a href="/pages/user-profile.html">Profile</a></li>
                        </ul>
                    </div>
                        
                                            <div class="footer-section">
                        <h4>Business</h4>
                        <ul>
                            <li><a href="/pages/business-model.html">Business Model</a></li>
                            <li><a href="/pages/whitepaper.html">Whitepaper</a></li>
                        </ul>
                    </div>
                        
                        <div class="footer-section">
                            <h4>Support</h4>
                            <ul>
                                <li><a href="/pages/user-profile.html">Help Center</a></li>
                                <li><a href="/pages/business-model.html">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="footer-bottom">
                    <p>&copy; 2024 BlockZone Lab. All rights reserved.</p>
                </div>
            </div>
        </footer>
    </div>

    <!-- Instant Play Architecture Integration - Optimized -->
    <script type="module">
        // Initialize instant play platform with new loading sequence
        let blockZonePlatform;
        let gameStartInProgress = false;
        
        // Defensive play button handler - Enhanced for new architecture
        window.handlePlayNowClick = function(gameType = 'neondrop') {
            console.log('🎮 Play button clicked:', gameType);
            
            // Check if we're still in loading phase
            if (window.enhancementPhase && window.enhancementPhase.currentPhase < 3) {
                console.log('⏳ Waiting for full system load...');
                // Queue the action for when systems are ready
                window.enhancementPhase.queueAction(() => {
                    window.handlePlayNowClick(gameType);
                });
                return;
            }
            
            // Try instant play first (preferred)
            if (window.blockZoneInstantPlay && typeof window.blockZoneInstantPlay.startGame === 'function') {
                console.log('✅ Using instant play system');
                window.blockZoneInstantPlay.startGame(gameType);
                return;
            }
            
            // Fallback to paywall manager
            if (window.paywallManager && typeof window.paywallManager.interceptGameStart === 'function') {
                console.log('🔄 Using paywall manager');
                window.paywallManager.interceptGameStart(gameType);
                return;
            }
            
            // Final fallback - direct game start
            if (window.startGame && typeof window.startGame === 'function') {
                console.log('⚡ Direct game start');
                window.startGame();
                return;
            }
            
            console.error('❌ No game start method available');
            alert('Game system not ready. Please refresh the page.');
        };

        // Global instant play function - Enhanced
        window.blockZoneInstantPlay = {
            async startGame(gameType = 'neondrop') {
                // For NeonDrop, redirect to dedicated game page (Claude's recommended approach)
                if (gameType === 'neondrop') {
                    console.log('🎮 Launching NeonDrop in dedicated game environment...');
                    console.log('🎯 Preserving instant play context...');
                    
                    // Preserve instant play mode for the game page
                    sessionStorage.setItem('instant_play_mode', 'true');
                    
                    // Add loading state
                    this.showGameLoading();
                    
                    // Redirect to game page
                    setTimeout(() => {
                        window.location.href = '/games/neondrop/';
                    }, 500);
                }
            },
            
            showGameLoading() {
                // Create loading overlay
                const overlay = document.createElement('div');
                overlay.id = 'game-loading-overlay';
                overlay.style.cssText = `
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100vw;
                    height: 100vh;
                    background: rgba(0, 0, 0, 0.9);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 9999;
                    color: #00ff41;
                    font-size: 1.2rem;
                `;
                overlay.innerHTML = `
                    <div style="text-align: center;">
                        <div style="font-size: 2rem; margin-bottom: 1rem;">🎮</div>
                        <div>Loading NeonDrop...</div>
                        <div style="margin-top: 1rem; font-size: 0.9rem; color: #888;">Preparing Web3 gaming experience</div>
                    </div>
                `;
                document.body.appendChild(overlay);
            },
            
            async showProfile() {
                try {
                    if (!blockZonePlatform) {
                        console.log('🚀 Initializing instant play platform...');
                        blockZonePlatform = new BlockZoneLab();
                        await blockZonePlatform.init();
                    }
                    
                    blockZonePlatform.showEnhancementOptions();
                    
                } catch (error) {
                    console.error('❌ Profile display failed:', error);
                    alert('Profile failed to load. Please refresh and try again.');
                }
            }
        };
        
        console.log('✅ Instant Play Architecture initialized with new loading sequence');
    </script>

    <!-- PaywallManager Debug Script - Enhanced -->
    <script>
        // Only show debug info in development
        const isDevelopment = window.location.hostname === 'localhost' || 
                             window.location.hostname.includes('127.0.0.1') ||
                             window.location.search.includes('debug=true');
        
        if (isDevelopment) {
            console.log('🔍 === PAYWALL DEBUG ===');
            console.log('🔍 Initial window.paywallManager:', window.paywallManager);

            // Check periodically
            const checkPaywallManager = () => {
                console.log('🔍 PaywallManager check:', {
                    exists: !!window.paywallManager,
                    type: typeof window.paywallManager,
                    hasInterceptMethod: !!(window.paywallManager && window.paywallManager.interceptGameStart),
                    methodType: window.paywallManager ? typeof window.paywallManager.interceptGameStart : 'N/A'
                });
            };

            // Check immediately and after DOM load
            checkPaywallManager();
            document.addEventListener('DOMContentLoaded', checkPaywallManager);

            // Check after 1 second (in case it's loaded later)
            setTimeout(checkPaywallManager, 1000);

            // Make debugging functions available
            window.debugPaywall = {
                check: checkPaywallManager,
                bypass: () => {
                    console.log('🚨 MANUAL BYPASS ACTIVATED');
                    window.DEVELOPMENT_BYPASS = true;
                },
                startGame: async () => {
                    if (window.blockZoneInstantPlay) {
                        await window.blockZoneInstantPlay.startGame('neondrop');
                    } else {
                        console.error('Instant play not available');
                    }
                },
                testPaywall: () => {
                    console.log('🧪 Testing paywall display...');
                    if (window.paywallManager) {
                        window.paywallManager.showPaymentOptions('neondrop');
                    } else {
                        console.error('PaywallManager not available');
                    }
                }
            };
        } else {
            // In production, just do a silent check for errors
            const silentCheck = () => {
                if (window.paywallManager && typeof window.paywallManager.interceptGameStart !== 'function') {
                    console.error('❌ PaywallManager missing required method');
                }
            };
            setTimeout(silentCheck, 2000);
        }
    </script>

    <!-- Real PaywallManager Initialization - Enhanced -->
    <script type="module">
        // Import and initialize REAL PaywallManager with new loading sequence
        import { PaywallManager } from './shared/components/PaywallManager.js';
        import { LeaderboardDisplay } from './shared/components/LeaderboardDisplay.js';
        
        // Initialize REAL PaywallManager
        window.paywallManager = new PaywallManager();
        console.log('✅ PaywallManager initialized:', window.paywallManager);
        
        // Initialize other components
        window.leaderboardDisplay = new LeaderboardDisplay();
        
        window.showLeaderboard = async function() {
            try {
                await window.leaderboardDisplay.show();
            } catch (error) {
                console.error('❌ Error showing leaderboard:', error);
                alert('Unable to load leaderboard. Please try again.');
            }
        };
        
        window.showPlayerProfile = function() {
            if (window.blockZoneInstantPlay) {
                window.blockZoneInstantPlay.showProfile();
            } else {
                console.error('Instant play system not ready');
            }
        };
    </script>

    <!-- Leaderboard Display Component - Enhanced -->
    <script type="module">
        import { LeaderboardDisplay } from './shared/components/LeaderboardDisplay.js';
        
        // Global leaderboard instance
        window.leaderboardDisplay = new LeaderboardDisplay();
        
        // Function to show leaderboard from banner
        window.showLeaderboard = async function() {
            try {
                console.log('🏆 Showing leaderboard from banner...');
                await window.leaderboardDisplay.show();
            } catch (error) {
                console.error('❌ Error showing leaderboard:', error);
                alert('Unable to load leaderboard. Please try again.');
            }
        };
    </script>
    
    <!-- Main Entry Point -->
    <script type="module" src="./shared/wrapper/GameRouter.js"></script>

    <!-- Optimized Loading Sequence - Progressive Enhancement Architecture -->
    <script>
        // 🚀 BLOCKZONE LAB - OPTIMIZED LOADING SEQUENCE
        // Phase 1: Critical Rendering (0-100ms)
        // Phase 2: Progressive Enhancement (100-500ms) 
        // Phase 3: Web3 Integration (500ms+)
        // Phase 4: Advanced Features (1s+)
        
        window.enhancementPhase = {
            currentPhase: 0,
            phases: ['critical', 'enhancement', 'web3', 'advanced'],
            
            // Phase 1: Critical Rendering (Instant)
            initCriticalPhase() {
                console.log('🚀 Phase 1: Critical Rendering');
                
                // Simulate loading progress
                const loadingBar = document.getElementById('loadingBar');
                const loadingScreen = document.getElementById('loadingScreen');
                
                let progress = 0;
                const progressInterval = setInterval(() => {
                    progress += Math.random() * 15;
                    if (progress >= 100) {
                        progress = 100;
                        clearInterval(progressInterval);
                        
                        // Hide loading screen with beautiful transition
                        setTimeout(() => {
                            loadingScreen.classList.add('fade-out');
                            setTimeout(() => {
                                loadingScreen.style.display = 'none';
                                this.initEnhancementPhase();
                            }, 500);
                        }, 200);
                    }
                    loadingBar.style.width = progress + '%';
                }, 50);
            },
            
            // Phase 2: Progressive Enhancement (100-500ms)
            initEnhancementPhase() {
                console.log('✨ Phase 2: Progressive Enhancement');
                
                // Animate critical elements in sequence
                const navbar = document.getElementById('navbar');
                const heroSection = document.getElementById('heroSection');
                const heroCards = document.getElementById('heroCards');
                
                // Navbar slides down
                setTimeout(() => navbar.classList.add('loaded'), 100);
                
                // Hero section fades in
                setTimeout(() => heroSection.classList.add('loaded'), 300);
                
                // Hero cards start 3-second materialization (buying time for other systems)
                setTimeout(() => {
                    heroCards.classList.add('loaded');
                    console.log('🎴 Hero cards starting 3-second materialization...');
                    
                    // Use this 3-second window to load everything else
                    this.loadNonCriticalCSS();
                    this.initBasicInteractions();
                    
                    // Start loading Web3 systems during card animation
                    setTimeout(() => this.initWeb3Phase(), 2000); // Start Web3 loading at 2s mark
                    
                }, 600);
            },
            
            // Phase 3: Web3 Integration (500ms+)
            initWeb3Phase() {
                console.log('🔗 Phase 3: Web3 Integration');
                
                // Show enhancement content
                const enhancementContent = document.getElementById('enhancementContent');
                enhancementContent.classList.add('loaded');
                
                // Initialize Web3 systems if available
                if (window.ethers) {
                    this.initWeb3Systems();
                } else {
                    // Wait for ethers to load
                    const checkEthers = setInterval(() => {
                        if (window.ethers) {
                            clearInterval(checkEthers);
                            this.initWeb3Systems();
                        }
                    }, 100);
                }
                
                // Move to advanced phase
                setTimeout(() => this.initAdvancedPhase(), 1000);
            },
            
            // Phase 4: Advanced Features (1s+)
            initAdvancedPhase() {
                console.log('🎮 Phase 4: Advanced Features');
                
                // Load game systems
                this.loadGameSystems();
                
                // Initialize analytics and tracking
                this.initAnalytics();
                
                // Final polish and optimizations
                this.finalPolish();
                
                console.log('✅ BlockZone Lab fully loaded and optimized');
            },
            
            // Load non-critical CSS asynchronously
            loadNonCriticalCSS() {
                const link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = 'assets/css/design-system.css';
                link.media = 'print';
                link.onload = () => {
                    link.media = 'all';
                    console.log('✅ Design system CSS loaded');
                };
                document.head.appendChild(link);
                
                const gameCSS = document.createElement('link');
                gameCSS.rel = 'stylesheet';
                gameCSS.href = 'assets/css/game-wrapper.css';
                gameCSS.media = 'print';
                gameCSS.onload = () => {
                    gameCSS.media = 'all';
                    console.log('✅ Game wrapper CSS loaded');
                };
                document.head.appendChild(gameCSS);
            },
            
            // Initialize basic interactions
            initBasicInteractions() {
                // Mobile menu toggle
                const navbarToggle = document.getElementById('navbarToggle');
                const navbarNav = document.querySelector('.navbar-nav');
                
                if (navbarToggle && navbarNav) {
                    navbarToggle.addEventListener('click', () => {
                        navbarNav.classList.toggle('active');
                    });
                }
                
                // Smooth scrolling for anchor links
                document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                    anchor.addEventListener('click', function (e) {
                        e.preventDefault();
                        const target = document.querySelector(this.getAttribute('href'));
                        if (target) {
                            target.scrollIntoView({
                                behavior: 'smooth',
                                block: 'start'
                            });
                        }
                    });
                });
            },
            
            // Initialize Web3 systems
            initWeb3Systems() {
                console.log('🔗 Initializing Web3 systems...');
                
                // Check for Web3 wallet
                if (window.ethereum) {
                    console.log('✅ Web3 wallet detected');
                    this.initWalletConnection();
                } else {
                    console.log('⚠️ No Web3 wallet detected - Web3 features disabled');
                }
                
                // Initialize blockchain-aware components
                this.initBlockchainComponents();
            },
            
            // Initialize wallet connection
            initWalletConnection() {
                // Listen for account changes
                window.ethereum.on('accountsChanged', (accounts) => {
                    console.log('👛 Account changed:', accounts[0]);
                    this.updateWalletUI(accounts[0]);
                });
                
                // Check if already connected
                window.ethereum.request({ method: 'eth_accounts' })
                    .then(accounts => {
                        if (accounts.length > 0) {
                            this.updateWalletUI(accounts[0]);
                        }
                    })
                    .catch(err => console.log('No accounts found'));
            },
            
            // Update wallet UI
            updateWalletUI(address) {
                if (address) {
                    const shortAddress = address.slice(0, 6) + '...' + address.slice(-4);
                    console.log('👛 Connected:', shortAddress);
                    
                    // Update UI elements that show wallet status
                    const walletElements = document.querySelectorAll('[data-wallet-status]');
                    walletElements.forEach(el => {
                        el.textContent = shortAddress;
                        el.classList.add('connected');
                    });
                }
            },
            
            // Initialize blockchain components
            initBlockchainComponents() {
                // Add blockchain-aware features to existing components
                this.enhanceLeaderboard();
                this.enhanceGameCards();
            },
            
            // Enhance leaderboard with real-time data
            enhanceLeaderboard() {
                const leaderboardBtn = document.querySelector('.banner-btn');
                if (leaderboardBtn) {
                    leaderboardBtn.addEventListener('click', (e) => {
                        e.preventDefault();
                        this.showEnhancedLeaderboard();
                    });
                }
            },
            
            // Show enhanced leaderboard
            showEnhancedLeaderboard() {
                console.log('🏆 Showing enhanced leaderboard...');
                // This would integrate with your existing LeaderboardDisplay component
                if (window.showLeaderboard) {
                    window.showLeaderboard();
                }
            },
            
            // Enhance game cards with Web3 features
            enhanceGameCards() {
                const gameCards = document.querySelectorAll('.game-card');
                gameCards.forEach(card => {
                    // Add hover effects and Web3 context
                    card.addEventListener('mouseenter', () => {
                        card.style.transform = 'translateY(-5px) scale(1.02)';
                    });
                    
                    card.addEventListener('mouseleave', () => {
                        card.style.transform = 'translateY(0) scale(1)';
                    });
                });
            },
            
            // Load game systems
            loadGameSystems() {
                console.log('🎮 Loading game systems...');
                
                // Load PaywallManager and other game components
                this.loadGameComponents();
                
                // Initialize instant play architecture
                this.initInstantPlay();
            },
            
            // Load game components
            async loadGameComponents() {
                try {
                    // Dynamic import of game components
                    const { PaywallManager } = await import('./shared/components/PaywallManager.js');
                    const { LeaderboardDisplay } = await import('./shared/components/LeaderboardDisplay.js');
                    
                    // Initialize components
                    window.paywallManager = new PaywallManager();
                    window.leaderboardDisplay = new LeaderboardDisplay();
                    
                    console.log('✅ Game components loaded');
                } catch (error) {
                    console.warn('⚠️ Some game components failed to load:', error);
                }
            },
            
            // Initialize instant play
            initInstantPlay() {
                // Initialize your existing instant play architecture
                if (window.blockZoneInstantPlay) {
                    console.log('✅ Instant play architecture ready');
                }
            },
            
            // Initialize analytics
            initAnalytics() {
                // Performance monitoring
                if ('performance' in window) {
                    const perfData = performance.getEntriesByType('navigation')[0];
                    console.log('📊 Page load time:', perfData.loadEventEnd - perfData.loadEventStart, 'ms');
                }
                
                // User interaction tracking
                this.trackUserInteractions();
            },
            
            // Track user interactions
            trackUserInteractions() {
                // Track button clicks
                document.addEventListener('click', (e) => {
                    if (e.target.matches('.btn, button')) {
                        console.log('👆 User clicked:', e.target.textContent.trim());
                    }
                });
                
                // Track scroll depth
                let maxScroll = 0;
                window.addEventListener('scroll', () => {
                    const scrollPercent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
                    if (scrollPercent > maxScroll) {
                        maxScroll = scrollPercent;
                        if (maxScroll > 50 && !this.scrollTracked) {
                            console.log('📊 User scrolled past 50%');
                            this.scrollTracked = true;
                        }
                    }
                });
            },
            
            // Final polish
            finalPolish() {
                // Add subtle animations
                this.addSubtleAnimations();
                
                // Optimize performance
                this.optimizePerformance();
                
                // Set up periodic health checks
                this.setupHealthChecks();
            },
            
            // Add subtle animations
            addSubtleAnimations() {
                // Parallax effect for hero section
                window.addEventListener('scroll', () => {
                    const scrolled = window.pageYOffset;
                    const hero = document.getElementById('heroSection');
                    if (hero) {
                        hero.style.transform = `translateY(${scrolled * 0.5}px)`;
                    }
                });
                
                // Floating animation for icons
                const icons = document.querySelectorAll('.action-icon, .pillar-icon, .benefit-icon');
                icons.forEach((icon, index) => {
                    icon.style.animationDelay = `${index * 0.1}s`;
                    icon.style.animation = 'float 3s ease-in-out infinite';
                });
            },
            
            // Optimize performance
            optimizePerformance() {
                // Lazy load images
                const images = document.querySelectorAll('img[data-src]');
                const imageObserver = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const img = entry.target;
                            img.src = img.dataset.src;
                            img.classList.remove('lazy');
                            imageObserver.unobserve(img);
                        }
                    });
                });
                
                images.forEach(img => imageObserver.observe(img));
                
                // Preload critical resources
                this.preloadCriticalResources();
            },
            
            // Preload critical resources
            preloadCriticalResources() {
                const criticalResources = [
                    '/games/neondrop/',
                    '/academy/',
                    '/shared/components/PlayerProfile.js'
                ];
                
                criticalResources.forEach(resource => {
                    const link = document.createElement('link');
                    link.rel = 'prefetch';
                    link.href = resource;
                    document.head.appendChild(link);
                });
            },
            
            // Setup health checks
            setupHealthChecks() {
                // Monitor Web3 connection
                setInterval(() => {
                    if (window.ethereum && !window.ethereum.isConnected()) {
                        console.warn('⚠️ Web3 connection lost');
                    }
                }, 30000);
                
                // Monitor performance
                setInterval(() => {
                    if (performance.memory) {
                        const memoryUsage = performance.memory.usedJSHeapSize / 1048576; // MB
                        if (memoryUsage > 100) {
                            console.warn('⚠️ High memory usage:', memoryUsage.toFixed(2), 'MB');
                        }
                    }
                }, 60000);
            },
            
            // Trigger Web3 enhancement (called when ethers loads)
            triggerWeb3Enhancement() {
                if (this.currentPhase >= 2) {
                    this.initWeb3Systems();
                }
            },

            // Queue actions to run after current phase is complete
            queueAction(action) {
                setTimeout(action, 100); // Small delay to ensure DOM is ready
            }
        };
        
        // Start the loading sequence when DOM is ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', () => {
                window.enhancementPhase.initCriticalPhase();
            });
        } else {
            window.enhancementPhase.initCriticalPhase();
        }
    </script>
    

</body>
</html> 