import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './app/globals.css';
import './lib/supabase'; // Initialize Supabase on load (optional, but good for consistency)

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

if (!rootElement) {
  throw new Error("Could not find root element to mount to");
}

try {
  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
} catch (error) {
  console.error('Critical initialization error:', error);
  rootElement.innerHTML = `
    <div style="background:#0F0F0F; color:white; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:sans-serif; text-align:center; padding:20px;">
      <h1 style="color:#DE6A52; font-size:2rem; margin-bottom:1rem;">Platform Recovery</h1>
      <p style="color:#888; margin-bottom:2rem;">The application failed to initialize. This may be due to a script loading error.</p>
      <button onclick="window.location.reload()" style="background:#DE6A52; color:white; border:none; padding:12px 24px; border-radius:12px; font-weight:bold; cursor:pointer;">Retry Loading</button>
    </div>
  `;
}

// Cache bust: 2026-05-31T17:57:00