<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BoH Concepts ERP Suite</title>
    <meta name="description" content="BoH Concepts ERP Suite" />
    <meta name="author" content="BoH" />
    <link rel="icon" type="image/png" href="/logo/Compass.png" />
    <link rel="shortcut icon" type="image/png" href="/logo/Compass.png" />

    <meta property="og:title" content="BoH Concepts ERP Suite" />
    <meta property="og:description" content="BoH Concepts ERP Suite" />
    <meta property="og:type" content="website" />
    <meta
      property="og:image"
      content="https://boh.ai/opengraph-image-p98pqg.png"
    />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@boh_ai" />
    <meta
      name="twitter:image"
      content="https://boh.ai/opengraph-image-p98pqg.png"
    />
    
    <!-- PWA Manifest for better mobile support -->
    <link rel="manifest" href="/manifest.json" />
    
    <!-- Mobile web app meta tags for better iPad support -->
    <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="default" />
    <meta name="apple-mobile-web-app-title" content="BoH ERP" />
    <meta name="theme-color" content="#000000" />
    <script type="module" crossorigin src="/assets/index-yKjQo2GM.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-BZCvdt-I.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-CErySsI9.js">
    <link rel="modulepreload" crossorigin href="/assets/query-uZhkZUV8.js">
    <link rel="modulepreload" crossorigin href="/assets/router-Dy_BqTzl.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DcFMKeLP.css">
  </head>

  <body>
    <div id="root"></div>
    <!-- Add module loading with error handling -->
    <script nomodule>
      // Fallback for browsers that don't support ES modules
      alert('Your browser does not support ES modules. Please update your browser or use a modern browser like Chrome, Firefox, Safari, or Edge.');
    </script>
    
    <!-- Module loading error handler -->
    <script>
      function handleModuleError(event) {
        console.error('Module loading failed:', event);
        
        // Show user-friendly error message
        const errorDiv = document.createElement('div');
        errorDiv.style.cssText = `
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: #f8d7da;
          color: #721c24;
          padding: 20px;
          border-radius: 8px;
          border: 1px solid #f5c6cb;
          max-width: 400px;
          text-align: center;
          z-index: 9999;
          font-family: Arial, sans-serif;
        `;
        errorDiv.innerHTML = `
          <h3>Loading Error</h3>
          <p>There was an issue loading the application. This might be due to:</p>
          <ul style="text-align: left; margin: 10px 0;">
            <li>Network connectivity issues</li>
            <li>Browser compatibility</li>
            <li>Cached files that need refreshing</li>
          </ul>
          <button onclick="location.reload()" style="
            background: #721c24;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
          ">Refresh Page</button>
        `;
        document.body.appendChild(errorDiv);
      }
      
      // Also handle unhandled promise rejections
      window.addEventListener('unhandledrejection', function(event) {
        console.error('Unhandled promise rejection:', event.reason);
        if (event.reason && event.reason.message && event.reason.message.includes('module')) {
          handleModuleError(event);
        }
      });
    </script>
    
    <!-- Register service worker for better caching on mobile -->
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('/sw.js')
            .then((registration) => {
              console.log('SW registered: ', registration);
            })
            .catch((registrationError) => {
              console.log('SW registration failed: ', registrationError);
            });
        });
      }
    </script>
  </body>
</html>
