<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bitcoin Arcade Zone - Play Games, Earn Bitcoin</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="Bitcoin Arcade Zone - Arcade games with real Bitcoin prizes. Play skill-based games, compete in tournaments, earn BTC on Bitcoin L2. FREE first game daily!">
    <meta name="keywords" content="bitcoin gaming, arcade games, bitcoin prizes, crypto gaming, skill-based games, neon drop, bitcoin tournaments">
    
    <!-- Professional Design System CSS -->
    <link rel="stylesheet" href="assets/css/design-system.css">
    
    <!-- Shared Navbar CSS -->
    <link rel="stylesheet" href="shared/css/navbar.css">
    
    <!-- Shared Hero CSS -->
    <link rel="stylesheet" href="shared/css/hero.css">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#F7931A">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    
    <!-- Google Fonts - Rounded font for letters -->
    <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=Nunito:wght@900&display=swap" rel="stylesheet">
    
    <style>
        /* CRITICAL RENDERING PATH - Bitcoin Arcade Zone Theme */
        :root {
            --primary: #F7931A; /* Bitcoin Orange */
            --bg-primary: #0a0a0a;
            --bg-secondary: #0a0a0a;
            --text-primary: #ffffff;
            --text-secondary: #cccccc;
            
            /* Bitcoin Arcade Color Palette */
            --bitcoin-orange: #F7931A;
            --bitcoin-gold: #FFD700;
            --neon-cyan: #00d4ff;
            --neon-green: #00ff00;
            --neon-red: #ff6b6b;
            --arcade-purple: #8B5CF6;
            --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;
            
            /* Card System */
            --card-min-width: 280px;
            --card-max-width: 320px;
            --card-min-height: 400px;
            --card-max-height: 450px;
            --card-aspect-ratio: 2/3;
        }
        
        /* HERO/LAYOUT STYLES NOW IN shared/css/hero.css */
        
        /* PAGE-SPECIFIC: Card variants */
        .hero-card.card-play { border-color: var(--bitcoin-orange); }
        .hero-card.card-play h3 { color: var(--bitcoin-orange); }
        .hero-card.card-play:hover { box-shadow: 0 12px 40px rgba(247, 147, 26, 0.3); }
        
        .hero-card.card-learn { border-color: var(--neon-cyan); }
        .hero-card.card-learn h3 { color: var(--neon-cyan); }
        .hero-card.card-learn:hover { box-shadow: 0 12px 40px rgba(0, 212, 255, 0.3); }
        .hero-card.card-learn .card-btn { background: var(--neon-cyan); }
        .hero-card.card-learn .card-btn:hover { box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4); }
        
        .feature-card.card-bitcoin { border-color: var(--bitcoin-orange); }
        .feature-card.card-bitcoin h3 { color: var(--bitcoin-orange); }
        .feature-card.card-bitcoin:hover { box-shadow: 0 8px 32px rgba(247, 147, 26, 0.2); }
        
        /* Mini logo overrides */
        .mini-logo-letter.bitcoin,
        .mini-logo-letter.arcade,
        .mini-logo-letter.zone {
            background: var(--bitcoin-orange);
            border: 1px solid #FFD700;
            font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
        }
        
        .mini-logo-letter.bitcoin-symbol {
            background: var(--bitcoin-orange);
            border: 1px solid #FFD700;
            font-family: 'Arial Black', 'Helvetica', sans-serif;
        }
    </style>
</head>

