import { Routes, Route, Navigate } from 'react-router-dom'
import { HomePage } from '../features/home/HomePage'
import { DocsPage } from '../features/docs/DocsPage'
import { Header } from '../features/home/components/Header'
import { useTheme } from '../shared/lib/useTheme'

export default function App() {
  const { theme, toggleTheme } = useTheme()

  return (
    <>
      <a href="#main-content" className="skip-link">
        Skip to main content
      </a>
      <div className="page-viewport">
        <div className="page-shell flex flex-col min-h-screen">
          <Header theme={theme} onToggleTheme={toggleTheme} />
          <div id="main-content" className="flex-1">
            <Routes>
              <Route path="/" element={<HomePage />} />
              <Route index element={<HomePage />} />
              <Route path="/docs" element={<DocsPage />} />
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </div>
        </div>
      </div>
    </>
  )
}