import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Dashboard from './pages/Dashboard';
import Search from './pages/Search';
import Timeline from './pages/Timeline';
import Roadmap from './pages/Roadmap';
import AlgorithmDetail from './pages/AlgorithmDetail';

function App() {
  return (
    <Router>
      <div className="min-h-screen bg-gray-50 flex flex-col">
        <Navbar />
        <main className="container mx-auto px-4 py-8 flex-grow">
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/search" element={<Search />} />
            <Route path="/timeline" element={<Timeline />} />
            <Route path="/roadmap" element={<Roadmap />} />
            <Route path="/algorithm/:algorithmId" element={<AlgorithmDetail />} />
          </Routes>
        </main>
        <footer className="bg-white border-t border-gray-200 py-4">
          <div className="container mx-auto px-4 text-center text-sm text-gray-600">
            made by{' '}
            <a 
              href="https://www.linkedin.com/in/aleksander-obuchowski/" 
              target="_blank" 
              rel="noopener noreferrer"
              className="text-blue-600 hover:text-blue-800 underline"
            >
              Aleksander Obuchowski
            </a>
            {' '}@{' '}
            <a 
              href="https://thelion.ai" 
              target="_blank" 
              rel="noopener noreferrer"
              className="text-blue-600 hover:text-blue-800 underline"
            >
              thelion.ai
            </a>
          </div>
        </footer>
      </div>
    </Router>
  );
}

export default App;