<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
    
    <!-- Cache control for HTML - allow short cache for updates -->
    <meta http-equiv="Cache-Control" content="public, max-age=3600, must-revalidate" />
    
    <!-- Performance optimizations -->
    <meta name="theme-color" content="#FF6B35" />
    <meta name="description" content="ReRide - Buy and sell quality used vehicles with confidence. AI-powered recommendations and certified inspections." />
    
    <!-- PWA Meta Tags -->
    <link rel="manifest" href="/manifest.webmanifest" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="ReRide" />
    <link rel="apple-touch-icon" href="/icon-192.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="/icon-192.png" />
    <link rel="apple-touch-icon" sizes="512x512" href="/icon-512.png" />
    
    <!-- Preconnect to external domains for faster loading -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="https://nominatim.openstreetmap.org">
    <link rel="dns-prefetch" href="https://i.pravatar.cc" />
    
    <!-- Load fonts with display=swap and media=print trick for async loading -->
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Nunito+Sans:wght@600;700;800&display=swap" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Nunito+Sans:wght@600;700;800&display=swap"></noscript>
    
    <!-- Preload critical font files for faster rendering - using font-display: swap -->
    <!-- Note: Actual font URLs will be determined by Google Fonts, but preconnect helps -->
    
    <!-- CRITICAL: Polyfill process.emitWarning BEFORE any modules load -->
    <script>
      // Polyfill process.emitWarning for browser compatibility - must run FIRST
      (function() {
        if (typeof window !== 'undefined') {
          if (typeof process === 'undefined') {
            window.process = { env: {} };
          }
          if (!window.process.emitWarning) {
            window.process.emitWarning = function(msg, type, code, ctor) {
              // Silently handle warnings to prevent errors
              if (typeof console !== 'undefined' && console.warn) {
                console.warn('[process.emitWarning]', msg);
              }
            };
          }
          // Ensure process is available globally
          if (typeof globalThis !== 'undefined') {
            globalThis.process = window.process;
          }
        }
      })();
    </script>
    
    <!-- Prefetch API endpoints only in production or when API server is confirmed available -->
    <script>
      
      // Only prefetch if we're in production mode (not localhost)
      (function() {
        const isLocalhost = window.location.hostname === 'localhost' || 
                           window.location.hostname === '127.0.0.1' ||
                           window.location.hostname.includes('localhost');
        
        // Skip prefetch in development to avoid 404 errors when API server isn't running
        if (isLocalhost) {
          return;
        }
        
        // In production, prefetch after page load
        window.addEventListener('load', () => {
          setTimeout(() => {
            // Check if API server is available before prefetching
            const controller = new AbortController();
            const timeoutId = setTimeout(() => controller.abort(), 2000);
            
            fetch('/api/vehicles', { 
              method: 'HEAD', 
              cache: 'no-store',
              signal: controller.signal
            })
              .then(response => {
                clearTimeout(timeoutId);
                if (response.ok) {
                  const link1 = document.createElement('link');
                  link1.rel = 'prefetch';
                  link1.href = '/api/vehicles';
                  document.head.appendChild(link1);
                  
                  const link2 = document.createElement('link');
                  link2.rel = 'prefetch';
                  link2.href = '/api/users';
                  document.head.appendChild(link2);
                }
              })
              .catch(() => {
                clearTimeout(timeoutId);
                // Silently fail if API server is not available
              });
          }, 2000);
        });
      })();
    </script>
    
    <title>ReRide - Buy & Sell Quality Used Vehicles</title>
    
    <!-- Fix for zoom issues - ensure proper viewport scaling -->
    <script>
      // Ensure viewport is set correctly and reset any zoom
      (function() {
        // Force viewport meta tag
        let viewport = document.querySelector('meta[name="viewport"]');
        if (!viewport) {
          viewport = document.createElement('meta');
          viewport.name = 'viewport';
          document.getElementsByTagName('head')[0].appendChild(viewport);
        }
        viewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, shrink-to-fit=no';
        
        // ✅ FIX: Reset any CSS zoom - check if elements exist first
        if (document.documentElement) {
          document.documentElement.style.zoom = '1';
        }
        // ✅ FIX: Check if body exists before accessing its style
        if (document.body) {
          document.body.style.zoom = '1';
        } else {
          // If body doesn't exist yet, wait for DOMContentLoaded
          document.addEventListener('DOMContentLoaded', function() {
            if (document.body) {
              document.body.style.zoom = '1';
            }
          });
        }
        
        // Prevent text size adjustment that causes zooming
        if (document.documentElement && 'textSizeAdjust' in document.documentElement.style) {
          document.documentElement.style.textSizeAdjust = '100%';
        }
      })();
    </script>
    <script type="module" crossorigin src="/assets/index-CcL4R5jt.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/utils-vendor-DGjTGX7h.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-B3qRr3Cp.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-CTftvOTO.js">
    <link rel="modulepreload" crossorigin href="/assets/firebase-CxHcOnbA.js">
    <link rel="modulepreload" crossorigin href="/assets/services-hHOAZxHT.js">
    <link rel="modulepreload" crossorigin href="/assets/admin-WrKmx9FC.js">
    <link rel="modulepreload" crossorigin href="/assets/service-gemini-DsJOHNUx.js">
    <link rel="modulepreload" crossorigin href="/assets/charts-DO7R1vVZ.js">
    <link rel="modulepreload" crossorigin href="/assets/chat-BbqTQULN.js">
    <link rel="modulepreload" crossorigin href="/assets/dashboard-Bds_MqOa.js">
    <link rel="modulepreload" crossorigin href="/assets/home-B503TK1-.js">
    <link rel="modulepreload" crossorigin href="/assets/vehicles-7HMoh3Ei.js">
    <link rel="stylesheet" crossorigin href="/assets/index-C1kpRstE.css">
  </head>
  <body class="antialiased transition-colors duration-300" style="background-color: #FFFFFF; color: #2C2C2C;">
    <!-- Skip to main content link for accessibility -->
    <a href="#main-content" class="skip-link" style="position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;">Skip to main content</a>
    <style>
      .skip-link:focus {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        width: auto;
        height: auto;
        padding: 1rem 2rem;
        background: #FF6B35;
        color: white;
        text-decoration: none;
        font-weight: bold;
        border: 2px solid white;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      }
    </style>
    <!-- Loading indicator -->
    <div id="root">
      <div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#FFFFFF;">
        <div style="text-align:center;">
          <div style="width:50px;height:50px;border:4px solid #F5F5F5;border-top-color:#FF6B35;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px;"></div>
          <p style="color:#2C2C2C;font-size:16px;font-weight:600;">Loading ReRide...</p>
        </div>
      </div>
    </div>
    <style>@keyframes spin{to{transform:rotate(360deg)}}</style>
  </body>
</html>