<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Billionaire Wealth Visualizer - See Wealth as Physical Gold & Silver</title>
    <meta name="description"
        content="Visualize billionaire wealth as massive gold and silver statues. See how much Jeff Bezos, Elon Musk, and other billionaires earn every second in real-time.">

    <!-- Accessibility enhancements -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <meta name="color-scheme" content="dark light">

    <!-- Skip to content link for screen readers -->
    <style>
        .skip-link {
            position: absolute;
            top: -40px;
            left: 6px;
            background: #FFD700;
            color: #000;
            padding: 8px;
            text-decoration: none;
            border-radius: 4px;
            z-index: 10001;
            font-weight: bold;
        }

        .skip-link:focus {
            top: 6px;
        }
    </style>
    <meta name="keywords"
        content="billionaire wealth, net worth visualization, gold calculator, wealth inequality, real-time earnings">
    <meta name="author" content="Wealth Visualizer">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://billionaire-wealth-visualizer.com/">
    <meta property="og:title" content="Billionaire Wealth Visualizer - Mind-Blowing Scale">
    <meta property="og:description"
        content="🤯 See how billionaire wealth looks as MASSIVE gold statues. The scale will shock you.">
    <meta property="og:image" content="./assets/og-images/wealth-visualization.jpg">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://billionaire-wealth-visualizer.com/">
    <meta property="twitter:title" content="Billionaire Wealth Visualizer - Mind-Blowing Scale">
    <meta property="twitter:description"
        content="🤯 See how billionaire wealth looks as MASSIVE gold statues. The scale will shock you.">
    <meta property="twitter:image" content="./assets/og-images/wealth-visualization.jpg">

    <!-- Schema.org markup -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "Billionaire Wealth Visualizer",
        "description": "Interactive visualization of billionaire wealth as physical gold and silver statues",
        "url": "https://billionaire-wealth-visualizer.com/",
        "applicationCategory": "Educational",
        "operatingSystem": "Any",
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD"
        }
    }
    </script>

    <!-- Premium Typography -->
    <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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap"
        rel="stylesheet">

    <!-- Preload critical resources -->
    <link rel="preload" href="css/main.css?v=e210cb51" as="style">
    <link rel="preload" href="js/app.js" as="script">
    <link rel="preload" href="js/ad-config.js" as="script">

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="./assets/icons/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="./assets/icons/apple-touch-icon.png">

    <!-- CSS -->
    <link rel="stylesheet" href="css/main.css?v=e210cb51">

    <!-- Web App Manifest -->
    <link rel="manifest" href="./manifest.json">
    <meta name="theme-color" content="#0a0a0a">
</head>

