/* global React, ReactDOM, Header, Footer, HomePage, AboutPage, ServicesPage, FAQPage, ContactPage */

const PAGES = {
    home:     { Component: HomePage,     label: 'Accueil' },
    about:    { Component: AboutPage,    label: 'À propos' },
    services: { Component: ServicesPage, label: 'Services' },
    faq:      { Component: FAQPage,      label: 'FAQ' },
    contact:  { Component: ContactPage,  label: 'Contact' },
};

function App() {
    const [currentPage, setCurrentPage] = React.useState(() => {
        const stored = localStorage.getItem('sme_current_page');
        return (stored && PAGES[stored]) ? stored : 'home';
    });

    const navigate = (page) => {
        if (!PAGES[page]) return;
        setCurrentPage(page);
        localStorage.setItem('sme_current_page', page);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    const { Component } = PAGES[currentPage];

    return (
        <div data-screen-label={`${currentPage} — ${PAGES[currentPage].label}`}>
            <a href="#main" className="skip-link screen-reader-text">Aller au contenu</a>
            <Header currentPage={currentPage} navigate={navigate}/>
            <div id="main">
                <Component navigate={navigate}/>
            </div>
            <Footer navigate={navigate}/>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);