import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import { routerFuture } from './routerFuture';
import ErrorBoundary from './components/ErrorBoundary';
import './styles/global.css';
import './styles/steampunk-theme.css';
import './styles/sacred-geometry.css';
import './styles/wealth-deck.css';
import './styles/mobile.css';
import './pages/Pages.css';
import './styles/visual-polish.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ErrorBoundary
      fallback={
        <div className="session-gate">
          <div className="session-gate-card card">
            <h1 className="font-display">AetherForge</h1>
            <p className="form-hint">The dashboard failed to load. Hard-refresh (Ctrl+Shift+R) or clear site data for this host.</p>
            <button type="button" className="btn btn-primary" onClick={() => window.location.reload()}>
              Reload
            </button>
          </div>
        </div>
      }
    >
      <BrowserRouter future={routerFuture}>
        <App />
      </BrowserRouter>
    </ErrorBoundary>
  </React.StrictMode>
);