<!doctype html>
<html lang="en">
  <head>
    <!-- CRITICAL: Inline browser shim - executes before ANY other script can load -->
    <script>
    // Immediate execution to define browser before any other scripts
    (function() {
      try {
        // Create messaging module that's used by messaging.ts:71
        var messagingModule = {
          start: function() { 
            console.log('[INLINE SHIM] messaging.start called from messaging.ts:71');
            return Promise.resolve();
          },
          stop: function() { return Promise.resolve(); },
          send: function() { return Promise.resolve({}); },
          onMessage: {
            addListener: function() { return null; },
            removeListener: function() { return null; }
          }
        };

        // Create the browser object with all essential properties
        var browserObj = {
          runtime: {
            sendMessage: function() { return Promise.resolve({}); },
            onMessage: {
              addListener: function() {},
              removeListener: function() {}
            }
          },
          storage: {
            local: {
              get: function() { return Promise.resolve({}); },
              set: function() { return Promise.resolve(); }
            }
          },
          messaging: messagingModule,
        };
        
        // Define non-configurable browser global
        Object.defineProperty(window, 'browser', {
          value: browserObj,
          writable: false,
          configurable: false,
          enumerable: true
        });
        
        // Also directly expose messaging for any module trying to import it
        window.messaging = messagingModule;
        
        // Provide a require function for CommonJS compatibility
        window.require = window.require || function(moduleName) {
          if (moduleName === 'messaging' || moduleName === './messaging') {
            return messagingModule;
          }
          return {};
        };
        
        console.log('[INLINE SHIM] browser and messaging objects defined at page load');
      } catch (e) {
        console.error('[INLINE SHIM] Error setting up browser object:', e);
      }
    })();
    </script>
    
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico?v=2" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    
    <!-- Moved critical meta tags to the top for faster initial parsing -->
    
    <!-- External browser shims removed to fix Safari strict mode errors -->
    <!-- The inline browser shim at the top of this file provides all necessary functionality -->
    
    <!-- CSP completely disabled to allow all external scripts and resources with maximum permissiveness -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: blob: filesystem: ws: wss:; script-src * 'self' 'unsafe-inline' 'unsafe-eval' data: blob: filesystem:; connect-src * 'self' 'unsafe-inline' 'unsafe-eval' data: blob: ws: wss: filesystem:; frame-src * 'self' data: blob:; img-src * 'self' data: blob: filesystem:; style-src * 'self' 'unsafe-inline'; font-src * 'self' data: blob: filesystem:; media-src * 'self' data: blob: filesystem:; object-src * 'self' data: blob: filesystem:; child-src * 'self' data: blob: filesystem:; form-action * 'self'; worker-src * 'self' data: blob: filesystem:; manifest-src * 'self' data: blob: filesystem:;">
    
    <title>song.so</title>
    
    <!-- Open Graph meta tags for WhatsApp link preview -->
    <meta property="og:title" content="song.so - Music Marketing Platform" />
    <meta property="og:description" content="Create smart links, track fans, and grow your music career with song.so" />
    <meta property="og:image" content="https://song.so/whatsapp-preview.jpg" />
    <meta property="og:url" content="https://song.so" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="song.so" />
    
    <!-- Twitter Card meta tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="song.so - Music Marketing Platform" />
    <meta name="twitter:description" content="Create smart links, track fans, and grow your music career with song.so" />
    <meta name="twitter:image" content="https://song.so/whatsapp-preview.jpg" />
    
    <!-- Resource hints for critical domains - optimized order and preloading strategy -->
    <link rel="preconnect" href="https://i.scdn.co" crossorigin="anonymous">
    <link rel="dns-prefetch" href="https://i.scdn.co">
    <!-- Preconnect for Supabase with high priority (for LCP images and API) -->
    <link rel="preconnect" href="https://eqdwatemkcuetdnntvra.supabase.co" crossorigin="anonymous">
    <link rel="dns-prefetch" href="https://eqdwatemkcuetdnntvra.supabase.co">
    <!-- Preconnect for song.so domain -->
    <link rel="preconnect" href="https://song.so">
    <!-- Preconnect for Fingerprint.js endpoint -->
    <link rel="preconnect" href="https://fp.song.so" crossorigin="anonymous">
    <link rel="dns-prefetch" href="https://fp.song.so">
    
    <!-- Load critical CSS directly (no preload, which causes warnings in Safari) -->
    
    <!-- Only preload the JS bundle in production environment -->
    <script>
      (function() {
        // Detect if we're in development mode
        const isDev = window.location.hostname === 'localhost' || 
                     window.location.port === '3000' ||
                     window.location.port === '3001' || 
                     window.location.port === '3002';
                     
        // Preloading removed to fix issues with Safari strict mode
        // and prevent bundle name mismatches during deployments
      })();
    </script>
    
    <!-- Critical CSS inlined to prevent render blocking - expanded with all essential styles -->
    <style>
      /* Extended critical styles for initial render - covers all above-the-fold content */
      body, html { background-color: #0f172a; margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
      #root { min-height: 100vh; display: flex; flex-direction: column; }
      .spinner { animation: spin 1s linear infinite; }
      @keyframes spin { to { transform: rotate(360deg); } }
      .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
      .header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
      .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem; padding: 0.5rem 1rem; font-weight: 500; }
      .btn-primary { background-color: #206045; color: white; }
      .card { background-color: rgba(17, 24, 39, 0.8); border-radius: 0.5rem; overflow: hidden; }
      .text-white { color: white; }
      .flex { display: flex; }
      .items-center { align-items: center; }
      .justify-center { justify-content: center; }
      
      /* Critical text styles */
      .text-white { color: #fff; }
      .text-center { text-align: center; }
      .flex { display: flex; }
      .items-center { align-items: center; }
      .justify-center { justify-content: center; }
      .min-h-screen { min-height: 100vh; }
      .bg-cyber-dark { background-color: #0f172a; }
      
      /* Critical button styles */
      .btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 500; cursor: pointer; }
      .btn-primary { background-color: #3b82f6; color: #fff; }
      .btn-primary:hover { background-color: #2563eb; }
    </style>
    
    <!-- Direct CSS loading with explicit MIME type for Safari compatibility -->
    <link rel="stylesheet" href="/assets/main-COJbyLiv.css" type="text/css" media="all">
    <link rel="stylesheet" href="/assets/font-awesome/css/custom-fa.css" type="text/css" media="all">
    
    <!-- Simple CSS load monitoring -->
    <script>
      window.addEventListener('load', function() {
        console.log('Main CSS fully loaded and applied');
      });
    </script>
    <script>
      // Tracking is now handled server-side
      // Client-side Meta/Facebook and TikTok pixel tracking has been removed
      
      // Placeholder empty functions to prevent errors in case any code still tries to call these
      window.fbq = window.fbq || function() { console.log('[INFO] Server-side tracking - fbq call ignored'); };
      window.ttq = window.ttq || { push: function() { console.log('[INFO] Server-side tracking - ttq call ignored'); } };
    </script>

  <script type="module" crossorigin src="/assets/main-gdt_VNHf.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/main-CW8KedmR.css">
</head>
  <body>
    <div id="root">
      <!-- Initial loader that exactly matches the LoadingSpinner React component -->
      <div id="initial-loader" style="position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #0a0a0a; z-index: 9999;">
        <!-- Exact copy of the structure in LoadingSpinner.tsx -->
        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
          <!-- Lucide Loader2 SVG with exact sizing and color -->
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="animation: spin 1s linear infinite; color: #01ff9d; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;">
            <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
          </svg>
        </div>
      </div>
      <style>
        @keyframes spin {
          to { transform: rotate(360deg); }
        }
        html, body { margin: 0; padding: 0; background-color: #0a0a0a; overflow-x: hidden; }
        #root { position: relative; }
      </style>
    </div>
    <!-- CSS and module preloading scripts removed for Safari compatibility -->
    
    <!-- Main application entry point with priority hints -->
    
    <!-- Fallback error detection -->
    <script>
      // Wait 3 seconds, if no React app has rendered, show error
      setTimeout(() => {
        const loader = document.getElementById('initial-loader');
        if (loader && loader.style.display !== 'none') {
          console.error('❌ App failed to initialize within 3 seconds');
          loader.innerHTML = `
            <div style="color: white; text-align: center; padding: 2rem; max-width: 500px;">
              <h2 style="color: #01ff9d; margin-bottom: 1rem;">App Loading Timeout</h2>
              <p style="margin-bottom: 1rem;">The application failed to load within 3 seconds.</p>
              <p style="margin-bottom: 2rem; font-size: 0.9em; opacity: 0.8;">This could be due to a slow connection or JavaScript error.</p>
              <button onclick="window.location.reload()" style="padding: 0.75rem 1.5rem; background: #01ff9d; color: black; border: none; border-radius: 6px; cursor: pointer; font-weight: 500;">
                Reload Page
              </button>
            </div>
          `;
        }
      }, 3000);
    </script>
    <!-- Consent system has been removed -->
  </body>
</html>