<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/CBL-192.png" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover, height=device-height"
    />
    <meta name="HandheldFriendly" content="true" />
    <meta name="format-detection" content="telephone=no, address=no, email=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta property="og:title" content="CityBucketList - Private Membership Association" />
    <meta property="og:description" content="Exclusive transportation services for PMA members" />
    <meta property="og:image" content="/CBL-512.png" />
    <meta property="og:url" content="https://citybucketlist.com" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Your ride-sharing app for city transportation" />
    <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="CBL" />
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
    <link rel="apple-touch-icon" href="/CBL-512.png" />
    <link rel="apple-touch-startup-image" href="/CBL-512.png" />
    <link rel="mask-icon" href="/CBL-512.png" color="#000000" />

    <title>Need a Ride?</title>
    <script src="/env.js"></script>
    <style>
      :root {
          --sat: env(safe-area-inset-top);
          --sab: env(safe-area-inset-bottom);
          --sal: env(safe-area-inset-left);
          --sar: env(safe-area-inset-right);
      }

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      html, body {
          height: 100vh;
          height: -webkit-fill-available;
          width: 100%;
          max-width: 100%;
          overflow: hidden;
          position: fixed;
          background-color: black;
          color: white;
          -webkit-tap-highlight-color: transparent;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -moz-user-select: none;
               user-select: none;
          -moz-text-size-adjust: 100%;
               text-size-adjust: 100%;
          -webkit-text-size-adjust: 100%;
          -ms-text-size-adjust: 100%;
          margin: 0;
          padding: 0;
      }
      #root {
          height: 100%;
          width: 100%;
          max-width: 100vw;
          overflow-y: auto;
          overflow-x: hidden;
          -webkit-overflow-scrolling: touch;
          position: relative;
          touch-action: manipulation;
          padding-top: var(--sat);
          padding-bottom: var(--sab);
          padding-left: var(--sal);
          padding-right: var(--sar);
          -webkit-touch-callout: none;
          -webkit-tap-highlight-color: transparent;
          display: flex;
          flex-direction: column;
      }
      @media (max-width: 320px) {
          html, body {
              font-size: 12px;
          }
      }
      @media (min-width: 321px) and (max-width: 480px) {
          html, body {
              font-size: 14px;
          }
      }
      @media (min-width: 481px) {
          html, body {
              font-size: 16px;
          }
      }

      .touch-target {
          min-height: 44px;
          min-width: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .pt-safe {
          padding-top: max(16px, env(safe-area-inset-top));
      }
    </style>
    <script type="module" crossorigin src="/assets/index-onS2UGuj.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CFuUOIqL.css">
  </head>
<body>
  <div id="root">
    <!-- Static initial loading screen - shows before React loads -->
    <div id="initial-loader" style="position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); z-index: 9999;">
      <div style="animation: pulse 2s ease-in-out infinite;">
        <img src="/CBL-192.png" alt="CityBucketList Logo" style="width: 80px; height: 80px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);" onerror="this.style.display='none'">
      </div>
      <div id="loader-text" style="margin-top: 24px; font-size: 16px; color: #94a3b8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
        Loading CityBucketList...
      </div>
      <div id="loader-subtext" style="margin-top: 8px; font-size: 14px; color: #64748b; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; display: none;">
      </div>
      <!-- Retry button - hidden by default, shown after timeout -->
      <button id="retry-button" onclick="window.location.reload()" style="display: none; margin-top: 24px; padding: 12px 28px; font-size: 15px; font-weight: 600; color: #0f172a; background: linear-gradient(135deg, #14b8a6 0%, #22c55e 100%); border: none; border-radius: 10px; cursor: pointer; box-shadow: 0 4px 15px rgba(20, 184, 166, 0.3);">
        Retry
      </button>
      <!-- Offline notice for drivers -->
      <div id="offline-driver-notice" style="display: none; margin-top: 20px; padding: 12px 16px; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 8px; max-width: 300px; text-align: center;">
        <span style="font-size: 13px; color: #fbbf24; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
          🚗 Drivers: Your active ride details are saved locally
        </span>
      </div>
    </div>
    <style>
      @keyframes pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.7; transform: scale(0.95); }
      }
    </style>
  </div>
  
  <!-- Network status detection and timeout handling -->
  <script>
    (function() {
      var appLoaded = false;
      var isOffline = !navigator.onLine;
      var loaderText = document.getElementById('loader-text');
      var loaderSubtext = document.getElementById('loader-subtext');
      var retryButton = document.getElementById('retry-button');
      var driverNotice = document.getElementById('offline-driver-notice');
      
      // Mark app as loaded when React mounts
      window.markAppLoaded = function() {
        appLoaded = true;
        var loader = document.getElementById('initial-loader');
        if (loader) {
          loader.style.opacity = '0';
          loader.style.transition = 'opacity 0.3s ease';
          setTimeout(function() { loader.style.display = 'none'; }, 300);
        }
      };
      
      // Update UI based on network status
      function updateNetworkStatus() {
        isOffline = !navigator.onLine;
        if (isOffline && !appLoaded) {
          loaderText.textContent = "You're offline";
          loaderSubtext.textContent = "Please check your internet connection";
          loaderSubtext.style.display = 'block';
          retryButton.style.display = 'block';
          driverNotice.style.display = 'block';
        }
      }
      
      // Listen for online/offline events
      window.addEventListener('online', function() {
        isOffline = false;
        if (!appLoaded) {
          loaderText.textContent = "Reconnected! Loading...";
          loaderSubtext.style.display = 'none';
          retryButton.style.display = 'none';
          driverNotice.style.display = 'none';
          // Auto-reload after brief delay
          setTimeout(function() { window.location.reload(); }, 500);
        }
      });
      
      window.addEventListener('offline', function() {
        updateNetworkStatus();
      });
      
      // Initial check
      updateNetworkStatus();
      
      // Timeout stages: 8s "taking longer", 15s "trouble loading" with retry
      setTimeout(function() {
        if (!appLoaded && !isOffline) {
          loaderText.textContent = "Taking longer than usual...";
          loaderSubtext.textContent = "Please wait or check your connection";
          loaderSubtext.style.display = 'block';
        }
      }, 8000);
      
      setTimeout(function() {
        if (!appLoaded) {
          if (isOffline) {
            loaderText.textContent = "You're offline";
            loaderSubtext.textContent = "Connect to the internet and try again";
          } else {
            loaderText.textContent = "Having trouble loading";
            loaderSubtext.textContent = "Your connection may be slow or unstable";
          }
          loaderSubtext.style.display = 'block';
          retryButton.style.display = 'block';
          driverNotice.style.display = 'block';
        }
      }, 15000);
    })();
  </script>
  
  <script>
    (function() {
      // Conditionally load remote script on production hosts only
      if (['lovableproject.com', 'lovable.app', 'citybucketlist.com', 'app.citybucketlist.com'].some(function(h) { return location.hostname.includes(h); })) {
        var s = document.createElement('script');
        s.src = 'https://cdn.gpteng.co/gptengineer.js';
        s.type = 'module';
        s.crossOrigin = 'anonymous';
        document.head.appendChild(s);
      }
    })();
  </script>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
          .then(registration => {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
            
            // Pass Firebase config to service worker if available
            if (window.ENV && window.ENV.VITE_FIREBASE_API_KEY) {
              registration.active?.postMessage({
                type: 'SET_FIREBASE_CONFIG',
                payload: {
                  apiKey: window.ENV.VITE_FIREBASE_API_KEY,
                  authDomain: window.ENV.VITE_FIREBASE_AUTH_DOMAIN,
                  projectId: window.ENV.VITE_FIREBASE_PROJECT_ID,
                  storageBucket: window.ENV.VITE_FIREBASE_STORAGE_BUCKET,
                  messagingSenderId: window.ENV.VITE_FIREBASE_MESSAGING_SENDER_ID,
                  appId: window.ENV.VITE_FIREBASE_APP_ID,
                  measurementId: window.ENV.VITE_FIREBASE_MEASUREMENT_ID
                }
              });
            }
          })
          .catch(err => {
            console.log('ServiceWorker registration failed: ', err);
          });
      });
    }
  </script>
</body>
</html>
