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

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

if (!rootElement) {
  console.error("Critical: #root element not found in DOM");
} else {
  try {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
  } catch (error) {
    console.error("Fatal error rendering React application:", error);
    rootElement.innerHTML = `
      <div style="padding: 30px; font-family: sans-serif; color: #b94a2c;">
        <h2>Application Render Error</h2>
        <pre style="background: #f8f4ec; padding: 15px; border-radius: 8px;">${error.message}\n${error.stack}</pre>
      </div>
    `;
  }
}