
<!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-Dw0jS4P6.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-Cw2FjrfK.css">
  </head>
  <body>
    <div id="root"></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>
