frontend/src/Router.tsx

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';
import ChemistryLab3D from './labs/ChemistryLab3D';
import MaterialsLab3D from './labs/MaterialsLab3D';
import PhysicsLab3D from './labs/PhysicsLab3D';
import PropulsionLab3D from './labs/PropulsionLab3D';
import BiologyLab3D from './labs/BiologyLab3D';
import AstroLab3D from './labs/AstroLab3D';
import LabSelector from './LabSelector';
import OncologyLab3D from './labs/OncologyLab3D';
import Navbar from './Navbar';

const AppRouter = () => {
    return (
        <BrowserRouter>
            <div className="layout">
                <Navbar />
                <Routes>
                    <Route path="/" element={<LabSelector />} />
                    <Route path="/workflow" element={<App />} />
                    <Route path="/lab/chemistry" element={<ChemistryLab3D />} />
                    <Route path="/lab/materials" element={<MaterialsLab3D />} />
                    <Route path="/lab/physics" element={<PhysicsLab3D />} />
                    <Route path="/lab/propulsion" element={<PropulsionLab3D />} />
                    <Route path="/lab/biology" element={<BiologyLab3D />} />
                    <Route path="/lab/astro" element={<AstroLab3D />} />
                    <Route path="/lab/oncology" element={<OncologyLab3D />} />
                    <Route path="*" element={<div style={{ padding: 20, textAlign: 'center' }}><h1>404: Lab Not Found</h1><p>The requested facility is offline.</p></div>} />
                </Routes>
            </div>
        </BrowserRouter>
    );
};

export default AppRouter;