import { Routes, Route } from 'react-router-dom'
import { Layout } from './components/layout/Layout'
import { HomePage } from './pages/HomePage'
import { KnowledgeAreasPage } from './pages/KnowledgeAreasPage'
import { ProcessGroupsPage } from './pages/ProcessGroupsPage'
import { ProcessDetailPage } from './pages/ProcessDetailPage'
import { ProcessMatrixPage } from './pages/ProcessMatrixPage'
import { ProcessGraphPage } from './pages/ProcessGraphPage'
import { ArtifactDetailPage } from './pages/ArtifactDetailPage'
import { ToolDetailPage } from './pages/ToolDetailPage'
import { SettingsPage } from './pages/SettingsPage'
import ProcessPracticePage from './pages/ProcessPracticePage'

function App() {
  return (
    <Layout>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/knowledge-areas" element={<KnowledgeAreasPage />} />
        <Route path="/knowledge-areas/:id" element={<KnowledgeAreasPage />} />
        <Route path="/process-groups" element={<ProcessGroupsPage />} />
        <Route path="/process-groups/:id" element={<ProcessGroupsPage />} />
        <Route path="/process/:id" element={<ProcessDetailPage />} />
        <Route path="/process-matrix" element={<ProcessMatrixPage />} />
        <Route path="/process-graph" element={<ProcessGraphPage />} />
        <Route path="/process-practice" element={<ProcessPracticePage />} />
        <Route path="/artifact/:id" element={<ArtifactDetailPage />} />
        <Route path="/tool/:id" element={<ToolDetailPage />} />
        <Route path="/settings" element={<SettingsPage />} />
      </Routes>
    </Layout>
  )
}

export default App