// src/App.jsx
import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './components/Home';
import About from './components/About';
import Roadmap from './components/Roadmap';
import RoadmapDetail from './components/RoadmapDetail'; // Import the RoadmapDetail component

const App = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  const handleMenuToggle = (isOpen) => {
    setMenuOpen(isOpen);
  };

  return (
    <Router>
      <Header onMenuToggle={handleMenuToggle} />
      <main className={`page-content ${menuOpen ? 'dropdown-active' : ''}`}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/roadmap" element={<Roadmap />}>
            <Route path=":id" element={<RoadmapDetail />} />
          </Route>
        </Routes>
      </main>
      <Footer />
    </Router>
  );
};

export default App;