import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { GlobalErrorBoundary } from './components/global/ErrorBoundary'

console.log('[KEYKODERS] production JS loaded')

try {
  console.log('[KEYKODERS] React boot starting')

  const rootElement = document.getElementById('root')

  if (!rootElement) {
    throw new Error('Root element #root was not found')
  }

  createRoot(rootElement).render(
    <StrictMode>
      <GlobalErrorBoundary>
        <App />
      </GlobalErrorBoundary>
    </StrictMode>,
  )

  console.log('[BOOT] React render initiated')
} catch (error) {
  console.error('[BOOT FAILURE]', error)
  document.body.innerHTML = `
    <div style="background:#111;color:#fff;padding:30px;min-height:100vh;font-family:Arial,sans-serif">
      <h1>Application failed to start</h1>
      <pre>${String(error)}</pre>
    </div>
  `
}