<!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>
    
    <!-- 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">
    
    <!-- Google Fonts -->
    <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">
    
    <!-- Favicon -->
    <link rel="icon" href="public/favicon.svg" type="image/svg+xml">
    
    <!-- Professional Design System CSS -->
    <link rel="stylesheet" href="assets/css/design-system.css">
    <link rel="stylesheet" href="assets/css/game-wrapper.css">
    
    <!-- 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 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/6.8.1/ethers.umd.min.js" type="application/javascript"></script>
    <script>
        // Verify ethers is loaded
        document.addEventListener('DOMContentLoaded', () => {
            console.log('Ethers.js loaded:', typeof ethers !== 'undefined' ? '✅' : '❌');
            if (typeof ethers === 'undefined') {
                console.error('Ethers.js failed to load. Please check your internet connection.');
                console.error('CDN URL: https://cdnjs.cloudflare.com/ajax/libs/ethers/6.8.1/ethers.umd.min.js');
                
                // Try to detect if it's blocked by client
                const script = document.querySelector('script[src*="ethers"]');
                if (script) {
                    script.addEventListener('error', (e) => {
                        console.error('❌ Ethers.js script failed to load:', e);
                        if (e.target.src.includes('cdnjs.cloudflare.com')) {
                            console.warn('⚠️ This may be blocked by browser extensions or network policies');
                        }
                    });
                }
            } else {
                window.ethers = ethers; // Make sure it's available globally
            }
        });
    </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">
    <!-- Professional Starfield Background -->
    <div class="starfield">
        <div class="stars"></div>
    </div>

    <!-- Navigation -->
    <nav class="navbar">
        <div class="navbar-container">
            <a href="/" class="navbar-brand">
                <span>✧</span> BlockZone Lab
            </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="/games/" class="nav-link">Tournaments</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-primary btn-sm">Play Now</a>
            </div>
            
            <button class="navbar-toggle" id="navbarToggle">
                <span>☰</span>
            </button>
        </div>
    </nav>

    <!-- 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>$30 USDC to 1st place, hyperbolic decay prizes, daily payouts!</p>
            </div>
            <div class="banner-stats">
                <div class="stat">
                    <span class="stat-number">$30</span>
                    <span class="stat-label">USDC 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>

    <!-- Hero Section -->
    <section class="hero-section section">
        <div class="container">
            <div class="hero-content text-center">
                <h1 class="hero-title">BlockZone Lab</h1>
                <p class="hero-subtitle">Where Gaming Meets Blockchain Education</p>
                <p class="hero-description">
                    We're revolutionizing Web3 education by making learning fun, interactive, and rewarding. 
                    Through skill-based gaming tournaments and comprehensive blockchain education, we're building 
                    the next generation of blockchain enthusiasts.
                </p>
                <div class="hero-stats">
                    <div class="stat">
                        <span class="stat-number">$200+</span>
                        <span class="stat-label">Daily Prizes</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">90%</span>
                        <span class="stat-label">To Winners</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">24/7</span>
                        <span class="stat-label">Tournaments</span>
                    </div>
                </div>
            </div>
        </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>

    <!-- Main Action Cards Section -->
    <section class="action-cards-section section">
        <div class="container">
            <div class="text-center mb-6">
                <h2>Choose Your Path</h2>
                <p class="text-muted">Start gaming or start learning - or do both!</p>
            </div>
            
            <div class="action-cards-grid">
                <!-- Game Card -->
                <div class="action-card game-card card card--hover card--glow">
                    <div class="action-card-header">
                        <div class="action-icon">⚡</div>
                        <h3>Play Neon Drop</h3>
                        <p class="action-subtitle">Skill-based gaming with real rewards</p>
                    </div>
                    <div class="action-card-content">
                        <p>Experience competitive gaming with actual USDC prizes. Our flagship game combines 
                        addictive gameplay with blockchain technology, offering daily tournaments and instant payouts.</p>
                        <div class="action-features">
                            <span>🏆 Daily USDC Prizes</span>
                            <span>⚡ First Game Free</span>
                            <span>💎 90% to Winners</span>
                            <span>🔗 Smart Contract Payouts</span>
                        </div>
                    </div>
                    <div class="action-card-footer">
                        <button onclick="handlePlayNowClick('neondrop')" class="btn btn-primary btn-lg">Start Playing</button>
                    </div>
                </div>
                
                <!-- Academy Card -->
                <div class="action-card academy-card card card--hover card--neon">
                    <div class="action-card-header">
                        <div class="action-icon">📚</div>
                        <h3>Blockchain Academy</h3>
                        <p class="action-subtitle">Comprehensive Web3 education</p>
                    </div>
                    <div class="action-card-content">
                        <p>Master blockchain technology through our structured curriculum. From Bitcoin basics to 
                        advanced DeFi protocols, learn everything you need to succeed in the Web3 ecosystem.</p>
                        <div class="action-features">
                            <span>🎓 Structured Curriculum</span>
                            <span>💡 Interactive Lessons</span>
                            <span>🏆 Achievement System</span>
                            <span>👥 Community Learning</span>
                        </div>
                    </div>
                    <div class="action-card-footer">
                        <a href="/academy/" class="btn btn-outline btn-lg">Start Learning</a>
                    </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/tournaments.html">Tournaments</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>
                            <li><a href="/pages/tournaments.html">Tournaments</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>

    <!-- Instant Play Architecture Integration -->
    <script type="module">
        // Removed automatic import to prevent unwanted auto-redirection
        // import { BlockZoneLab } from './main-instant.js';
        
        // Initialize instant play platform
        let blockZonePlatform;
        let gameStartInProgress = false;
        
        // Defensive play button handler
        window.handlePlayNowClick = function(gameType = 'neondrop') {
            console.log('🎮 Play button clicked:', gameType);
            
            // 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
        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');
                    sessionStorage.setItem('instant_play_game', gameType);
                    
                    // Redirect to dedicated game page
                    window.location.href = '/games/neondrop/';
                    return;
                }
                
                // Prevent multiple simultaneous starts for other games
                if (gameStartInProgress) {
                    console.log('🚫 Game start already in progress');
                    return;
                }
                
                gameStartInProgress = true;
                
                try {
                    if (!blockZonePlatform) {
                        console.log('🚀 Initializing instant play platform...');
                        blockZonePlatform = new BlockZoneLab();
                        await blockZonePlatform.init();
                    }
                    
                    console.log(`🎮 Starting ${gameType} with instant play...`);
                    const success = await blockZonePlatform.startGame(gameType);
                    
                    if (!success) {
                        console.log('❌ Game start failed or was blocked');
                    }
                    
                } catch (error) {
                    console.error('❌ Instant play failed:', error);
                    alert('Game failed to start. Please refresh and try again.');
                } finally {
                    gameStartInProgress = false;
                }
            },
            
            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');
    </script>

    <!-- Consolidated Component Initialization -->
    <script type="module">
        // Single initialization point for all components
        import { PaywallManager } from './shared/components/PaywallManager.js';
        import { LeaderboardDisplay } from './shared/components/LeaderboardDisplay.js';
        
        // Initialize components only once
        if (!window.paywallManager) {
            window.paywallManager = new PaywallManager();
            console.log('✅ PaywallManager initialized');
        }
        
        if (!window.leaderboardDisplay) {
            window.leaderboardDisplay = new LeaderboardDisplay();
            console.log('✅ LeaderboardDisplay initialized');
        }
        
        // Global functions
        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>
    
    <!-- Main Entry Point -->
    <script type="module" src="./shared/wrapper/GameRouter.js"></script>
</body>
</html> 