import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Landing from './pages/Landing.jsx';
import Dashboard from './pages/Dashboard.jsx';
import Senders from './pages/Senders.jsx';
import Cleanup from './pages/Cleanup.jsx';
import Unsubscribe from './pages/Unsubscribe.jsx';
import FolderView from './pages/FolderView.jsx';
import SearchResults from './pages/SearchResults.jsx';
import Layout from './components/Layout.jsx';
import DesignSystem from './pages/DesignSystem.jsx';
import { ToastProvider, TooltipProvider } from './components/ui';
import '@fontsource-variable/inter';
import './index.css';
import './styles.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ToastProvider>
      <TooltipProvider delayDuration={200}>
        <BrowserRouter>
          <Routes>
        {/* Public landing page */}
        <Route path="/" element={<Landing />} />

        {/* Authenticated app */}
        <Route path="/app" element={<Layout />}>
          <Route index element={<Dashboard />} />
          <Route path="senders" element={<Senders />} />
          <Route path="cleanup" element={<Cleanup />} />
          <Route path="unsubscribe" element={<Unsubscribe />} />
          <Route path="folder/:slug" element={<FolderView />} />
          <Route path="search" element={<SearchResults />} />
          <Route path="design" element={<DesignSystem />} />
        </Route>

            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
        </BrowserRouter>
      </TooltipProvider>
    </ToastProvider>
  </React.StrictMode>
);