function App(){
  const [route, setRoute] = React.useState(() => {
    const saved = localStorage.getItem('byace:route');
    return saved || 'home';
  });
  const [tweaks, setTweaks] = React.useState(window.__TWEAKS__);

  const go = (r) => {
    setRoute(r);
    localStorage.setItem('byace:route', r);
    window.scrollTo({ top: 0, behavior: 'instant' in window ? 'auto' : 'auto' });
  };

  const setTweak = (k, v) => {
    setTweaks(t => ({ ...t, [k]: v }));
    persistTweak(k, v);
  };

  // Apply theme + accent to the document
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme);
    const accent = tweaks.accentMode === 'red' ? '#84091e'
                  : tweaks.accentMode === 'black' ? '#191919'
                  : '#7a7a78';
    document.documentElement.style.setProperty('--accent', accent);
  }, [tweaks.theme, tweaks.accentMode]);

  return (
    <RouteCtx.Provider value={{ route, go }}>
      <TweaksCtx.Provider value={{ tweaks, setTweak }}>
        <div className="page" data-screen-label={
          route === 'home' ? '01 Home' : '02 Inquire'
        }>
          <Nav />
          {route === 'home' && <Home />}
          {route === 'inquiry' && <Inquiry />}
          <Footer />
          <TweaksPanel />
        </div>
      </TweaksCtx.Provider>
    </RouteCtx.Provider>
  );
}

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