<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/image.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mobile-First Website Development</title>
    <meta property="og:image" content="https://bolt.new/static/og_default.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="https://bolt.new/static/og_default.png">
    <link rel="preconnect" href="https://wxgfsthvkknhtjddfzke.supabase.co" crossorigin>
    <link rel="dns-prefetch" href="https://wxgfsthvkknhtjddfzke.supabase.co">
    <link rel="preconnect" href="https://wxgfsthvkknhtjddfzke.supabase.co/storage/v1" crossorigin>
    <link rel="dns-prefetch" href="https://ipapi.co">
    <script>
      (function() {
        try {
          const heroCache = localStorage.getItem('cache_hero_section');
          if (heroCache) {
            const { data, timestamp } = JSON.parse(heroCache);
            const age = Date.now() - timestamp;
            if (age < 300000 && data && data.is_visible && data.background_image_url) {
              const link = document.createElement('link');
              link.rel = 'preload';
              link.as = 'image';
              link.href = data.background_image_webp_url || data.background_image_url;
              link.setAttribute('fetchpriority', 'high');
              document.head.appendChild(link);
            }
          }
        } catch (e) {}
      })();
    </script>
    <style>
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
      #root { min-height: 100vh; }
      #app-preloader {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.6);
      }
      #app-preloader img {
        max-width: 200px;
        max-height: 200px;
        width: auto;
        height: auto;
        -o-object-fit: contain;
           object-fit: contain;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        will-change: opacity;
      }
      #app-preloader .default-spinner {
        width: 48px;
        height: 48px;
        border: 2px solid transparent;
        border-bottom-color: #1f2937;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        will-change: transform;
      }
      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
      }
      @keyframes spin {
        to { transform: rotate3d(0, 0, 1, 360deg); }
      }
    </style>
    <script type="module" crossorigin src="/assets/index-_fxzJBuW.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-gfKFF5Er.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-router-CdfDmqzH.js">
    <link rel="stylesheet" crossorigin href="/assets/index-BTWB63E2.css">
  <script async src="https://bolt.new/badge.js?s=07f82597-c1dd-4364-a4df-4ee6004b60d6"></script></head>
  <body>
    <div id="app-preloader">
      <div class="default-spinner"></div>
    </div>
    <script>
      (function() {
        // Safety timeout: remove preloader after 10 seconds even if app fails to load
        setTimeout(function() {
          const preloader = document.getElementById('app-preloader');
          if (preloader) {
            console.warn('[Preloader] Safety timeout - removing preloader');
            preloader.remove();
          }
        }, 10000);

        try {
          const cached = localStorage.getItem('throbber_settings_cache');
          if (cached) {
            const { settings } = JSON.parse(cached);
            if (settings && settings.enabled && settings.image_url) {
              const preloader = document.getElementById('app-preloader');
              if (preloader) {
                const img = document.createElement('img');
                img.src = settings.image_url;
                img.alt = 'Loading...';
                preloader.innerHTML = '';
                preloader.appendChild(img);
              }
            }
          }
        } catch (e) {
          console.error('[Preloader] Error:', e);
        }
      })();
    </script>
    <div id="root"></div>
  </body>
</html>