<body class="landing-page">
    <!-- Navigation injected by shared/components/Navbar.js -->
    <script type="module" src="/shared/components/Navbar.js"></script>

    <!-- Hero Section - Bitcoin Arcade Zone -->
    <section class="hero-section" id="heroSection">
        <div class="hero-content">
            <!-- BITCOIN ARCADE ZONE Logo - All Orange -->
            <div class="hero-brand">
                <div class="hero-brand-word">
                    <span class="letter-bitcoin-symbol">₿</span>
                    <span class="letter-orange">I</span>
                    <span class="letter-orange">T</span>
                    <span class="letter-orange">C</span>
                    <span class="letter-orange">O</span>
                    <span class="letter-orange">I</span>
                    <span class="letter-orange">N</span>
                </div>
                <div class="hero-brand-word">
                    <span class="letter-orange">A</span>
                    <span class="letter-orange">R</span>
                    <span class="letter-orange">C</span>
                    <span class="letter-orange">A</span>
                    <span class="letter-orange">D</span>
                    <span class="letter-orange">E</span>
                </div>
                <div class="hero-brand-word">
                    <span class="letter-orange">Z</span>
                    <span class="letter-orange">O</span>
                    <span class="letter-orange">N</span>
                    <span class="letter-orange">E</span>
                </div>
            </div>
            <div class="hero-tagline">PLAY GAMES • EARN BITCOIN</div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="main-content">
        <div class="container">
            <!-- TWO HERO CARDS - Main paths -->
            <section class="hero-cards">
                <a href="/games/" class="hero-card card-play">
                    <div class="card-icon">🕹️</div>
                    <h3>Play Now</h3>
                    <p>Jump into arcade games and compete for Bitcoin prizes. No wallet needed to start!</p>
                    <ul class="card-features">
                        <li>₿ Win real Bitcoin</li>
                        <li>🎮 Free first game daily</li>
                        <li>🏆 Daily tournaments</li>
                        <li>⚡ Instant payouts</li>
                    </ul>
                </a>
                <a href="/academy/" class="hero-card card-learn">
                    <div class="card-icon">📚</div>
                    <h3>Learn Bitcoin</h3>
                    <p>Free lessons from basics to building apps. Earn while you learn!</p>
                    <ul class="card-features">
                        <li>✓ Beginner friendly</li>
                        <li>✓ Interactive lessons</li>
                        <li>✓ Earn rewards</li>
                        <li>✓ Get certified</li>
                    </ul>
                </a>
            </section>

            <!-- INFO BAR -->
            <div class="info-bar">
                <span>₿ <strong>$0.75/game</strong> or <strong>$3.00 day pass</strong> • Unlimited FREE practice • Prizes paid in Bitcoin</span>
            </div>

            <!-- FEATURE CARDS - Smaller, more of them -->
            <section class="feature-cards">
                <a href="/pages/whitepaper.html" class="feature-card card-bitcoin">
                    <div class="card-icon">₿</div>
                    <h3>Bitcoin L2</h3>
                    <p>Built on Citrea - fast, cheap, Bitcoin-secured transactions.</p>
                </a>
                <a href="/games/neondrop/" class="feature-card">
                    <div class="card-icon">🎮</div>
                    <h3>NeonDrop</h3>
                    <p>Our flagship puzzle game. Stack blocks, clear lines, win BTC.</p>
                </a>
                <a href="/games/" class="feature-card">
                    <div class="card-icon">🏆</div>
                    <h3>Tournaments</h3>
                    <p>Daily competitions. Top 10% split 90% of the prize pool.</p>
                </a>
                <a href="/pages/profile.html" class="feature-card">
                    <div class="card-icon">🏆</div>
                    <h3>Prizes</h3>
                    <p>Top players split 90% of daily fees. Claim real Bitcoin prizes.</p>
                </a>
                <a href="https://t.me/blockzonelab" target="_blank" class="feature-card">
                    <div class="card-icon">💬</div>
                    <h3>Community</h3>
                    <p>Join our Telegram. Share strategies, find opponents.</p>
                </a>
            </section>
        </div>
    </main>

    <!-- Mini Logo at Bottom -->
    <div class="mini-logo-container">
        <div class="mini-logo">
            <span class="mini-logo-letter bitcoin-symbol">₿</span>
            <span class="mini-logo-letter bitcoin">I</span>
            <span class="mini-logo-letter bitcoin">T</span>
            <span class="mini-logo-letter bitcoin">C</span>
            <span class="mini-logo-letter bitcoin">O</span>
            <span class="mini-logo-letter bitcoin">I</span>
            <span class="mini-logo-letter bitcoin">N</span>
            <span class="mini-logo-letter space"></span>
            <span class="mini-logo-letter arcade">A</span>
            <span class="mini-logo-letter arcade">R</span>
            <span class="mini-logo-letter arcade">C</span>
            <span class="mini-logo-letter arcade">A</span>
            <span class="mini-logo-letter arcade">D</span>
            <span class="mini-logo-letter arcade">E</span>
            <span class="mini-logo-letter space"></span>
            <span class="mini-logo-letter zone">Z</span>
            <span class="mini-logo-letter zone">O</span>
            <span class="mini-logo-letter zone">N</span>
            <span class="mini-logo-letter zone">E</span>
        </div>
    </div>

    <!-- Scripts -->
    <script>
        // Hero section animation (navbar handled by shared/components/Navbar.js)
        const heroSection = document.getElementById('heroSection');
        setTimeout(() => heroSection.classList.add('loaded'), 300);
    </script>
</body>
</html>
