import React from 'react';
import { MemoryRouter, Routes, Route, Link, NavLink } from 'react-router-dom'; // Changed HashRouter to MemoryRouter
import { Sidebar } from './components/Sidebar';
import { HomePage } from './pages/HomePage';
import { IntroductionPage } from './pages/IntroductionPage';
import { CoreConceptsPage } from './pages/CoreConceptsPage';
import { ValuePage } from './pages/api/ValuePage';
import { TablePage } from './pages/api/TablePage';
import { MapPage } from './pages/api/MapPage';
import { ComputedPage } from './pages/api/ComputedPage';
import { ObserverPage } from './pages/api/ObserverPage';
import { WatchPage } from './pages/api/WatchPage';
import { EffectPage } from './pages/api/EffectPage';
import { ReactionPage } from './pages/api/ReactionPage';
import { ReactorPage } from './pages/api/ReactorPage';
import { ComposePage } from './pages/api/ComposePage';
import { UtilitiesPage } from './pages/api/UtilitiesPage';
import { SymbolsPage } from './pages/api/SymbolsPage';
import { NAV_LINKS } from './constants';

const App: React.FC = () => {
  return (
    <MemoryRouter> {/* Changed HashRouter to MemoryRouter */}
      <div className="flex h-screen bg-gray-900 text-gray-100">
        <Sidebar navLinks={NAV_LINKS} />
        <main className="flex-1 p-6 sm:p-8 overflow-y-auto">
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/introduction" element={<IntroductionPage />} />
            <Route path="/core-concepts" element={<CoreConceptsPage />} />
            <Route path="/api/value" element={<ValuePage />} />
            <Route path="/api/table" element={<TablePage />} />
            <Route path="/api/map" element={<MapPage />} />
            <Route path="/api/computed" element={<ComputedPage />} />
            <Route path="/api/observer" element={<ObserverPage />} />
            <Route path="/api/watch" element={<WatchPage />} />
            <Route path="/api/effect" element={<EffectPage />} />
            <Route path="/api/reaction" element={<ReactionPage />} />
            <Route path="/api/reactor" element={<ReactorPage />} />
            <Route path="/api/compose" element={<ComposePage />} />
            <Route path="/api/utilities" element={<UtilitiesPage />} />
            <Route path="/api/symbols" element={<SymbolsPage />} />
          </Routes>
        </main>
      </div>
    </MemoryRouter> {/* Changed HashRouter to MemoryRouter */}
  );
};

export default App;