<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BlockZone Lab - Premium Crypto Edutainment</title>
    
    <!-- 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">
    
    <!-- Professional Design System CSS -->
    <link rel="stylesheet" href="assets/css/design-system.css">
    <link rel="stylesheet" href="shared/hero-shared.css">
    <!-- REMOVED: page-template.css no longer exists -->
    
    <!-- EXACT GAMES PAGE STYLES - NO OVERRIDES NEEDED -->
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="public/favicon.svg">
    
    <!-- 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">
    
    <style>
        /* CRITICAL RENDERING PATH - Minimal styles for instant visual feedback */
        :root {
            --primary: #00ff41;
            --bg-primary: #0a0a0a;
            --bg-secondary: #0a0a0a;
            --text-primary: #ffffff;
            --text-secondary: #cccccc;
            
            /* Neon Drop Color Palette */
            --neon-cyan: #00d4ff;
            --neon-green: #00ff00;
            --neon-red: #ff6b6b;
            --neon-gold: #ffd700;
            --dark-blue-1: #1a1a2e;
            --dark-blue-2: #16213e;
            --dark-blue-3: #0f3460;
            
            /* Neutral Grays */
            --gray-100: #f8f9fa;
            --gray-200: #e9ecef;
            --gray-300: #dee2e6;
            --gray-400: #ced4da;
            --gray-500: #adb5bd;
            --gray-600: #6c757d;
            --gray-700: #495057;
            --gray-800: #343a40;
            --gray-900: #212529;
            
            /* Unified Card System Dimensions */
            --card-min-width: 280px;
            --card-max-width: 320px;
            --card-min-height: 400px;
            --card-max-height: 450px;
            --card-aspect-ratio: 2/3;
        }
        
        /* 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(255, 255, 255, 0.1);
            z-index: 1030; /* Using unified z-index system */
            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 {
            width: 100%;
            margin: 0;
            padding: 0 2rem;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            height: 32px;
        }
        
        .navbar-nav {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            justify-content: space-between;
            width: 100%;
            align-items: center;
            transform: translateY(-10px);
        }
        
        .nav-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
            font-size: 0.9rem;
        }
        
        .nav-link:hover,
        .nav-link.active {
            color: var(--primary);
        }
        
        /* NEW CARD-BASED LAYOUT */
        .main-content {
            background: #0a0a0a;
            min-height: 100vh;
            padding: 2rem 0;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        
        /* YELLOW BANNER - Moved up and restyled */
        .yellow-banner {
            background: linear-gradient(135deg, var(--neon-gold) 0%, #ffed4e 100%);
            border-radius: 12px;
            padding: 2rem;
            margin: 2rem 0 4rem 0;
            text-align: center;
            box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3);
            border: 2px solid var(--neon-gold);
        }
        
        .yellow-banner h2 {
            color: #000;
            font-size: 2.5rem;
            margin-bottom: 1rem;
            font-weight: 700;
        }
        
        .yellow-banner p {
            color: #333;
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }
        
        .banner-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .banner-btn {
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .banner-btn.primary {
            background: #000;
            color: var(--neon-gold);
            border-color: #000;
        }
        
        .banner-btn.primary:hover {
            background: transparent;
            color: #000;
        }
        
        .banner-btn.secondary {
            background: transparent;
            color: #000;
            border-color: #000;
        }
        
        .banner-btn.secondary:hover {
            background: #000;
            color: var(--neon-gold);
        }
        
        /* CENTRAL HUB CARD */
        .central-hub {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid var(--neon-cyan);
            border-radius: 20px;
            padding: 3rem;
            padding-top: 5rem; /* Increased top padding to prevent navbar blending */
            margin: 4rem 0;
            text-align: center;
            backdrop-filter: blur(10px);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
            transition: all 0.3s ease;
        }
        
        .central-hub:hover {
            box-shadow: 0 0 50px rgba(0, 212, 255, 0.4);
            transform: translateY(-5px);
        }
        
        .central-hub h2 {
            color: var(--neon-cyan);
            font-size: 2.8rem;
            margin-bottom: 1.5rem;
            font-weight: 700;
            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
        }
        
        .central-hub p {
            color: var(--text-secondary);
            font-size: 1.3rem;
            line-height: 1.6;
            margin-bottom: 2rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .telegram-link {
            display: inline-block;
            background: linear-gradient(135deg, var(--neon-cyan), #0099cc);
            color: #000;
            padding: 15px 30px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: 2px solid var(--neon-cyan);
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
        }
        
        .telegram-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
        }
        
        /* UNIFIED BLOCKZONE CARD SYSTEM - NOW INHERITED FROM page-template.css */
        /* All card styling is now managed by the enterprise-grade unified system */
        /* Only keeping card-specific color overrides for visual distinction */
        
        /* PROPER SPACING FOR UNIFIED SYSTEM */
        .blockzone-grid {
            margin-top: 6rem !important; /* Increased top margin to prevent navbar blending */
        }
        
        /* CARD-SPECIFIC NEON COLORS - ALL BLUE FOR MAIN LANDING */
        .card-gaming,
        .card-technology,
        .card-education,
        .card-rewards,
        .card-decentralized,
        .card-community {
            border-color: var(--neon-cyan) !important;
        }
        
        .card-gaming:hover,
        .card-technology:hover,
        .card-education:hover,
        .card-rewards:hover,
        .card-decentralized:hover,
        .card-community:hover {
            border-color: var(--neon-cyan) !important;
            box-shadow: 0 12px 40px rgba(0, 212, 255, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4) !important;
        }
        
        .card-gaming h3,
        .card-technology h3,
        .card-education h3,
        .card-rewards h3,
        .card-decentralized h3,
        .card-community h3 {
            color: var(--neon-cyan) !important;
        }
        
        /* MINI LOGO AT BOTTOM - 1/10th size of main logo */
        .mini-logo-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 3rem 0;
            background: transparent;
        }
        
        .mini-logo {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.9px; /* 3x bigger (was 0.3px) */
        }
        
        .mini-logo-letter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px; /* 3x bigger (was 6px) */
            height: 18px; /* 3x bigger (was 6px) */
            border-radius: 0.9px; /* 3x bigger (was 0.3px) */
            font-size: 23.4px; /* 3x bigger (was 7.8px) */
            font-weight: bold;
            color: #000;
            background: #00ff41;
            border: 0.6px solid #ff4444; /* 3x bigger (was 0.2px) */
            box-shadow: none;
            transition: all 0.3s ease;
            font-family: 'Minion Pro', 'Minion Pro Bold', 'Times New Roman', serif;
        }
        
        .mini-logo-letter:nth-child(6) {
            /* The "Z" - make it look like the favicon */
            background: #FFFF00;
            border: 0.6px solid #ff4444;
            color: #ff4444;
            box-shadow: none;
            font-size: 25.2px; /* 3x bigger (was 8.4px) */
        }
        
        .mini-logo-letter:nth-child(10) {
            /* The space - make it green like the others */
            background: #00ff41;
            border: 0.6px solid #ff4444;
            box-shadow: none;
            width: 18px; /* 3x bigger (was 6px) */
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .central-hub {
                padding: 2rem;
            }
            
            .central-hub h2 {
                font-size: 2.2rem;
            }
            
            .yellow-banner h2 {
                font-size: 2rem;
            }
        }
        
        @media (max-width: 480px) {
            .central-hub {
                padding: 1.5rem;
            }
            
            .central-hub h2 {
                font-size: 1.8rem;
            }
            
            .yellow-banner h2 {
                font-size: 1.6rem;
            }
        }
    </style>
</head>

<body class="landing-page">
    <!-- Navigation - Fixed and Optimized -->
    <nav class="navbar" id="navbar">
        <div class="navbar-container">
            <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>
                <li><a href="/pages/user-profile.html" class="nav-link">Support</a></li>
                <li><a href="/pages/profile.html" class="nav-link">Profile</a></li>
            </ul>
        </div>
    </nav>

    <!-- Hero Section - Critical Content First -->
    <section class="hero-section" id="heroSection">
        <div class="hero-content">
            <!-- Large Hero Brand with Proper Word Spacing -->
            <div class="hero-brand">
                <span class="hero-brand-letter">B</span>
                <span class="hero-brand-letter">l</span>
                <span class="hero-brand-letter">o</span>
                <span class="hero-brand-letter">c</span>
                <span class="hero-brand-letter">k</span>
                <span class="hero-brand-letter">Z</span>
                <span class="hero-brand-letter">o</span>
                <span class="hero-brand-letter">n</span>
                <span class="hero-brand-letter">e</span>
                <span class="hero-brand-letter"> </span>
                <span class="hero-brand-letter">L</span>
                <span class="hero-brand-letter">a</span>
                <span class="hero-brand-letter">b</span>
            </div>
            <div class="hero-subtitle" data-text="PREMIUM CRYPTO EDUTAINMENT">
                <span>PREMIUM</span>
                <span>CRYPTO</span>
                <span>EDUTAINMENT</span>
            </div>
        </div>
    </section>

    <!-- Main Content - New Card-Based Layout -->
    <main class="main-content">
        <div class="container">
            <!-- Yellow Banner - Moved up and restyled -->
            <section class="yellow-banner">
                <h2>🎮 Ready to Play?</h2>
                <p>Start with a FREE game daily, then compete for real USDC prizes in our skill-based tournaments.</p>
                <div class="banner-buttons">
                    <a href="/games/" class="banner-btn primary">🎯 Play Now - FREE Game</a>
                    <a href="/academy/" class="banner-btn secondary">📚 Learn Blockchain</a>
                </div>
            </section>

            <!-- Central Hub Card -->
            <section class="central-hub">
                <h2>Welcome to Black Zone Labs</h2>
                <p>Where Classic Gaming Meets Web3 Innovation</p>
                <p>At Black Zone Labs, we're building more than just a gaming platform – we're creating a decentralized community where nostalgic arcade classics come alive with cutting-edge blockchain technology.</p>
                <a href="https://t.me/blockzonelab" target="_blank" class="telegram-link">💬 Chat with us</a>
            </section>

                        <!-- Unified Blockzone Cards Grid -->
            <div class="blockzone-grid">
                <!-- Gaming Card -->
                <div class="blockzone-card card-gaming">
                    <div class="card-content">
                        <h3>🎮 Gaming</h3>
                        <p>Daily Tournaments, Real Rewards. Step into beautifully crafted arcade game tournaments that run every day. For $0.25 per game, compete for prize pools where champions take home 30% of the pot.</p>
                    </div>
                </div>

                <!-- Technology Card -->
                <div class="blockzone-card card-technology">
                    <div class="card-content">
                        <h3>⚡ Technology</h3>
                        <p>Built on Lightning-Fast Sonic Labs – Andrei Cronje's revolutionary upgrade to Fantom – delivering over 10,000 transactions per second with sub-second finality. That's over 500 times faster than Ethereum.</p>
                    </div>
                </div>

                <!-- Education Card -->
                <div class="blockzone-card card-education">
                    <div class="card-content">
                        <h3>📚 Education</h3>
                        <p>Learn While You Play. Beyond the competition lies a comprehensive pathway to Web3 mastery. Our self-paced curriculum guides you from blockchain fundamentals through advanced programming.</p>
                    </div>
                </div>

                <!-- Rewards Card -->
                <div class="blockzone-card card-rewards">
                    <div class="card-content">
                        <h3>💰 Rewards</h3>
                        <p>Every quarter spent has the potential to 2X minimum. The economics speak for themselves: while Ethereum transactions cost around $0.35-$0.65, Sonic transactions run approximately $0.0004.</p>
                    </div>
                </div>

                <!-- Decentralized Card -->
                <div class="blockzone-card card-decentralized">
                    <div class="card-content">
                        <h3>🔗 Decentralized</h3>
                        <p>Experience Web3 as it was intended: community-owned, transparently operated, built on principles of digital sovereignty. Every tournament, every lesson demonstrates decentralized gaming and education in harmony.</p>
                    </div>
                </div>

                <!-- Community Card -->
                <div class="blockzone-card card-community">
                    <div class="card-content">
                        <h3>🌟 Community</h3>
                        <p>See what's happening in our vibrant community. Join the conversation, share strategies, and connect with fellow gamers. Play and learn about what's under the hood together!</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Mini Logo at Bottom - 1/10th size of main logo -->
    <div class="mini-logo-container">
        <div class="mini-logo">
            <span class="mini-logo-letter">B</span>
            <span class="mini-logo-letter">l</span>
            <span class="mini-logo-letter">o</span>
            <span class="mini-logo-letter">c</span>
            <span class="mini-logo-letter">k</span>
            <span class="mini-logo-letter">Z</span>
            <span class="mini-logo-letter">o</span>
            <span class="mini-logo-letter">n</span>
            <span class="mini-logo-letter">e</span>
            <span class="mini-logo-letter"> </span>
            <span class="mini-logo-letter">L</span>
            <span class="mini-logo-letter">a</span>
            <span class="mini-logo-letter">b</span>
        </div>
    </div>

    <!-- Scripts -->
    <script type="module" src="shared/core/event-bus.js"></script>
    <script>
        // Navbar animation
        const navbar = document.getElementById('navbar');
        setTimeout(() => navbar.classList.add('loaded'), 100);
        
        // Auto-set data-text for hero-subtitle with multiple spans
        document.addEventListener('DOMContentLoaded', function() {
            const heroSubtitle = document.querySelector('.hero-subtitle');
            if (heroSubtitle && !heroSubtitle.getAttribute('data-text')) {
                const spans = heroSubtitle.querySelectorAll('span');
                if (spans.length > 1) {
                    const text = Array.from(spans).map(span => span.textContent).join(' ');
                    heroSubtitle.setAttribute('data-text', text);
                }
            }
        });
        
        // Hero section animation
        const heroSection = document.getElementById('heroSection');
        setTimeout(() => heroSection.classList.add('loaded'), 300);
    </script>
</body>
</html>
