import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router';
import App from './App.tsx';
import LandingPage from './pages/LandingPage.tsx';
import AnalysisLoadingPage from './pages/AnalysisLoadingPage.tsx';
import ReportPage from './pages/ReportPage.tsx';
import MarketingPlanPage from './pages/MarketingPlanPage.tsx';
import ContentStudioPage from './pages/ContentStudioPage.tsx';
import ChannelConnectPage from './pages/ChannelConnectPage.tsx';
import DistributionPage from './pages/DistributionPage.tsx';
import PerformancePage from './pages/PerformancePage.tsx';
import DataValidationPage from './pages/DataValidationPage.tsx';
import ClinicProfilePage from './pages/ClinicProfilePage.tsx';
import ApiDashboardPage from './pages/ApiDashboardPage.tsx';
import './index.css';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route element={<App />}>
          <Route index element={<LandingPage />} />
          <Route path="report/loading" element={<AnalysisLoadingPage />} />
          <Route path="report/loading/:reportId" element={<AnalysisLoadingPage />} />
          <Route path="report/:id" element={<ReportPage />} />
          <Route path="plan/:id" element={<MarketingPlanPage />} />
          <Route path="studio/:id" element={<ContentStudioPage />} />
          <Route path="channels" element={<ChannelConnectPage />} />
          <Route path="distribute" element={<DistributionPage />} />
          <Route path="performance" element={<PerformancePage />} />
          <Route path="data-validation" element={<DataValidationPage />} />
          <Route path="clinic/:id" element={<ClinicProfilePage />} />
          <Route path="api-dashboard" element={<ApiDashboardPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  </StrictMode>,
);
