import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './pages/Home';
import How from './pages/How';
import GetStarted from './pages/GetStarted';
import Technology from './pages/Technology';
import Freezone from './pages/Freezone';
import Blog from './pages/Blog';
import BlogPost from './pages/BlogPost';
import './App.css';

function App() {
  return (
    <Router basename={import.meta.env.VITE_APP_BASE_URL}>
      <div className="dark min-h-screen bg-black text-white">
        <Navigation />
        <main className="pt-20">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/how" element={<How />} />
            <Route path="/get-started" element={<GetStarted />} />
            <Route path="/technology" element={<Technology />} />
            <Route path="/freezone" element={<Freezone />} />
            <Route path="/freezone/:slug" element={<BlogPost />} />
            <Route path="/blog" element={<Blog />} />
            <Route path="/blog/:category/:slug" element={<BlogPost />} />
            <Route path="/component/:slug" element={<BlogPost />} />
            <Route path="/technology/:slug" element={<BlogPost />} />
            <Route path="/home/:slug" element={<BlogPost />} />
          </Routes>
        </main>
      </div>
    </Router>
  );
}

export default App;