import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navigation from './components/Navigation';
import Footer from './components/Footer';
import Home from './pages/Home';
import Impressum from './pages/Impressum';
import Datenschutz from './pages/Datenschutz';
import AccessRequest from './pages/AccessRequest';
import RestrictedArea from './pages/RestrictedArea';
import AdminDashboard from './pages/AdminDashboard';
import Login from './pages/Login';
import ProtectedRoute from './components/ProtectedRoute';
import UseCases from './pages/UseCases';
import BottomDock from './components/BottomDock';
import BackgroundPattern from './components/BackgroundPattern';
import ScrollToTop from './components/ScrollToTop';

function App() {
  return (
    <Router>
      <ScrollToTop />
      <div className="app-root">
        <BackgroundPattern />
        <Navigation />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/impressum" element={<Impressum />} />
          <Route path="/datenschutz" element={<Datenschutz />} />
          <Route path="/request-access" element={<AccessRequest />} />
          <Route path="/login" element={<Login />} />
          <Route path="/restricted" element={
            <ProtectedRoute allowedRoles={['admin', 'investor']}>
              <RestrictedArea />
            </ProtectedRoute>
          } />
          <Route path="/admin" element={
            <ProtectedRoute allowedRoles={['admin']}>
              <AdminDashboard />
            </ProtectedRoute>
          } />
          <Route path="/usecases" element={<UseCases />} />
        </Routes>
        <Footer />
        <BottomDock />
      </div>
    </Router>
  );
}

export default App;