import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Navigation from './components/Navigation.jsx'
import navigationData from './config/navigation.json'

// Dynamically import components
import NewHome from './components/NewHome.jsx'
import TierSHPage from './components/TierSHPage.jsx'
import ProductsPage from './components/ProductsPage.jsx'
import TechnologyPage from './components/TechnologyPage.jsx'
import RegisterPage from './components/RegisterPage.jsx'
import Blog from './components/Blog.jsx'
import BlogPost from './components/BlogPost.jsx'

const componentMap = {
  NewHome,
  TierSHPage,
  ProductsPage,
  TechnologyPage,
  RegisterPage,
  Blog,
  BlogPost,
}

function App() {
  return (
    <Router>
      <Navigation />
      <main className="pt-16">
        <Routes>
          <Route path="/" element={<NewHome />} />
          <Route path="/tiers" element={<TierSHPage />} />
          {navigationData.map((item) => {
            const Component = componentMap[item.component]
            // Skip the old home page route if it exists in navigationData
            if (item.path === '/') return null;
            return <Route key={item.path} path={item.path} element={<Component />} />
          })}
          <Route path="/blog/:slug" element={<BlogPost />} />
        </Routes>
      </main>
    </Router>
  )
}

export default App