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

// Verify root element exists
const rootElement = document.getElementById('root');

if (!rootElement) {
  throw new Error(
    'Failed to find root element. Ensure index.html contains <div id="root"></div>'
  );
}

// Create root and render app with error boundary
const root = ReactDOM.createRoot(rootElement);

try {
  root.render(
    <App />
  );
} catch (error) {
  console.error('Fatal error during React initialization:', error);
  
  // Display user-friendly error
  rootElement.innerHTML = `
    <div style="
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #0f172a, #1e293b);
      color: white;
      font-family: system-ui, -apple-system, sans-serif;
      padding: 2rem;
      text-align: center;
    ">
      <h1 style="font-size: 2rem; margin-bottom: 1rem; color: #d4af37;">
        ⚠️ Application Error
      </h1>
      <p style="max-width: 600px; line-height: 1.6; color: rgba(255, 255, 255, 0.8);">
        STRATON Investment encountered an error during initialization.
        Please refresh the page or contact support if the problem persists.
      </p>
      <button 
        onclick="window.location.reload()" 
        style="
          margin-top: 2rem;
          padding: 0.75rem 2rem;
          background: linear-gradient(135deg, #f4d03f, #d4af37);
          border: none;
          border-radius: 0.5rem;
          color: #0f172a;
          font-weight: 700;
          cursor: pointer;
          transition: transform 0.2s;
        "
        onmouseover="this.style.transform='translateY(-2px)'"
        onmouseout="this.style.transform='translateY(0)'"
      >
        Reload Page
      </button>
    </div>
  `;
}

// Hot Module Replacement (HMR) for development
if (import.meta.hot) {
  import.meta.hot.accept();
}