<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no,address=no,email=no" />
    <meta name="tiktok-developers-site-verification" content="qraw2jRRSxdn4yeJBX8LeeAHa6pD3VhR" />
    
    <title>Travelaggio - A Powerful App for Serious Travelers</title>
    <meta name="description" content="AI-powered travel itinerary automation. Automatically organize your flights, hotels, rentals, and reservations in one place." />
    
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#3b82f6" />
    <meta name="color-scheme" content="light" />
    
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="Travelaggio" />
    <link rel="apple-touch-icon" href="/icon-192.png" />
    
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Travelaggio - A Powerful App for Serious Travelers" />
    <meta property="og:description" content="AI-powered travel itinerary automation. Automatically organize your flights, hotels, rentals, and reservations." />
    <meta property="og:image" content="/icon-512.png" />
    
    <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=Lobster&family=Open+Sans:wght@700&display=swap" rel="stylesheet">
    
    <style>
      #startup-loader {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        z-index: 9999;
        transition: opacity 0.4s ease;
      }
      #startup-loader.fade-out {
        opacity: 0;
        pointer-events: none;
      }
      #startup-loader .logo-text {
        font-family: 'Lobster', cursive;
        font-size: 2.2rem;
        color: #3b82f6;
        margin-bottom: 1.5rem;
        letter-spacing: 0.02em;
      }
      #startup-loader .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #e5e7eb;
        border-top-color: #3b82f6;
        border-radius: 50%;
        animation: startup-spin 0.8s linear infinite;
      }
      @keyframes startup-spin {
        to { transform: rotate(360deg); }
      }
    </style>

    <script>
      // Auto-recovery: Detect blank page and clear cache automatically
      (function() {
        var RECOVERY_KEY = 'travelaggio_recovery_attempt';
        var MAX_RECOVERY_ATTEMPTS = 2;
        
        function clearCachesAndReload() {
          console.log('🔄 Auto-recovery: Clearing caches and reloading...');
          
          // Unregister service worker
          if ('serviceWorker' in navigator) {
            navigator.serviceWorker.getRegistrations().then(function(registrations) {
              registrations.forEach(function(registration) {
                registration.unregister();
              });
            });
          }
          
          // Clear all caches
          if ('caches' in window) {
            caches.keys().then(function(names) {
              names.forEach(function(name) {
                caches.delete(name);
              });
            });
          }
          
          // Clear localStorage recovery counter and reload
          setTimeout(function() {
            localStorage.removeItem(RECOVERY_KEY);
            window.location.reload(true);
          }, 500);
        }
        
        // Check for blank page after React should have mounted
        window.addEventListener('load', function() {
          setTimeout(function() {
            var root = document.getElementById('root');
            var hasContent = root && root.children.length > 0 && root.innerHTML.trim().length > 50;
            
            if (!hasContent) {
              var attempts = parseInt(localStorage.getItem(RECOVERY_KEY) || '0', 10);
              
              if (attempts < MAX_RECOVERY_ATTEMPTS) {
                console.warn('⚠️ Blank page detected! Attempting auto-recovery (attempt ' + (attempts + 1) + ')');
                localStorage.setItem(RECOVERY_KEY, String(attempts + 1));
                clearCachesAndReload();
              } else {
                console.error('❌ Auto-recovery failed after ' + MAX_RECOVERY_ATTEMPTS + ' attempts');
                localStorage.removeItem(RECOVERY_KEY);
              }
            } else {
              // Page loaded successfully, reset recovery counter
              localStorage.removeItem(RECOVERY_KEY);
            }
          }, 10000); // Wait 10 seconds for React to mount (large localStorage caches on mobile can take 6-8 seconds to restore)
        });
      })();
      
      // Register service worker
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('/service-worker.js')
            .then(function(registration) {
              console.log('✅ PWA: Service Worker registered:', registration.scope);
              
              // Check for updates periodically
              registration.addEventListener('updatefound', function() {
                var newWorker = registration.installing;
                newWorker.addEventListener('statechange', function() {
                  if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                    console.log('🔄 New service worker installed, will activate on next visit');
                  }
                });
              });
            })
            .catch(function(error) {
              console.log('❌ PWA: Service Worker registration failed:', error);
            });
        });
      }
    </script>
    <script type="module" crossorigin src="/assets/index-Rs4t22PE.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-BkJ71AUE.css">
  </head>
  <body>
    <div id="startup-loader">
      <div class="logo-text">Travelaggio</div>
      <div class="spinner"></div>
    </div>
    <div id="root"></div>
    <script>
      // Hide startup loader once React has mounted content into #root
      (function() {
        var loader = document.getElementById('startup-loader');
        if (!loader) return;

        function hideLoader() {
          loader.classList.add('fade-out');
          setTimeout(function() {
            if (loader.parentNode) loader.parentNode.removeChild(loader);
          }, 450);
        }

        // Poll until React mounts content
        var pollInterval = setInterval(function() {
          var root = document.getElementById('root');
          if (root && root.children.length > 0 && root.innerHTML.trim().length > 50) {
            clearInterval(pollInterval);
            clearTimeout(safetyTimeout);
            hideLoader();
          }
        }, 100);

        // 15-second safety fallback — if React still hasn't mounted,
        // show a retry button instead of a blank white screen
        var safetyTimeout = setTimeout(function() {
          clearInterval(pollInterval);
          var root = document.getElementById('root');
          var hasContent = root && root.children.length > 0 && root.innerHTML.trim().length > 50;
          if (hasContent) {
            hideLoader();
          } else {
            // React didn't mount — show a recovery UI instead of blank screen
            loader.innerHTML = '<div class="logo-text">Travelaggio</div><p style="color:#64748b;margin-bottom:1.5rem;font-family:system-ui,sans-serif">Having trouble loading. Please try again.</p><button onclick="try{localStorage.removeItem(\'travelaggio-query-cache\')}catch(e){}window.location.reload(true)" style="background:#0069AF;color:#fff;border:none;border-radius:8px;padding:0.75rem 2rem;font-size:1rem;cursor:pointer;font-family:system-ui,sans-serif">Reload App</button>';
          }
        }, 15000);
      })();
    </script>
    <!-- Replit dev banner removed for native compatibility -->
  </body>
</html>