import "./instrument"; // Sentry must init before any other imports

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { reactErrorHandler } from '@sentry/react'
import { HelmetProvider } from 'react-helmet-async'
import { Toaster } from 'sonner'
import './index.css'
import App from './App'

createRoot(document.getElementById('root')!, {
  onUncaughtError: reactErrorHandler(),
  onCaughtError: reactErrorHandler(),
  onRecoverableError: reactErrorHandler(),
}).render(
  <StrictMode>
    <HelmetProvider>
      {/* Toast notification system - theme syncs automatically via CSS custom properties */}
      <Toaster
        position="top-right"
        expand={false}
        closeButton
        visibleToasts={3}
        gap={8}
        theme="dark"
        toastOptions={{
          className: 'sonner-toast-custom',
        }}
      />
      <App />
    </HelmetProvider>
  </StrictMode>,
)