<!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-De8sv4zV.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-C7z_5UhL.css">
  </head>
  <body>
    <div id="root">
      <!-- Static loading screen shown before React initializes -->
      <div
        id="initial-loader"
        style="
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        height: 100dvh;
        background: #000;
        gap: 16px;
      "
      >
        <img
          src="/CBL-512.png"
          alt="CityBucketList"
          style="
            width: 80px;
            height: 80px;
            animation: loader-pulse 1.5s ease-in-out infinite;
          "
        />
        <p
          style="
          color: #CE8D19;
          font-family: system-ui, -apple-system, sans-serif;
          font-size: 14px;
          margin: 0;
        "
        >
          Loading...
        </p>
        <div
          id="network-status"
          style="
          color: #888;
          font-family: system-ui, -apple-system, sans-serif;
          font-size: 12px;
          margin-top: 8px;
          display: none;
        "
        ></div>
      </div>
      <style>
        @keyframes loader-pulse {
          0%, 100% { transform: scale(1); opacity: 1; }
          50% { transform: scale(1.05); opacity: 0.8; }
        }
      </style>
      <script>
        // Network status detection for loading screen
        (function() {
          var statusEl = document.getElementById('network-status');
          var timeout;

          function updateStatus() {
            if (!statusEl) return;
            if (!navigator.onLine) {
              statusEl.style.display = 'block';
              statusEl.textContent = 'You appear to be offline. Please check your connection.';
              statusEl.style.color = '#ef4444';
            } else if (navigator.connection && navigator.connection.effectiveType) {
              var type = navigator.connection.effectiveType;
              if (type === 'slow-2g' || type === '2g') {
                statusEl.style.display = 'block';
                statusEl.textContent = 'Slow connection detected. Loading may take longer.';
                statusEl.style.color = '#f59e0b';
              }
            }
          }

          // Show loading timeout message after 10 seconds
          timeout = setTimeout(function() {
            if (document.getElementById('initial-loader')) {
              statusEl.style.display = 'block';
              if (!navigator.onLine) {
                statusEl.innerHTML = 'Unable to connect. <button onclick="location.reload()" style="color:#CE8D19;text-decoration:underline;background:none;border:none;cursor:pointer;">Retry</button>';
              } else {
                statusEl.innerHTML = 'Taking longer than usual... <button onclick="location.reload()" style="color:#CE8D19;text-decoration:underline;background:none;border:none;cursor:pointer;">Retry</button>';
              }
            }
          }, 10000);

          window.addEventListener('online', updateStatus);
          window.addEventListener('offline', updateStatus);
          updateStatus();

          // Clear timeout when React mounts
          window.__clearLoaderTimeout = function() {
            clearTimeout(timeout);
          };
        })();
      </script>
    </div>
    <!-- Lovable script tag for new features -->
    <script>
      (function(){
        try {
          var prodHosts = ['app.citybucketlist.com','citybucketlist.com'];
          if (prodHosts.indexOf(location.hostname) !== -1) {
            var s = document.createElement('script');
            s.src = 'https://cdn.gpteng.co/gptengineer.js';
            s.type = 'module';
            document.head.appendChild(s);
          }
        } catch (e) { /* ignore */ }
      })();
    </script>
    <script>
      // Register Service Worker for PWA support
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', async () => {
          try {
            const registration = await navigator.serviceWorker.register('/service-worker.js', {
              scope: '/',
              updateViaCache: 'none'
            });
            console.log('ServiceWorker registration successful with scope:', registration.scope);

            // Wait for activation with timeout
            if (registration.installing) {
              await new Promise((resolve, reject) => {
                const timeout = setTimeout(() => reject(new Error('Activation timeout')), 5000);
                registration.installing.addEventListener('statechange', function() {
                  if (this.state === 'activated') {
                    clearTimeout(timeout);
                    resolve(true);
                  } else if (this.state === 'redundant') {
                    clearTimeout(timeout);
                    reject(new Error('Service Worker became redundant'));
                  }
                });
              });
            }

            // Send Firebase config to the Service Worker
            const sendConfig = () => {
              try {
                const E = globalThis.__ENV__ || {};
                const cfg = {
                  apiKey: E.VITE_FIREBASE_API_KEY,
                  authDomain: E.VITE_FIREBASE_AUTH_DOMAIN,
                  projectId: E.VITE_FIREBASE_PROJECT_ID,
                  storageBucket: E.VITE_FIREBASE_STORAGE_BUCKET,
                  messagingSenderId: E.VITE_FIREBASE_MESSAGING_SENDER_ID,
                  appId: E.VITE_FIREBASE_APP_ID,
                  vapidKey: E.VITE_FIREBASE_VAPID_KEY,
                };
                if (registration.active) {
                  registration.active.postMessage({ type: 'SET_FIREBASE_CONFIG', payload: cfg });
                }
              } catch (e) {
                console.warn('Failed to post Firebase config to SW:', e);
              }
            };

            sendConfig();
            navigator.serviceWorker.addEventListener('controllerchange', sendConfig);
          } catch (error) {
            console.error('ServiceWorker registration/activation failed:', error);
          }
        });
      }
    </script>
  </body>
</html>
