import { useEffect, useState } from 'react';
import Background from './Background.jsx';
import Nav from './Nav.jsx';
import Hero from './Hero.jsx';
import Realm from './Realm.jsx';
import About from './About.jsx';
import Features from './Features.jsx';
import Join from './Join.jsx';
import News from './News.jsx';
import Footer from './Footer.jsx';
import Tweaks from './Tweaks.jsx';

export default function App() {
    const [state, setState] = useState(() => {
        const fromBootstrap = (window.MOONWELL && window.MOONWELL.tweaks) || {};
        let stored = {};
        try {
            const raw = localStorage.getItem('moonwell.tweaks');
            if (raw) stored = JSON.parse(raw);
        } catch (e) {
            // ignore
        }
        return { variant: 'forest', particles: true, moon: true, ...fromBootstrap, ...stored };
    });

    useEffect(() => {
        document.body.dataset.variant = state.variant;
        document.body.dataset.particles = state.particles ? 'true' : 'false';
        document.body.dataset.moon = state.moon ? 'true' : 'false';
    }, [state]);

    return (
        <>
            <Background />
            <Nav />
            <Hero />
            <Realm />
            <About />
            <Features />
            <Join />
            <News />
            <Footer />
            <Tweaks state={state} setState={setState} />
        </>
    );
}