import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { Layout } from './components/Layout'
import { Landing } from './pages/Landing'
import { Technology } from './pages/Technology'
import { UseCases } from './pages/UseCases'
import { MyDevice } from './pages/MyDevice'
import { Templates } from './pages/Templates'
import { Playground } from './pages/Playground'
import { Models } from './pages/Models'
import { Settings } from './pages/Settings'

function App() {
  return (
    <Router>
      <Routes>
        {/* Landing page without sidebar */}
        <Route path="/" element={<Landing />} />
        
        {/* Technology page without sidebar */}
        <Route path="/technology" element={<Technology />} />
        
        {/* Use Cases page without sidebar */}
        <Route path="/usecases" element={<UseCases />} />
        
        {/* My Device page without sidebar */}
        <Route path="/mydevice" element={<MyDevice />} />
        
        {/* App pages with sidebar layout */}
        <Route path="/" element={<Layout />}>
          <Route path="templates" element={<Templates />} />
          <Route path="playground" element={<Playground />} />
          <Route path="models" element={<Models />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </Router>
  )
}

export default App