/* ============================================================
   HERMES Connect Hub — App shell (routing + i18n + tweaks)
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0a5694",
  "heroVisual": true,
  "heroStats": true,
  "density": "comfortable",
  "corners": "soft"
}/*EDITMODE-END*/;

const ROUTES = {
  home: PageHome,
  events: PageEvents,
  mitglieder: PageMitglieder,
  ressourcen: PageRessourcen,
  handbuecher: PageRessourcen,
  schulungen: PageRessourcen,
  feedback: PageRessourcen,
  sponsoring: PageSponsoring,
  kontakt: PageKontakt,
  agora: PageAgora,
};

function getRoute() {
  const h = (window.location.hash || '').replace(/^#\/?/, '').trim();
  return ROUTES[h] ? h : 'home';
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLangState] = useState(() => localStorage.getItem('hc_lang') || 'de');
  const [route, setRoute] = useState(getRoute());

  const setLang = (l) => { setLangState(l); localStorage.setItem('hc_lang', l); };

  const go = useCallback((id) => {
    window.location.hash = '/' + id;
  }, []);

  useEffect(() => {
    const onHash = () => {
      setRoute(getRoute());
      window.scrollTo({ top: 0, behavior: 'auto' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  /* apply accent + body data attrs */
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    // derive a darker hover from the accent
    root.style.setProperty('--accent-hover', t.accent === '#262253' ? '#1b1840' : '#073f6d');
    document.body.setAttribute('data-density', t.density);
    document.body.setAttribute('data-corners', t.corners);
  }, [t.accent, t.density, t.corners]);

  const Page = ROUTES[route] || PageHome;
  const focus = ['handbuecher', 'schulungen', 'feedback'].includes(route) ? route : null;

  const ctx = { lang, setLang, route, go, tweaks: t };

  return (
    <HCContext.Provider value={ctx}>
      <Header />
      <Page focus={focus} key={route} />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Markenfarbe" />
        <TweakColor label="Akzent (Buttons)" value={t.accent}
          options={['#0a5694', '#262253', '#0e6bb0']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Hero" />
        <TweakToggle label="Netzwerk-Grafik" value={t.heroVisual} onChange={(v) => setTweak('heroVisual', v)} />
        <TweakToggle label="Kennzahlen-Leiste" value={t.heroStats} onChange={(v) => setTweak('heroStats', v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Dichte" value={t.density} options={['comfortable', 'compact']} onChange={(v) => setTweak('density', v)} />
        <TweakRadio label="Ecken" value={t.corners} options={['soft', 'sharp']} onChange={(v) => setTweak('corners', v)} />
      </TweaksPanel>
    </HCContext.Provider>
  );
}

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