<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/assets/vite-C0KzkD1C.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Car Audio Events - Official Car Audio Competition Platform | IASCA, MECA, Bass Wars Events</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="The official platform for car audio competitions. Find IASCA, MECA, Bass Wars, and Sound Quality events near you. Register for competitions, track scores, connect with the car audio community." />
    <meta name="keywords" content="car audio competitions, IASCA events, MECA competitions, Bass Wars, sound quality competition, SPL competition, car audio events, dB drag racing, sound off competition, car stereo competition" />
    <meta name="author" content="Car Audio Events" />
    <meta name="robots" content="index, follow" />
    <meta name="language" content="English" />
    
    <!-- Open Graph Meta Tags for Social Media -->
    <meta property="og:title" content="Car Audio Events - Official Competition Platform" />
    <meta property="og:description" content="Find and register for car audio competitions. Connect with IASCA, MECA, Bass Wars events and the car audio community." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://caraudioevents.com" />
    <meta property="og:image" content="https://caraudioevents.com/og-image.jpg" />
    <meta property="og:site_name" content="Car Audio Events" />
    <meta property="og:locale" content="en_US" />
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Car Audio Events - Official Competition Platform" />
    <meta name="twitter:description" content="Find and register for car audio competitions. Connect with IASCA, MECA, Bass Wars events." />
    <meta name="twitter:image" content="https://caraudioevents.com/twitter-card.jpg" />
    <meta name="twitter:site" content="@caraudioevents" />
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://caraudioevents.com" />
    
    <!-- CACHE BUSTING - FORCE MOBILE UPDATE -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="cache-version" content="v1.5.24-mailgun-tinymce-fix">
    
    <!-- Enhanced security headers (meta tag compatible only) -->
    <!-- Note: CSP is now handled by netlify.toml to avoid conflicts -->
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">
    
    <!-- Feature Policy fallback for older browsers -->
    <meta http-equiv="Feature-Policy" content="payment *; payment-handler *; encrypted-media *; microphone 'none'; camera 'none'; geolocation *">
    
    <!-- Google Analytics 4 -->
    <!-- NOTE: Replace G-XXXXXXXXXX with your actual GA4 Measurement ID in the .env file -->
    <!-- The actual ID is loaded from VITE_GA_MEASUREMENT_ID environment variable -->
    <script>
      // GA4 will be initialized by the React app with the correct Measurement ID
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
    </script>
    
    <!-- Critical resource hints for performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://nqvisvranvjaghvrdaaz.supabase.co" crossorigin>
    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
    
    <!-- Optimized font loading with display=swap for faster rendering -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <!-- Critical inline CSS for faster initial render -->
    <style>
      /* Critical above-the-fold styles */
      #root {
        min-height: 100vh;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
      }
      
      /* Loading state styles */
      .loading-fallback {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        color: white;
        font-family: Inter, system-ui, sans-serif;
        flex-direction: column;
      }
      
      .spinner {
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top: 3px solid #60a5fa;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      /* Prevent layout shift */
      body {
        margin: 0;
        padding: 0;
        font-family: Inter, system-ui, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      /* Error message styles */
      .error-message {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #fecaca;
        padding: 16px;
        border-radius: 8px;
        margin-top: 20px;
        max-width: 600px;
        text-align: left;
      }
      
      .retry-button {
        background: #3b82f6;
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 6px;
        cursor: pointer;
        margin-top: 16px;
        font-size: 14px;
      }
      
      .retry-button:hover {
        background: #2563eb;
      }
    </style>
    
    <!-- Enhanced Security & Error handling script -->
    <script>
      let loadTimeout;
      let hasLoaded = false;
      
      // Clear any existing service workers (security cleanup)
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations().then(function(registrations) {
          for(let registration of registrations) {
            registration.unregister();
          }
        });
      }
      
      // Security: Prevent clickjacking and frame embedding
      if (window !== window.top) {
        window.top.location = window.location;
      }
      
      // Security: Enhanced CSP violation reporting (only log in development)
      if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
        document.addEventListener('securitypolicyviolation', (e) => {
          console.warn('CSP Violation:', e.violatedDirective, e.blockedURI);
        });
      }
      
      // Set a timeout to show error message if app doesn't load
      loadTimeout = setTimeout(() => {
        if (!hasLoaded) {
          const fallback = document.querySelector('.loading-fallback');
          if (fallback) {
            fallback.innerHTML = `
              <div style="text-align: center;">
                <div class="spinner"></div>
                <p style="margin-top: 16px; opacity: 0.8;">Loading Car Audio Events...</p>
                <div class="error-message">
                  <strong>Site Loading Issue Detected</strong><br/>
                  The application is taking longer than expected to load. This may be due to:
                  <ul style="margin: 8px 0; padding-left: 20px;">
                    <li>Network connectivity issues</li>
                    <li>Browser cache conflicts</li>
                    <li>Security policy restrictions</li>
                  </ul>
                  <button class="retry-button" onclick="window.location.reload()">
                    Reload Page
                  </button>
                  <button class="retry-button" onclick="window.location.reload(true)" style="margin-left: 8px;">
                    Hard Refresh
                  </button>
                </div>
              </div>
            `;
          }
        }
      }, 10000); // 10 second timeout
      
      // Clear timeout when React app loads
      window.addEventListener('load', () => {
        setTimeout(() => {
          hasLoaded = true;
          clearTimeout(loadTimeout);
        }, 2000);
      });
      
      // Enhanced error logging for security monitoring (development only)
      if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
        window.addEventListener('error', (e) => {
          console.error('Page Error:', e.error);
        });
        
        window.addEventListener('unhandledrejection', (e) => {
          console.error('Unhandled Promise Rejection:', e.reason);
        });
      }
    </script>
    <script type="module" crossorigin src="/assets/index-YLy5Bshc.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-klyUyTqh.css">
  </head>
  <body>
    <div id="root">
      <!-- Fallback loading state to prevent blank screen -->
      <div class="loading-fallback">
        <div style="text-align: center;">
          <div class="spinner"></div>
          <p style="margin-top: 16px; opacity: 0.8;">Loading Car Audio Events...</p>
        </div>
      </div>
    </div>
  </body>
</html>