<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FireEarn — Complete Ads Earning Platform</title>
    <!-- Firebase SDKs -->
    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-functions-compat.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Base Styles */
        :root {
            --primary: #0066ff;
            --primary-dark: #0052d4;
            --secondary: #00d4aa;
            --dark: #1a1a2e;
            --light: #f8f9fa;
            --success: #28a745;
            --warning: #ffc107;
            --danger: #dc3545;
            --gray: #6c757d;
            --light-gray: #e9ecef;
            --transition: all 0.3s ease;
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            --border-radius: 10px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            line-height: 1.6;
            color: #333;
            background-color: #fff;
            overflow-x: hidden;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .btn {
            display: inline-block;
            padding: 14px 32px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            text-align: center;
        }

        .btn:hover {
            background: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }

        .btn-secondary {
            background: var(--secondary);
        }

        .btn-secondary:hover {
            background: #00b894;
        }

        .btn-success {
            background: var(--success);
        }

        .btn-warning {
            background: var(--warning);
            color: #212529;
        }

        .btn-danger {
            background: var(--danger);
        }

        .btn-small {
            padding: 8px 16px;
            font-size: 0.9rem;
        }

        section {
            padding: 80px 0;
        }

        h1, h2, h3, h4 {
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 1rem;
        }

        h1 {
            font-size: 3.5rem;
        }

        h2 {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 3rem;
        }

        h3 {
            font-size: 1.8rem;
        }

        p {
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
            color: var(--gray);
        }

        .hidden {
            display: none !important;
        }

        /* Auth Modal */
        .auth-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }

        .auth-box {
            background: white;
            padding: 40px;
            border-radius: var(--border-radius);
            width: 100%;
            max-width: 400px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .auth-tabs {
            display: flex;
            margin-bottom: 30px;
            border-bottom: 2px solid var(--light-gray);
        }

        .auth-tab {
            padding: 10px 20px;
            cursor: pointer;
            font-weight: 600;
            color: var(--gray);
            transition: var(--transition);
        }

        .auth-tab.active {
            color: var(--primary);
            border-bottom: 3px solid var(--primary);
            margin-bottom: -2px;
        }

        .auth-form input {
            width: 100%;
            padding: 12px 15px;
            margin-bottom: 15px;
            border: 1px solid var(--light-gray);
            border-radius: var(--border-radius);
            font-size: 1rem;
        }

        .auth-form input:focus {
            outline: none;
            border-color: var(--primary);
        }

        .close-auth {
            float: right;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--gray);
        }

        /* Header & Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px 0;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary);
            text-decoration: none;
        }

        .logo span {
            color: var(--secondary);
        }

        .user-menu {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .user-balance {
            background: var(--light-gray);
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: 600;
            color: var(--primary);
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            cursor: pointer;
        }

        nav ul {
            display: flex;
            list-style: none;
        }

        nav ul li {
            margin-left: 30px;
        }

        nav ul li a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 600;
            transition: var(--transition);
        }

        nav ul li a:hover {
            color: var(--primary);
        }

        /* Hero Section */
        .hero {
            padding-top: 160px;
            padding-bottom: 100px;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            text-align: center;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            color: var(--dark);
        }

        .hero p {
            font-size: 1.3rem;
            max-width: 700px;
            margin: 0 auto 2.5rem;
            color: var(--gray);
        }

        .hero-btns {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 60px;
        }

        .trust-logos {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 40px;
            margin-top: 40px;
        }

        /* Stats Section */
        .stats {
            background-color: var(--dark);
            color: white;
            padding: 60px 0;
        }

        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
        }

        .stat-box {
            text-align: center;
            padding: 20px;
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 800;
            color: var(--secondary);
            margin-bottom: 10px;
        }

        .stat-text {
            font-size: 1.1rem;
            color: #ccc;
        }

        /* Dashboard */
        .dashboard {
            padding: 120px 0 60px;
        }

        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .dashboard-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .earnings-display {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--primary);
        }

        .ad-container {
            background: var(--light-gray);
            padding: 30px;
            border-radius: var(--border-radius);
            text-align: center;
            margin: 20px 0;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .ad-placeholder {
            font-size: 5rem;
            color: var(--gray);
            opacity: 0.3;
            margin-bottom: 20px;
        }

        .countdown {
            font-size: 1.5rem;
            color: var(--primary);
            font-weight: 600;
            margin: 20px 0;
        }

        /* Referral Section */
        .referral-box {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 30px;
            border-radius: var(--border-radius);
            margin-top: 20px;
        }

        .referral-input {
            display: flex;
            gap: 10px;
            margin: 20px 0;
        }

        .referral-input input {
            flex: 1;
            padding: 12px 15px;
            border: none;
            border-radius: var(--border-radius);
            font-size: 1rem;
        }

        .referral-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        /* Features Section */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }

        .feature-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 40px 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            text-align: center;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .feature-icon {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 20px;
        }

        /* Testimonials */
        .testimonials {
            background-color: var(--light-gray);
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .testimonial-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow);
        }

        .testimonial-text {
            font-style: italic;
            margin-bottom: 25px;
            position: relative;
            padding-left: 20px;
        }

        .testimonial-text:before {
            content: '"';
            font-size: 4rem;
            color: var(--primary);
            opacity: 0.2;
            position: absolute;
            left: -10px;
            top: -20px;
        }

        /* CTA Section */
        .cta {
            text-align: center;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
        }

        .cta h2 {
            color: white;
            margin-bottom: 1.5rem;
        }

        /* Footer */
        footer {
            background-color: var(--dark);
            color: #ccc;
            padding: 60px 0 30px;
        }

        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid #333;
            color: #888;
            font-size: 0.9rem;
        }

        /* Responsive */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.5rem;
            }
            
            h2 {
                font-size: 2rem;
            }
            
            .hero {
                padding-top: 140px;
            }
            
            .hero-btns {
                flex-direction: column;
            }
            
            .dashboard {
                padding-top: 100px;
            }
        }
    </style>
