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

const root = ReactDOM.createRoot(document.getElementById('root'))

function renderStartupError(error) {
  const message = String(error && error.message ? error.message : error)
  root.render(
    <div style={{ padding: 40, fontFamily: 'system-ui, -apple-system, sans-serif', background: '#0f1b2d', color: '#e2e8f0', minHeight: '100vh', boxSizing: 'border-box' }}>
      <h1 style={{ fontSize: 22, margin: '0 0 12px', color: '#ff6b6b' }}>App failed to start</h1>
      <pre style={{ whiteSpace: 'pre-wrap', fontSize: 13, color: '#cbd5e1', margin: 0 }}>{message}</pre>
      <p style={{ fontSize: 13, color: '#9aaec0', marginTop: 20, lineHeight: 1.5 }}>
        If this is a deployment, set the required environment variables
        (<code>VITE_SUPABASE_URL</code> and <code>VITE_SUPABASE_ANON_KEY</code>)
        in your hosting provider's settings and redeploy.
      </p>
    </div>
  )
}

import('./App')
  .then(({ default: App }) => {
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    )
  })
  .catch(renderStartupError)