import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

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

if (!rootElement) {
  console.error("Fatal: Root element #root not found in the document.");
} else {
  try {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
  } catch (err) {
    console.error("Fatal error during React mounting:", err);
    rootElement.innerHTML = `<div style="padding: 20px; color: #333; font-family: sans-serif;">
      <h2>Erro ao carregar experiência</h2>
      <p>Ocorreu um erro técnico. Por favor, recarregue a página.</p>
    </div>`;
  }
}