import { useState } from 'react'
import Sidebar from './components/Sidebar.jsx'
import Dashboard from './components/Dashboard.jsx'
import LiveTracking from './components/LiveTracking.jsx'
import Trips from './components/Trips.jsx'
import PreTravel from './components/PreTravel.jsx'
/**
 * App — root layout component.
 * Implements a two-panel CSS Grid: fixed sidebar + scrollable main viewport.
 * Owns the active-page state so sidebar navigation drives content rendering.
 */
export default function App() {
  const [activePage, setActivePage] = useState('dashboard')

  function renderPage() {
    switch (activePage) {
      case 'live-tracking': return <LiveTracking />
      case 'trips': return <Trips />
      case 'pre-travel': return <PreTravel />
      default: return <Dashboard />
    }
  }

  return (
    <div className="app-shell">
      <Sidebar activePage={activePage} onNavigate={setActivePage} />
      <main className="main-viewport">
        {renderPage()}
      </main>
    </div>
  )
}