import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Letters from './Letters';
import NewHome from './pages/NewHome';
import SimpleHome from './pages/SimpleHome';
import Step1 from './pages/Step1';
import Step2 from './pages/Step2';
import Step3 from './pages/Step3';
import ScrollToTop from './components/ScrollToTop';
import { GlobalSettingsProvider } from './hooks/useGlobalSettings';

function App() {
    return (
        <GlobalSettingsProvider>
            <Router>
                {/* 路由变化时自动滚动到顶部 */}
                <ScrollToTop />
                <Routes>
                    {/* New Homepage: SimpleHome */}
                    <Route path="/" element={<SimpleHome />} />

                    {/* Step 1 & Step 2 Pages */}
                    <Route path="/step1" element={<Step1 />} />
                    <Route path="/step2" element={<Step2 />} />
                    <Route path="/step3" element={<Step3 />} />

                    {/* Letter to Players (Formerly the homepage) */}
                    <Route path="/intro" element={<NewHome />} />

                    {/* Letter to letters (Formerly /letter) */}
                    <Route path="/letters" element={<Letters />} />
                </Routes>
            </Router>
        </GlobalSettingsProvider>
    );
}

export default App;