<body>
    <!-- Skip to main content for screen readers -->
    <a href="#main-content" class="skip-link">Skip to main content</a>

    <!-- Focus management -->
    <div id="focus-trap-start" tabindex="0" style="position: absolute; left: -9999px;"></div>

    <!-- Custom Cursor -->
    <div class="custom-cursor" id="custom-cursor"></div>
    <!-- Real-time Wealth Counter Banner -->
    <div id="wealth-banner" class="wealth-banner" role="banner" aria-live="polite">
        <div class="banner-content">
            <div class="wealth-info">
                <div class="wealth-text">
                    <span id="wealth-message">Select billionaires to track their earnings</span>
                </div>
                <div class="wealth-timer">
                    <span class="timer-label">Timer:</span>
                    <span id="session-timer" class="timer-display">00:00</span>
                </div>
            </div>
            <div class="banner-actions">
                <button class="share-wealth-btn" onclick="shareWealthUpdate()" style="display: none;">
                    <span class="share-icon">📤</span> Share
                </button>
                <button class="banner-close" aria-label="Close banner" onclick="closeBanner()">×</button>
            </div>
        </div>
    </div>

    <!-- Floating Share Bar -->
    <div id="floating-share-bar" class="floating-share-bar" role="complementary" aria-label="Social sharing options">
        <div class="share-bar-content">
            <div class="share-item" id="twitter-share">
                <button class="floating-share-btn twitter-btn" onclick="shareOnTwitter()" aria-label="Share on Twitter">
                    <span class="share-icon">↗</span>
                    <span class="platform-name">Twitter</span>
                </button>
                <span class="share-counter" id="twitter-counter">2.3K</span>
            </div>

            <div class="share-item" id="copy-share">
                <button class="floating-share-btn copy-btn" onclick="copyShareLink()" aria-label="Copy link to share">
                    <span class="share-icon">⧉</span>
                    <span class="platform-name">Copy</span>
                </button>
                <span class="share-counter" id="copy-counter">847</span>
            </div>

            <div class="share-item" id="screenshot-share">
                <button class="floating-share-btn screenshot-btn" onclick="captureScreenshot()"
                    aria-label="Download screenshot">
                    <span class="share-icon">⬇</span>
                    <span class="platform-name">Save</span>
                </button>
                <span class="share-counter" id="screenshot-counter">156</span>
            </div>
        </div>

        <div class="share-bar-toggle" onclick="toggleShareBar()" aria-label="Toggle share bar">
            <span class="toggle-icon">→</span>
        </div>
    </div>

    <!-- Main Container -->
    <main id="main-content" class="container" role="main" tabindex="-1">
        <!-- Minimal Header -->
        <header class="hero-section">
            <h1 class="hero-title">
                <span class="title-line gold-text">BILLIONAIRE</span>
                <span class="title-line">WEALTH</span>
                <span class="title-line">VISUALIZER</span>
            </h1>
            <div class="floating-stats">
                <span class="floating-stat">
                    <span class="stat-number" id="total-billionaires">8</span> Billionaires
                </span>
                <span class="floating-stat">
                    <span class="stat-number" id="total-wealth">$1.8T</span> Combined
                </span>
                <span class="floating-stat">
                    <span class="stat-number" id="earnings-per-second">$3,147</span>/sec
                </span>
            </div>
        </header>

        <!-- Main Visualization - Above the Fold -->
        <section class="main-visualization">
            <div class="visualization-container-full" id="visualization-container">
                <div class="viz-placeholder">
                    <div class="placeholder-icon">—</div>
                    <h3>Loading visualization...</h3>
                    <p>Experience the extraordinary scale of wealth inequality</p>
                </div>
            </div>
        </section>

        <!-- Immediate Billionaire Selection -->
        <section class="billionaire-selector billionaire-selector-compact">
            <div class="quick-grid" id="quick-grid">
                <!-- Populated by JavaScript -->
            </div>

            <!-- Controls Below Selection -->
            <div class="selection-controls-bottom">
                <div class="selection-controls-group">
                    <button id="multiSelectBtn" class="control-btn" onclick="toggleMultiSelect()" aria-pressed="false">
                        <span class="btn-icon">☐</span>
                        <span class="btn-text">Multi-Select</span>
                    </button>
                    <button id="clearAllBtn" class="control-btn secondary" onclick="clearAllSelections()"
                        >
                        <span class="btn-icon">✕</span>
                        <span class="btn-text">Clear All</span>
                    </button>
                    <div id="selectionCounter" class="selection-counter" >
                        <span class="counter-text"><span id="selectedCount">0</span> selected</span>
                    </div>
                </div>
                <div class="material-toggle-bottom">
                    <button class="material-btn active" data-metal="gold" onclick="switchMetal('gold')">Gold</button>
                    <button class="material-btn" data-metal="silver" onclick="switchMetal('silver')">Silver</button>
                </div>
            </div>

            <!-- Hidden Elements for Tests -->
            <div style="display: none;">
                <div id="billionaireName">Elon Musk</div>
                <div id="net-worth">$248.3B</div>
                <div>Gold bars: <span id="barsCount">0</span></div>
            </div>
        </section>

        <!-- Hidden Billionaire Grid for Tests -->
        <div class="billionaire-grid" id="billionaire-grid" role="group" aria-label="Billionaire selection grid"
            style="display: none;">
            <!-- Billionaire cards will be populated by JavaScript -->
        </div>

        <!-- Native Ad Slot 1 -->
        <div class="ad-slot ad-slot-1" id="ad-slot-1" data-ad-placement="after-selector" aria-label="Sponsored content">
            <div class="ad-placeholder" id="ad-placeholder-1">
                <div class="ad-skeleton">
                    <div class="skeleton skeleton-text"></div>
                    <div class="skeleton skeleton-text short"></div>
                </div>
            </div>
        </div>

        <!-- Earnings Calculator -->
        <section class="calculator-section" aria-labelledby="calculator-heading">
            <h2 id="calculator-heading" class="section-title">Personal Wealth Comparison</h2>
            <div class="earnings-calculator" id="earnings-calculator">
                <div class="calculator-form">
                    <div class="input-group">
                        <label for="userNetWorth">Your Net Worth ($):</label>
                        <input type="text" id="userNetWorth" placeholder="50,000 or 50K or 500.45" autocomplete="off"
                            aria-describedby="input-help">
                        <button type="button" onclick="calculateEarnings()" class="calculate-btn">
                            Calculate Comparison
                        </button>
                    </div>

                    <!-- Input help text -->
                    <div id="input-help" class="input-help">
                        <p><strong>Supported formats:</strong> 50000, 50,000, 50K, 50.5K, 1.2M, 500.45</p>
                    </div>
                </div>
                <div id="earningsResult" class="result-display" style="display: none;">
                    <!-- Single billionaire result -->
                    <div class="result-card single-result" id="singleResult" style="display: none;">
                        <div class="result-text">Your entire net worth equals:</div>
                        <div class="result-value" id="resultSeconds">0 seconds</div>
                        <div class="result-detail">of <span id="resultBillionaire">selected billionaire</span>'s
                            earnings</div>
                        <button class="share-result-btn" onclick="shareEarningsComparison()">
                            Share This Analysis
                        </button>
                    </div>

                    <!-- Multiple billionaires results -->
                    <div class="multi-results" id="multiResults" style="display: none;">
                        <div class="multi-results-header">
                            <h3>Your net worth compared to each billionaire:</h3>
                            <div class="your-net-worth">Your Net Worth: <span id="displayNetWorth">$0</span></div>
                        </div>
                        <div class="comparison-grid-results" id="comparisonGridResults">
                            <!-- Will be populated by JavaScript -->
                        </div>
                        <button class="share-result-btn" onclick="shareEarningsComparison()">
                            Share All Comparisons
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- Comparison Tools -->
        <section class="comparison-section" aria-labelledby="comparison-heading" style="display: none;"
            id="comparison-section">
            <h2 id="comparison-heading" class="section-title">Mind-Blowing Comparisons</h2>
            <div class="comparison-grid" id="comparison-grid">
                <!-- Comparisons will be populated by JavaScript -->

                <!-- Native Text Ad integrated into comparisons -->
                <div class="comparison-card ad-comparison" id="ad-comparison-text" data-ad-placement="comparison-inline"
                    style="display: none;">
                    <div class="promoted-label">PROMOTED</div>
                    <div class="comparison-content">
                        <div class="comparison-title">Investment Opportunity</div>
                        <div class="comparison-text">This wealth equals <strong id="gold-bars-needed">2,847</strong>
                            gold bars. <a href="#" class="ad-link"
                                onclick="trackAdClick('comparison-inline', 'goldmoney')">Start investing from $50</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Native Ad Slot 2 -->
        <div class="ad-slot ad-slot-2" id="ad-slot-2" data-ad-placement="after-facts" aria-label="Sponsored content">
            <div class="ad-placeholder" id="ad-placeholder-2">
                <div class="ad-skeleton">
                    <div class="skeleton skeleton-text"></div>
                    <div class="skeleton skeleton-text short"></div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="footer" role="contentinfo">
        <div class="footer-content">
            <p>&copy; 2025 Wealth Visualizer. Data updated in real-time.</p>
            <div class="footer-links">
                <a href="#methodology" onclick="showMethodology()">Methodology</a>
                <a href="#privacy" onclick="showPrivacy()">Privacy</a>
                <a href="#about" onclick="showAbout()">About</a>
            </div>
        </div>
    </footer>

    <!-- Focus management -->
    <div id="focus-trap-end" tabindex="0" style="position: absolute; left: -9999px;"></div>

    <!-- Live region for dynamic announcements -->
    <div id="live-region" aria-live="polite" aria-atomic="true" class="sr-only"></div>

    <!-- Error boundary container - Disabled -->
    <!-- <div id="error-boundary" class="error-boundary" style="display: none;" role="alert" aria-live="assertive">
        <div class="error-content">
            <h2>Something went wrong</h2>
            <p>The app encountered an error, but your data is safe. Try refreshing the page.</p>
            <button onclick="location.reload()" class="error-retry-btn">Refresh Page</button>
        </div>
    </div> -->

    <!-- Google Analytics 4 -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'GA_MEASUREMENT_ID', {
            // Enhanced ecommerce for ad revenue tracking
            send_page_view: true,
            allow_google_signals: true,
            allow_ad_personalization_signals: false, // Privacy-focused

            // Custom parameters
            custom_map: {
                'custom_parameter_1': 'billionaire_selection',
                'custom_parameter_2': 'metal_type',
                'custom_parameter_3': 'wealth_visualization'
            },

            // Performance monitoring
            page_title: 'Billionaire Wealth Visualizer',
            page_location: window.location.href,

            // Privacy settings
            anonymize_ip: true,
            cookie_expires: 63072000, // 2 years

            // Content grouping
            content_group1: 'Wealth Visualization',
            content_group2: 'Interactive Tool'
        });

        // Track initial page load
        gtag('event', 'page_view', {
            page_title: 'Billionaire Wealth Visualizer',
            page_location: window.location.href,
            content_group: 'wealth_visualization'
        });
    </script>

    <!-- Scripts -->
    <script src="js/systems/AnimationManager.js?v=a9910926"></script>
    <script src="js/components/BillionaireCard.js?v=8aa0c684"></script>
    <script src="js/state/StateManager.js?v=3d249d5e"></script>
    <script src="js/handlers/KeyboardHandler.js?v=b2de40fd"></script>
    <script src="js/app.js?v=d2ab6352"></script>
    <script src="js/calculations.js?v=4c6ecf68"></script>
    <script src="js/sharing.js?v=6bb3bcd9"></script>
    <script src="js/ad-config.js?v=48b3e98d"></script>
    <script src="js/ads.js?v=1aa02475"></script>
    <script src="js/analytics.js?v=8cb359d7"></script>
    <script src="js/ai-content.js?v=519d5100"></script>
    <script src="js/ai-facts-client.js?v=f9b79ef8"></script>

    <!-- Service Worker Registration -->
    <script>
        if ('serviceWorker' in navigator && window.location.protocol === 'https:') {
            window.addEventListener('load', function () {
                navigator.serviceWorker.register('./service-worker.js').catch(function (err) {
                    console.log('ServiceWorker registration failed: ', err);
                });
            });
        } else {
            console.log('Service Worker not supported or not on HTTPS');
        }
    </script>
</body>

</html>