import { useEffect } from 'react';
import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
import { ThemeProvider, CssBaseline } from '@mui/material';
import theme from './theme/theme';
import { AppsProvider } from './context/AppsContext';

import Home from './pages/Home';
import Download from './pages/Download';
import FAQ from './pages/FAQ';
import Apps from './pages/Apps';
import Buy from './pages/Buy';
import GettingStarted from './pages/GettingStarted';
import Build from './pages/Build';

function ScrollToTop() {
  const location = useLocation();

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [location.pathname]);

  return null;
}

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <AppsProvider>
        <HashRouter>
          <ScrollToTop />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/getting-started" element={<GettingStarted />} />
            <Route path="https://github.com/pollen-robotics/reachy_mini" element={<Build />} />
            <Route path="/download" element={<Download />} />
            <Route path="https://github.com/pollen-robotics/reachy_mini/blob/develop/docs/troubleshooting.md" element={<FAQ />} />
            <Route path="/apps" element={<Apps />} />
            <Route path="/buy" element={<Buy />} />
          </Routes>
        </HashRouter>
      </AppsProvider>
    </ThemeProvider>
  );
}