/* Page-level router + Tweaks. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroAccent": "coral",
  "warmBackground": false,
  "showQuote": true,
  "heroLogoRings": true
}/*EDITMODE-END*/;

const PAGE_IDS = ['home', 'mothers', 'professionals', 'about', 'materials', 'science', 'impressum', 'privacy'];

const pageFromHash = () => {
  const id = window.location.hash.slice(1);
  return PAGE_IDS.includes(id) ? id : 'home';
};

const App = () => {
  const [page, setPage] = React.useState(pageFromHash);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'auto' });
  }, [page]);

  React.useEffect(() => {
    document.documentElement.style.setProperty(
      '--cream',
      tweaks.warmBackground ? '#F6EAD0' : '#FBF6EC'
    );
  }, [tweaks.warmBackground]);

  // Browser-Zurück/Vor unterstützen: Hash ist Quelle der Wahrheit für die Seite.
  React.useEffect(() => {
    const onHashChange = () => {
      const id = window.location.hash.slice(1);
      if (PAGE_IDS.includes(id)) setPage(id);
      // Anker-Links (#titel, #hintergrund etc.) werden ignoriert — Browser scrollt selbst
    };
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);

  const navigate = (id) => {
    if (window.location.hash.slice(1) !== id) {
      window.location.hash = id;
    } else {
      setPage(id);
    }
  };

  return (
    <div data-screen-label={'Page: ' + page}>
      <TopNav current={page} onNavigate={navigate} />
      <main>
        {page === 'home'           && <HomePage          onNavigate={navigate} tweaks={tweaks} />}
        {page === 'mothers'        && <MothersPage       onNavigate={navigate} />}
        {page === 'professionals'  && <ProfessionalsPage onNavigate={navigate} />}
        {page === 'about'          && <AboutPage         onNavigate={navigate} />}
        {page === 'materials'      && <MaterialsPage     onNavigate={navigate} />}
        {page === 'science'        && <SciencePage       onNavigate={navigate} />}
        {page === 'impressum'      && <ImpressumPage     onNavigate={navigate} />}
        {page === 'privacy'        && <PrivacyPage       onNavigate={navigate} />}
      </main>
      <Footer onNavigate={navigate} />

      <ContactRedirectModal />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakRadio
          label="Akzentfarbe"
          value={tweaks.heroAccent}
          onChange={v => setTweak('heroAccent', v)}
          options={[
            { value: 'coral', label: 'Coral' },
            { value: 'cyan',  label: 'Cyan' },
            { value: 'white', label: 'Weiß' },
          ]}
        />
        <TweakToggle label="Logo mit Kreisen" value={tweaks.heroLogoRings} onChange={v => setTweak('heroLogoRings', v)} />

        <TweakSection label="Erscheinungsbild" />
        <TweakToggle label="Wärmere Creme-Farbe" value={tweaks.warmBackground} onChange={v => setTweak('warmBackground', v)} />

        <TweakSection label="Inhalte" />
        <TweakToggle label="Zitatblock auf Startseite" value={tweaks.showQuote} onChange={v => setTweak('showQuote', v)} />
      </TweaksPanel>
    </div>
  );
};

Object.assign(window, { App });