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

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

if (!rootElement) {
  throw new Error("No se pudo encontrar el elemento raíz para montar la aplicación.");
}

try {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
} catch (error) {
  console.error("Error crítico durante el renderizado:", error);
  rootElement.innerHTML = `
    <div style="padding: 40px; text-align: center; font-family: sans-serif;">
      <h2 style="color: #4e6278;">Error al cargar FranGo</h2>
      <p style="color: #64748b;">Hubo un problema al iniciar la aplicación en este dispositivo.</p>
      <button onclick="window.location.reload()" style="padding: 12px 24px; background: #4e6278; color: white; border: none; border-radius: 12px; font-weight: bold;">
        Reintentar carga
      </button>
    </div>
  `;
}