import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { ErrorBoundary } from './components/ErrorBoundary';
import './index.css';

try {
  let rootElement = document.getElementById('root');
  if (!rootElement) {
    rootElement = document.createElement('div');
    rootElement.id = 'root';
    document.body.appendChild(rootElement);
  }

  createRoot(rootElement).render(
    <StrictMode>
      <ErrorBoundary>
        <App />
      </ErrorBoundary>
    </StrictMode>
  );
} catch (error) {
  console.error('[GRWF App Mount Error]:', error);
  const root = document.getElementById('root');
  if (root) {
    root.innerHTML = '<div style="min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:sans-serif;color:#1E293B;padding:20px;text-align:center;"><div><h2 style="font-size:20px;font-weight:700;margin-bottom:8px;color:#1E293B;">Global Remote Work Force (GRWF)</h2><p style="color:#526388;font-size:14px;margin-bottom:16px;">Loading application...</p><button onclick="window.location.reload()" style="background:#5C6B8E;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;">Reload Page</button></div></div>';
  }
}