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

const rootElement = document.getElementById('root');

if (!rootElement) {
  console.error('Root element not found. Ensure index.html has <div id="root"></div>');
  document.body.innerHTML = '<div style="color: red; padding: 2rem; font-family: monospace;">Error: Root element not found</div>';
} else {
  try {
    createRoot(rootElement).render(
      <StrictMode>
        <ErrorBoundary>
          <App />
        </ErrorBoundary>
      </StrictMode>
    );
  } catch (error) {
    console.error('Failed to render React app:', error);
    rootElement.innerHTML = '<div style="color: red; padding: 2rem; font-family: monospace;">Error: Failed to initialize app</div>';
  }
}