<!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);
      }
      
      // Global error handler for debugging TikTok/in-app browser issues
      window.onerror = function(msg, url, lineNo, columnNo, error) {
        console.error('[GLOBAL ERROR]', msg, 'at', url, 'line', lineNo);
        // Show error on screen for debugging in TikTok browser
        var isTikTok = /TikTok|trill_|ByteDance|Rifle_|ByteLocale/i.test(navigator.userAgent);
        if (isTikTok) {
          var errorDiv = document.getElementById('tiktok-error-debug');
          if (!errorDiv) {
            errorDiv = document.createElement('div');
            errorDiv.id = 'tiktok-error-debug';
            errorDiv.style.cssText = 'position:fixed;bottom:0;left:0;right:0;background:red;color:white;padding:10px;font-size:12px;z-index:99999;max-height:200px;overflow:auto;';
            document.body.appendChild(errorDiv);
          }
          errorDiv.innerHTML += '<div>' + msg + ' at line ' + lineNo + '</div>';
        }
        return false;
      };
      
      // Unhandled promise rejection handler
      window.onunhandledrejection = function(event) {
        console.error('[UNHANDLED PROMISE]', event.reason);
      };
    })();
    </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" />
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="" />
    <meta name="keywords" content="music marketing, smart links, fan tracking, music analytics, artist tools, music promotion, spotify links, music data, fan engagement" />
    <meta name="author" content="SwipeUp Marketing" />
    <meta name="robots" content="index, follow" />
    <meta name="language" content="English" />
    <link rel="canonical" href="https://song.so" />
    
    <!-- Permissions Policy to suppress geolocation warnings from PayPal -->
    <meta http-equiv="Permissions-Policy" content="geolocation=(), camera=(), microphone=()" />
    
    <!-- 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>
    
    <!-- TikTok Pixel removed for performance -->
    
    <!-- Social sharing meta tags will be dynamically added for smartlinks only -->
    
    <!-- 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">
    
    <!-- Google Fonts - Only load essential fonts initially for faster page load -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Load only Inter and Space Mono (main app fonts) with font-display swap to prevent blocking -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
    <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"></noscript>
    <!-- Other fonts loaded on-demand when bio links need them -->
    
    <!-- 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">
    
    <!-- Font Awesome for icon picker - DEFERRED (only needed for dashboard, not smartlinks) -->
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"></noscript>
    
    <!-- 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-DsUnyWr_.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/vendor-react-BSSyBZdX.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-dates-CxC-K4Ff.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-B_f1uonF.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-i18n-wjOm3VS1.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-supabase-DEjio_VE.js">
  <link rel="modulepreload" crossorigin href="/assets/cookieConsent-Ce-zBgGR.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-icons-DYv-N7Zl.js">
  <link rel="modulepreload" crossorigin href="/assets/LoadingSpinner-BpXDgcCu.js">
  <link rel="modulepreload" crossorigin href="/assets/fingerprint-DDXTg6wb.js">
  <link rel="stylesheet" crossorigin href="/assets/cookieConsent-DfYR_2n6.css">
  <link rel="stylesheet" crossorigin href="/assets/vendor-Ee8H9OfC.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: #080913; 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: #D1D2D2; 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: #080913; 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 20 seconds for app to load (increased for slower connections)
      setTimeout(() => {
        const loader = document.getElementById('initial-loader');
        if (loader && loader.style.display !== 'none') {
          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.</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>
          `;
        }
      }, 20000);
    </script>
    <!-- Consent system has been removed -->
  </body>
</html>