import { createRoot } from 'react-dom/client';

// Import polyfills first
import './lib/polyfills.ts';

import { ErrorBoundary } from '@/components/ErrorBoundary';
import App from './App.tsx';
import './index.css';

// Outfit font for body text
import '@fontsource-variable/outfit';
// Bebas Neue — bold condensed display font for headlines
import '@fontsource/bebas-neue';
// Barlow Condensed — tight condensed font for subheadings and UI labels
import '@fontsource/barlow-condensed/400.css';
import '@fontsource/barlow-condensed/600.css';
import '@fontsource/barlow-condensed/700.css';

// Leaflet CSS is loaded via CDN in index.html to avoid build issues

/**
 * AMBER CALLBACK PRE-CHECK
 * 
 * PWAs can sometimes lose URL parameters during React hydration.
 * This runs BEFORE React renders to capture Amber callback data.
 * We store it in sessionStorage so the AmberCallbackHandler can retrieve it.
 */
(function captureAmberCallback() {
  const params = new URLSearchParams(window.location.search);
  const event = params.get('event');
  
  if (event) {
    console.log('[Amber Pre-Check] Detected Amber callback in URL');
    console.log('[Amber Pre-Check] Full URL:', window.location.href);
    console.log('[Amber Pre-Check] Event param:', event);
    
    // Store the callback data immediately before React can interfere
    try {
      sessionStorage.setItem('amber_callback_event', event);
      sessionStorage.setItem('amber_callback_url', window.location.href);
      sessionStorage.setItem('amber_callback_timestamp', Date.now().toString());
      console.log('[Amber Pre-Check] Stored callback data in sessionStorage');
    } catch (e) {
      console.error('[Amber Pre-Check] Failed to store callback:', e);
    }
  }
})();

createRoot(document.getElementById("root")!).render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>
);