</head>
<body>
    <!-- Auth Modal -->
    <div id="authModal" class="auth-modal hidden">
        <div class="auth-box">
            <button class="close-auth" id="closeAuth">&times;</button>
            <div class="auth-tabs">
                <div class="auth-tab active" id="loginTab">Login</div>
                <div class="auth-tab" id="registerTab">Register</div>
            </div>
            
            <div class="auth-form">
                <div id="loginForm">
                    <input type="email" id="loginEmail" placeholder="Email" required>
                    <input type="password" id="loginPassword" placeholder="Password" required>
                    <button class="btn" id="loginBtn">Login</button>
                    <p id="loginError" style="color: var(--danger); margin-top: 10px;"></p>
                </div>
                
                <div id="registerForm" class="hidden">
                    <input type="text" id="registerUsername" placeholder="Username" required>
                    <input type="email" id="registerEmail" placeholder="Email" required>
                    <input type="password" id="registerPassword" placeholder="Password (min. 6 chars)" required>
                    <input type="text" id="referralCode" placeholder="Referral Code (optional)">
                    <button class="btn btn-secondary" id="registerBtn">Create Account</button>
                    <p id="registerError" style="color: var(--danger); margin-top: 10px;"></p>
                </div>
            </div>
        </div>
    </div>

    <!-- Header -->
    <header>
        <div class="container header-container">
            <a href="#" class="logo">Fire<span>Earn</span></a>
            
            <div class="user-menu" id="userMenu">
                <div id="authButtons">
                    <button class="btn btn-small" id="showAuth">Login</button>
                    <button class="btn btn-small btn-secondary" id="showRegister">Register</button>
                </div>
                
                <div id="loggedInUser" class="hidden">
                    <span class="user-balance">$<span id="userBalance">0.00</span></span>
                    <div class="user-avatar" id="userAvatar">U</div>
                </div>
            </div>
        </div>
    </header>

    <!-- Public Homepage (shown when not logged in) -->
    <div id="publicHome">
        <!-- Hero Section -->
        <section class="hero">
            <div class="container">
                <h1>Your Time is Digital Currency.</h1>
                <p>Transform your daily browsing into a sustainable income stream. View premium ads, build your network, and access instant payouts with our Firebase-powered platform.</p>
                
                <div class="hero-btns">
                    <button class="btn" id="startEarningBtn">Start Earning Now</button>
                    <button class="btn btn-secondary" id="seeDemoBtn">View Live Demo</button>
                </div>
                
                <div class="trust-logos">
                    <span>Powered by</span>
                    <i class="fab fa-google" style="font-size: 2.5rem; color: #4285F4;"></i>
                    <i class="fab fa-firefox" style="font-size: 2.5rem; color: #FF7139;"></i>
                    <span>Firebase</span>
                </div>
            </div>
        </section>

        <!-- Stats -->
        <section class="stats">
            <div class="container stats-container">
                <div class="stat-box">
                    <div class="stat-number" id="totalUsers">15k+</div>
                    <div class="stat-text">Active Members</div>
                </div>
                <div class="stat-box">
                    <div class="stat-number" id="totalPayouts">$500k+</div>
                    <div class="stat-text">Paid Out</div>
                </div>
                <div class="stat-box">
                    <div class="stat-number" id="platformUptime">99.9%</div>
                    <div class="stat-text">Uptime</div>
                </div>
                <div class="stat-box">
                    <div class="stat-number">24/7</div>
                    <div class="stat-text">Live Support</div>
                </div>
            </div>
        </section>

        <!-- Features -->
        <section class="features">
            <div class="container">
                <h2>Designed for Maximum Yield</h2>
                <p style="text-align: center; max-width: 800px; margin: 0 auto 40px;">Discover a suite of tools engineered to optimize your earning potential with minimal effort.</p>
                
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon"><i class="fas fa-ad"></i></div>
                        <h3>Premium Ad Network</h3>
                        <p>Access high-CPM advertising campaigns. Simple viewing tasks that pay real currency, updated daily.</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon"><i class="fas fa-users"></i></div>
                        <h3>Affiliate Ecosystem</h3>
                        <p>Leverage your network. Earn recurring commissions from every active user you invite.</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon"><i class="fas fa-bolt"></i></div>
                        <h3>Instant Payouts</h3>
                        <p>Enjoy processed withdrawals with low minimum thresholds and zero hidden fees.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Testimonials -->
        <section class="testimonials">
            <div class="container">
                <h2>Success Stories</h2>
                <div class="testimonials-grid">
                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            FireEarn is revolutionary. The Firebase backend makes everything instant. I earned $50 in my first week!
                        </div>
                        <div class="author-info">
                            <h4>Alex Johnson</h4>
                            <p>Chicago, IL</p>
                        </div>
                    </div>
                    
                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            Finally, a platform that just works. No servers to manage, everything updates in real-time.
                        </div>
                        <div class="author-info">
                            <h4>Maria Garcia</h4>
                            <p>Miami, FL</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- CTA -->
        <section class="cta">
            <div class="container">
                <h2>Your Financial Future Starts Here.</h2>
                <p>Join today and turn your screen time into a revenue stream. No credit card required.</p>
                <button class="btn" id="ctaRegisterBtn">Join Now For Free</button>
            </div>
        </section>
    </div>

    <!-- User Dashboard (shown when logged in) -->
    <div id="userDashboard" class="hidden">
        <section class="dashboard">
            <div class="container">
                <h2>Your Earnings Dashboard</h2>
                <p>Welcome back, <span id="dashboardUsername">User</span>! Ready to earn today?</p>
                
                <div class="dashboard-grid">
                    <!-- Earnings Card -->
                    <div class="dashboard-card">
                        <div class="card-header">
                            <h3>Your Balance</h3>
                            <button class="btn btn-small btn-success" id="withdrawBtn">Withdraw</button>
                        </div>
                        <div class="earnings-display">$<span id="currentBalance">0.00</span></div>
                        <p>Total earned: $<span id="totalEarned">0.00</span></p>
                        
                        <div class="ad-container">
                            <div class="ad-placeholder"><i class="fas fa-ad"></i></div>
                            <h4>Premium Ad Available</h4>
                            <p>Watch this ad to earn money</p>
                            <div class="countdown" id="adCountdown">Ready</div>
                            <button class="btn btn-warning" id="watchAdBtn">Watch Ad & Earn $0.25</button>
                        </div>
                    </div>
                    
                    <!-- Stats Card -->
                    <div class="dashboard-card">
                        <h3>Today's Stats</h3>
                        <div style="margin: 20px 0;">
                            <p>Today's Earnings: <strong>$<span id="todayEarnings">0.00</span></strong></p>
                            <p>Ads Watched Today: <strong><span id="adsWatched">0</span></strong></p>
                            <p>Active Days: <strong><span id="activeDays">1</span></strong></p>
                        </div>
                        
                        <h3>Quick Actions</h3>
                        <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;">
                            <button class="btn btn-small" id="inviteFriendsBtn">Invite Friends</button>
                            <button class="btn btn-small btn-secondary" id="viewMoreAdsBtn">View More Ads</button>
                            <button class="btn btn-small" id="transactionHistoryBtn">Transaction History</button>
                        </div>
                    </div>
                </div>
                
                <!-- Referral Section -->
                <div class="dashboard-card">
                    <h3>Your Referral Network</h3>
                    <p>Earn 20% of your referrals' earnings forever!</p>
                    
                    <div class="referral-box">
                        <h4>Your Unique Referral Link</h4>
                        <div class="referral-input">
                            <input type="text" id="referralLink" readonly value="Sign in to get your link">
                            <button class="btn btn-small" id="copyReferralBtn">Copy</button>
                        </div>
                        
                        <div class="referral-stats">
                            <div>
                                <div class="stat-number" id="referralCount">0</div>
                                <div class="stat-text">People Joined</div>
                            </div>
                            <div>
                                <div class="stat-number">$<span id="referralEarnings">0.00</span></div>
                                <div class="stat-text">From Referrals</div>
                            </div>
                            <div>
                                <div class="stat-number" id="referralTier">1</div>
                                <div class="stat-text">Tier Level</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-container">
                <div>
                    <a href="#" class="logo" style="color: white; font-size: 1.5rem;">Fire<span style="color: var(--secondary);">Earn</span></a>
                    <p>Firebase-powered earnings platform. No servers needed.</p>
                </div>
                <div>
                    <h4 style="color: white;">Platform Status</h4>
                    <p id="firebaseStatus">Firebase: Connecting...</p>
                    <p id="userCount">Users: Loading...</p>
                </div>
            </div>
            <div class="copyright">
                &copy; 2023 FireEarn. Built with Firebase. This is a live demo.
            </div>
        </div>
    </footer>

    <!-- Firebase & App JavaScript -->
    <script>
        // 🔥 Firebase Configuration
        // ⚠️ REPLACE WITH YOUR ACTUAL FIREBASE CONFIG ⚠️
  const firebaseConfig = {
  apiKey: "AIzaSyBpyeet5ZL9u4cAHqsV2LI4AorEEbAn6Y0",
  authDomain: "fireearn-platform.firebaseapp.com",
  projectId: "fireearn-platform",
  storageBucket: "fireearn-platform.firebasestorage.app",
  messagingSenderId: "417856320555",
  appId: "1:417856320555:web:afbdebc55d9a1a16aaa66e"
};

        // Initialize Firebase
        let db, auth;
        try {
            firebase.initializeApp(firebaseConfig);
            db = firebase.firestore();
            auth = firebase.auth();
            console.log("Firebase initialized successfully");
            document.getElementById('firebaseStatus').textContent = "Firebase: Connected ✓";
        } catch (error) {
            console.error("Firebase initialization error:", error);
            document.getElementById('firebaseStatus').textContent = "Firebase: Not connected";
        }

        // 📊 Global Variables
        let currentUser = null;
        let userData = null;
        let adCooldown = false;

        // 🎯 DOM Elements
        const authModal = document.getElementById('authModal');
        const publicHome = document.getElementById('publicHome');
        const userDashboard = document.getElementById('userDashboard');
        const loginForm = document.getElementById('loginForm');
        const registerForm = document.getElementById('registerForm');
        const loginTab = document.getElementById('loginTab');
        const registerTab = document.getElementById('registerTab');

        // 👤 Authentication Functions
        function showAuthModal(tab = 'login') {
            authModal.classList.remove('hidden');
            if (tab === 'login') {
                loginTab.classList.add('active');
                registerTab.classList.remove('active');
                loginForm.classList.remove('hidden');
                registerForm.classList.add('hidden');
            } else {
                registerTab.classList.add('active');
                loginTab.classList.remove('active');
                registerForm.classList.remove('hidden');
                loginForm.classList.add('hidden');
            }
        }

        function hideAuthModal() {
            authModal.classList.add('hidden');
        }

        // 📝 User Registration
        document.getElementById('registerBtn').addEventListener('click', async () => {
            const email = document.getElementById('registerEmail').value;
            const password = document.getElementById('registerPassword').value;
            const username = document.getElementById('registerUsername').value;
            const referralCode = document.getElementById('referralCode').value;

            if (!email || !password || !username) {
                document.getElementById('registerError').textContent = "Please fill all required fields";
                return;
            }

            if (password.length < 6) {
                document.getElementById('registerError').textContent = "Password must be at least 6 characters";
                return;
            }

            try {
                // Create Firebase auth user
                const userCredential = await auth.createUserWithEmailAndPassword(email, password);
                const user = userCredential.user;

                // Generate referral code
                const userReferralCode = Math.random().toString(36).substring(2, 8).toUpperCase();

                // Create user document in Firestore
                await db.collection('users').doc(user.uid).set({
                    uid: user.uid,
                    email: email,
                    username: username,
                    referralCode: userReferralCode,
                    referredBy: referralCode || null,
                    balance: 0.0,
                    totalEarned: 0.0,
                    adsWatched: 0,
                    referrals: [],
                    referralEarnings: 0.0,
                    memberSince: firebase.firestore.FieldValue.serverTimestamp(),
                    lastLogin: firebase.firestore.FieldValue.serverTimestamp()
                });

                // Update global stats
                await updateGlobalStats('register');

                alert(`Account created! Your referral code: ${userReferralCode}`);
                hideAuthModal();
                
                // Clear form
                document.getElementById('registerEmail').value = '';
                document.getElementById('registerPassword').value = '';
                document.getElementById('registerUsername').value = '';
                document.getElementById('referralCode').value = '';

            } catch (error) {
                console.error("Registration error:", error);
                document.getElementById('registerError').textContent = error.message;
            }
        });

        // 🔐 User Login
        document.getElementById('loginBtn').addEventListener('click', async () => {
            const email = document.getElementById('loginEmail').value;
            const password = document.getElementById('loginPassword').value;

            try {
                await auth.signInWithEmailAndPassword(email, password);
                hideAuthModal();
                
                // Clear form
                document.getElementById('loginEmail').value = '';
                document.getElementById('loginPassword').value = '';
                document.getElementById('loginError').textContent = '';
                
            } catch (error) {
                console.error("Login error:", error);
                document.getElementById('loginError').textContent = error.message;
            }
        });

        // 👁️ Auth State Listener
        auth.onAuthStateChanged(async (user) => {
            if (user) {
                // User is signed in
                currentUser = user;
                
                // Get user data from Firestore
                const userDoc = await db.collection('users').doc(user.uid).get();
                if (userDoc.exists) {
                    userData = userDoc.data();
                    
                    // Update UI for logged in user
                    publicHome.classList.add('hidden');
                    userDashboard.classList.remove('hidden');
                    
                    document.getElementById('dashboardUsername').textContent = userData.username;
                    document.getElementById('userBalance').textContent = userData.balance.toFixed(2);
                    document.getElementById('currentBalance').textContent = userData.balance.toFixed(2);
                    document.getElementById('totalEarned').textContent = userData.totalEarned.toFixed(2);
                    
                    // Update referral link
                    const refLink = `${window.location.origin}/?ref=${userData.referralCode}`;
                    document.getElementById('referralLink').value = refLink;
                    
                    // Update user avatar
                    document.getElementById('userAvatar').textContent = userData.username.charAt(0).toUpperCase();
                    
                    // Show logged in UI
                    document.getElementById('authButtons').classList.add('hidden');
                    document.getElementById('loggedInUser').classList.remove('hidden');
                    
                    // Update last login
                    await db.collection('users').doc(user.uid).update({
                        lastLogin: firebase.firestore.FieldValue.serverTimestamp()
                    });
                    
                    // Load user stats
                    loadUserStats();
                }
            } else {
                // User is signed out
                currentUser = null;
                userData = null;
                
                // Show public homepage
                publicHome.classList.remove('hidden');
                userDashboard.classList.add('hidden');
                
                // Show auth buttons
                document.getElementById('authButtons').classList.remove('hidden');
                document.getElementById('loggedInUser').classList.add('hidden');
                
                // Load global stats
                loadGlobalStats();
            }
        });

        // 💰 Watch Ad Functionality
        document.getElementById('watchAdBtn').addEventListener('click', async () => {
            if (!currentUser || adCooldown) return;
            
            // Set cooldown
            adCooldown = true;
            document.getElementById('watchAdBtn').disabled = true;
            document.getElementById('adCountdown').textContent = "Processing...";
            
            // Simulate ad watching delay
            setTimeout(async () => {
                try {
                    const earnings = 0.25; // Fixed amount per ad
                    
                    // Update user balance
                    const newBalance = userData.balance + earnings;
                    const newTotal = userData.totalEarned + earnings;
                    const newAdsWatched = userData.adsWatched + 1;
                    
                    await db.collection('users').doc(currentUser.uid).update({
                        balance: newBalance,
                        totalEarned: newTotal,
                        adsWatched: newAdsWatched
                    });
                    
                    // Record transaction
                    await db.collection('transactions').add({
                        userId: currentUser.uid,
                        type: 'ad_view',
                        amount: earnings,
                        description: 'Premium ad viewing',
                        timestamp: firebase.firestore.FieldValue.serverTimestamp()
                    });
                    
                    // Update UI
                    document.getElementById('userBalance').textContent = newBalance.toFixed(2);
                    document.getElementById('currentBalance').textContent = newBalance.toFixed(2);
                    document.getElementById('totalEarned').textContent = newTotal.toFixed(2);
                    document.getElementById('adsWatched').textContent = newAdsWatched;
                    
                    // Update today's earnings
                    const todayEarnings = parseFloat(document.getElementById('todayEarnings').textContent) || 0;
                    document.getElementById('todayEarnings').textContent = (todayEarnings + earnings).toFixed(2);
                    
                    // Show success message
                    alert(`+$${earnings.toFixed(2)} earned! Ad viewed successfully.`);
                    
                    // Start countdown for next ad
                    let countdown = 30;
                    document.getElementById('adCountdown').textContent = `${countdown}s`;
                    
                    const countdownInterval = setInterval(() => {
                        countdown--;
                        document.getElementById('adCountdown').textContent = `${countdown}s`;
                        
                        if (countdown <= 0) {
                            clearInterval(countdownInterval);
                            document.getElementById('adCountdown').textContent = "Ready";
                            document.getElementById('watchAdBtn').disabled = false;
                            adCooldown = false;
                        }
                    }, 1000);
                    
                    // Update global stats
                    await updateGlobalStats('ad_view');
                    
                } catch (error) {
                    console.error("Ad viewing error:", error);
                    alert("Error processing ad view. Please try again.");
                    document.getElementById('watchAdBtn').disabled = false;
                    adCooldown = false;
                    document.getElementById('adCountdown').textContent = "Ready";
                }
            }, 2000); // 2 second simulation
        });

        // 📊 Stats Functions
        async function loadGlobalStats() {
            try {
                // Get total users
                const usersSnapshot = await db.collection('users').get();
                document.getElementById('totalUsers').textContent = `${usersSnapshot.size}+`;
                document.getElementById('userCount').textContent = `Users: ${usersSnapshot.size}`;
                
                // Get total payouts (simulated)
                const transactionsSnapshot = await db.collection('transactions').get();
                let totalPayouts = 0;
                transactionsSnapshot.forEach(doc => {
                    if (doc.data().type === 'ad_view') {
                        totalPayouts += doc.data().amount;
                    }
                });
                document.getElementById('totalPayouts').textContent = `$${Math.round(totalPayouts)}+`;
                
            } catch (error) {
                console.error("Error loading stats:", error);
            }
        }

        async function updateGlobalStats(action) {
            // In a real app, you'd update global stats here
            console.log(`Global stat update: ${action}`);
        }

        async function loadUserStats() {
            if (!currentUser) return;
            
            try {
                // Get referral count
                const referralsSnapshot = await db.collection('users')
                    .where('referredBy', '==', currentUser.uid)
                    .get();
                
                document.getElementById('referralCount').textContent = referralsSnapshot.size;
                
                // Get today's date for filtering
                const today = new Date();
                today.setHours(0, 0, 0, 0);
                
                // Get today's transactions
                const transactionsSnapshot = await db.collection('transactions')
                    .where('userId', '==', currentUser.uid)
                    .where('timestamp', '>=', today)
                    .get();
                
                let todayEarnings = 0;
                transactionsSnapshot.forEach(doc => {
                    todayEarnings += doc.data().amount;
                });
                
                document.getElementById('todayEarnings').textContent = todayEarnings.toFixed(2);
                
            } catch (error) {
                console.error("Error loading user stats:", error);
            }
        }

        // 📋 Event Listeners
        document.getElementById('showAuth').addEventListener('click', () => showAuthModal('login'));
        document.getElementById('showRegister').addEventListener('click', () => showAuthModal('register'));
        document.getElementById('ctaRegisterBtn').addEventListener('click', () => showAuthModal('register'));
        document.getElementById('startEarningBtn').addEventListener('click', () => showAuthModal('register'));
        document.getElementById('seeDemoBtn').addEventListener('click', () => {
            // Demo login with test account
            document.getElementById('loginEmail').value = 'demo@fireearn.com';
            document.getElementById('loginPassword').value = 'demo123';
            showAuthModal('login');
        });

        document.getElementById('closeAuth').addEventListener('click', hideAuthModal);
        document.getElementById('loginTab').addEventListener('click', () => showAuthModal('login'));
        document.getElementById('registerTab').addEventListener('click', () => showAuthModal('register'));

        document.getElementById('copyReferralBtn').addEventListener('click', () => {
            const refLink = document.getElementById('referralLink');
            refLink.select();
            document.execCommand('copy');
            alert('Referral link copied to clipboard!');
        });

        document.getElementById('withdrawBtn').addEventListener('click', () => {
            if (!currentUser) return;
            
            const balance = parseFloat(document.getElementById('userBalance').textContent);
            if (balance < 5) {
                alert(`Minimum withdrawal is $5. You have $${balance.toFixed(2)}. Keep earning!`);
                return;
            }
            
            alert(`Withdrawal request for $${balance.toFixed(2)} submitted! In a real app, this would connect to PayPal/Stripe.`);
        });

        document.getElementById('inviteFriendsBtn').addEventListener('click', () => {
            const refLink = document.getElementById('referralLink');
            refLink.select();
            document.execCommand('copy');
            alert('Referral link copied! Share it with friends to earn 20% of their earnings.');
        });

        // Close modal when clicking outside
        window.addEventListener('click', (event) => {
            if (event.target === authModal) {
                hideAuthModal();
            }
        });

        // Initialize
        document.addEventListener('DOMContentLoaded', () => {
            loadGlobalStats();
            console.log("FireEarn Platform Loaded");
        });
    </script>
</body>
</html>