import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { lazy, Suspense } from 'react';

const HomePage = lazy(() => import('./pages/home/HomePage'));
const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
const NetworkPage = lazy(() => import('./pages/network/NetworkPage'));
const AgentsPage = lazy(() => import('./pages/agents/AgentsPage'));
const DownloadPage = lazy(() => import('./pages/download/DownloadPage'));
const ComputePage = lazy(() => import('./pages/compute/ComputePage'));
const StoragePage = lazy(() => import('./pages/storage/StoragePage'));
const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<HomePage />} />
            <Route path="cloud" element={<CloudPage />} />
            <Route path="network" element={<NetworkPage />} />
            <Route path="agents" element={<AgentsPage />} />
            <Route path="download" element={<DownloadPage />} />
            <Route path="compute" element={<ComputePage />} />
            <Route path="storage" element={<StoragePage />} />
            <Route path="gpu" element={<GpuPage />} />
          </Route>
        </Routes>
      </Suspense>
    </BrowserRouter>
  )
}

export default App