<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <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="theme-color" content="#00D1FF" />
    <title>ResilientHub</title>
    <link rel="icon" href="data:," />
    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" href="/icon-192.svg" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
    <!-- Add Cesium CSS -->
    <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.106/Build/Cesium/Widgets/widgets.css">
    
    <!-- Configure Cesium base URL -->
    <script>
      window.CESIUM_BASE_URL = 'https://cesium.com/downloads/cesiumjs/releases/1.106/Build/Cesium/';
    </script>
    <style>
      /* Fallback styles to prevent black screen */
      body {
        margin: 0;
        min-height: 100vh;
        background-color: #0F0F29; /* Default dark blue background */
        color: #F1F5F9; /* Default text color */
      }
      body.light {
        background-color: #ffffff;
        color: #0f172a;
      }
      #root {
        min-height: 100vh;
      }
      /* Loading indicator animation */
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
      /* Ensure app is visible */
      .app {
        min-height: 100vh;
        position: relative;
      }
      /* Essential layout to prevent invisible content */
      .main-content {
        padding: 20px;
        min-height: 100vh;
      }
    </style>
    <script type="module" crossorigin src="/assets/index-D97zhD5V.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-CYmOXi5d.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-0YHEARql.js">
    <link rel="stylesheet" crossorigin href="/assets/vendor-D1jpIkaB.css">
    <link rel="stylesheet" crossorigin href="/assets/index-DjeVj3mv.css">
  </head>
  <body class="min-h-screen">
    <div id="root">
      <!-- Loading indicator -->
      <div id="loading-container" style="
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background-color: inherit;
      ">
        <div style="text-align: center;">
          <div style="
            width: 50px;
            height: 50px;
            border: 3px solid rgba(255,255,255,0.1);
            border-top-color: #38bdf8;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
          "></div>
          <p style="opacity: 0.6; font-family: system-ui, -apple-system, sans-serif;">
            Loading ResilientHub...
          </p>
        </div>
      </div>
      <style>
        @keyframes spin {
          to { transform: rotate(360deg); }
        }
      </style>
    </div>
    <script>
      // Error logging for debugging
      window.addEventListener('error', function(e) {
        console.error('Global error:', e.message, e.filename, e.lineno, e.colno);
      });
      
      // Log when React starts rendering
      window.addEventListener('DOMContentLoaded', function() {
        console.log('DOM loaded, waiting for React...');
        
        // Add a timeout to show error if React doesn't mount
        setTimeout(function() {
          var loadingContainer = document.getElementById('loading-container');
          if (loadingContainer && loadingContainer.style.display !== 'none') {
            console.warn('React is taking longer than expected to mount');
            
            // Show error after 30 seconds
            setTimeout(function() {
              if (loadingContainer && loadingContainer.style.display !== 'none') {
                console.error('React failed to mount after 30 seconds');
                
                // Show error message to user
                loadingContainer.innerHTML = '<div style="text-align: center; padding: 20px;">' +
                  '<h2 style="color: #ef4444;">Loading Error</h2>' +
                  '<p>The application is taking too long to load. Please try:</p>' +
                  '<ul style="text-align: left; display: inline-block;">' +
                  '<li>Refreshing the page</li>' +
                  '<li>Clearing your browser cache</li>' +
                  '<li>Checking your internet connection</li>' +
                  '</ul>' +
                  '<br><button onclick="location.reload()" style="padding: 10px 20px; margin-top: 10px; cursor: pointer;">Reload Page</button>' +
                  '</div>';
              }
            }, 20000);
          }
        }, 10000);
      });
    </script>
    
    <!-- Load Cesium directly before the application bundle -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.106/Build/Cesium/Cesium.js"></script>
    
    <!-- Configure Cesium immediately after it loads -->
    <script>
      if (window.Cesium) {
        window.Cesium.buildModuleUrl.setBaseUrl('https://cesium.com/downloads/cesiumjs/releases/1.106/Build/Cesium/');
        window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYzg5NWM1OC04ZTNiLTRkZWYtYmZkYi0xOGIwZWQ5ZDExOTgiLCJpZCI6MzA1OTg1LCJpYXQiOjE3NDgxMjk4NTJ9.SQ0GK0YGZTkdnkHF56hWorbEpVFMyNtxDBkdCNLxPV0';
        console.log('✅ Cesium loaded and configured');
      } else {
        console.warn('❌ Cesium failed to load');
      }
    </script>
  </body>
</html>
