/* app.jsx — Home page root, with light/dark + density Tweaks. */

const { Topbar, Header, Hero, QuickActions, Credentials, Values, Departments,
        DoctorsPreview, International, News, Testimonials, Contact, Footer,
        I18N, Ico } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme":   "light",
  "density": "regular"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const strings = I18N.en;

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
    document.documentElement.setAttribute('data-density', t.density);
    try { localStorage.setItem('ra-theme', t.theme); } catch(e) {}
  }, [t.theme, t.density]);

  const toggleTheme = () => setTweak('theme', t.theme === 'dark' ? 'light' : 'dark');

  return (
    <>
      <Topbar t={strings} />
      <Header t={strings} activePage="" theme={t.theme} onToggleTheme={toggleTheme} />
      <main>
        <Hero t={strings} />
        <Credentials t={strings} />
        <QuickActions t={strings} />
        <Values t={strings} />
        <Departments t={strings} />
        <DoctorsPreview t={strings} />
        <International t={strings} />
        <News t={strings} />
        <Testimonials t={strings} />
        <Contact t={strings} />
      </main>
      <Footer t={strings} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Appearance" />
        <TweakRadio
          label="Theme"
          value={t.theme}
          options={['light', 'dark']}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={['compact', 'regular', 'airy']}
          onChange={(v) => setTweak('density', v)}
        />
      </TweaksPanel>
    </>
  );
}

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