import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import TrekList from './components/TrekList';
import TrekDetail from './components/TrekDetail';
import BookingForm from './components/BookingForm';
import BookingList from './components/BookingList';

function App() {
  return (
    <BrowserRouter>
      <div className="min-h-screen flex flex-col bg-stone-50">
        <Header />
        <main className="flex-1 max-w-6xl mx-auto px-4 py-8 w-full">
          <Routes>
            <Route path="/" element={<TrekList />} />
            <Route path="/treks/:id" element={<TrekDetail />} />
            <Route path="/book/:trekId" element={<BookingForm />} />
            <Route path="/bookings" element={<BookingList />} />
          </Routes>
        </main>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

export default App;