/* App shell: hash router + language + tweaks. */
(function () {
  const { useState, useEffect, useCallback } = React;

  const ROUTES = ['home', 'system', 'products', 'product', 'projects', 'object', 'contact', 'moderator'];
  const TITLES = {
    home: 'EINSTEIN® Fugentechnik', system: 'Verbundsystem — EINSTEIN®',
    products: 'Produkte — EINSTEIN®', product: 'Produkt — EINSTEIN®', projects: 'Objekte — EINSTEIN®',
    object: 'Objektbericht — EINSTEIN®', contact: 'Kontakt — EINSTEIN®', moderator: 'Redaktion — EINSTEIN®',
  };

  const ACCENTS = {
    '#C1121C': { hover: '#9E0F17', press: '#7C0B12' },
    '#D22529': { hover: '#B0151B', press: '#8E0F15' },
    '#9E0F17': { hover: '#7C0B12', press: '#5E080D' },
  };

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "heroVariant": "photo",
    "showMarquee": true,
    "accent": "#C1121C"
  }/*EDITMODE-END*/;

  function parseHash() {
    const raw = (location.hash || '').replace(/^#\/?/, '');
    const [path, query] = raw.split('?');
    const route = ROUTES.includes(path) ? path : 'home';
    const params = {};
    if (query) query.split('&').forEach((kv) => { const [k, v] = kv.split('='); if (k) params[k] = decodeURIComponent(v || ''); });
    return { route, params };
  }

  function App() {
    const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
    const [{ route, params }, setNav] = useState(parseHash());
    const [lang, setLangState] = useState(() => localStorage.getItem('ef_lang') || 'de');

    const setLang = useCallback((l) => { setLangState(l); localStorage.setItem('ef_lang', l); }, []);

    const navigate = useCallback((to, p = {}) => {
      const q = Object.keys(p).length ? '?' + Object.entries(p).map(([k, v]) => k + '=' + encodeURIComponent(v)).join('&') : '';
      location.hash = '#/' + to + q;
    }, []);

    useEffect(() => {
      const onHash = () => setNav(parseHash());
      window.addEventListener('hashchange', onHash);
      return () => window.removeEventListener('hashchange', onHash);
    }, []);

    /* document title + lang attr */
    useEffect(() => { document.title = TITLES[route] || TITLES.home; }, [route]);
    useEffect(() => { document.documentElement.lang = lang; }, [lang]);

    /* accent tweak → CSS vars */
    useEffect(() => {
      const a = ACCENTS[t.accent] || ACCENTS['#C1121C'];
      const r = document.documentElement.style;
      r.setProperty('--brand', t.accent);
      r.setProperty('--brand-hover', a.hover);
      r.setProperty('--brand-press', a.press);
    }, [t.accent]);

    /* scroll handling on route/anchor change */
    useEffect(() => {
      if (params.anchor) {
        const tryScroll = () => {
          const el = document.getElementById(params.anchor);
          if (el) {
            const y = el.getBoundingClientRect().top + window.pageYOffset - 64;
            window.scrollTo({ top: y, behavior: 'smooth' });
          }
        };
        const id = setTimeout(tryScroll, 80);
        return () => clearTimeout(id);
      }
      window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
    }, [route, params.anchor, params.cat]);

    const Page = () => {
      switch (route) {
        case 'system': return React.createElement(window.System, { lang, navigate });
        case 'products': return React.createElement(window.Produkte, { lang, navigate });
        case 'product': return React.createElement(window.ProductDetail, { lang, navigate, id: params.id });
        case 'projects': return React.createElement(window.Objekte, { lang, navigate, initialCat: params.cat });
        case 'object': return React.createElement(window.Objektbericht, { lang, navigate, id: params.id });
        case 'contact': return React.createElement(window.Kontakt, { lang, navigate });
        case 'moderator': return React.createElement(window.Moderator, { lang, navigate });
        default: return React.createElement(window.Home, { lang, navigate, heroVariant: t.heroVariant, showMarquee: t.showMarquee });
      }
    };

    const { TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor } = window;

    return React.createElement(React.Fragment, null,
      React.createElement(window.Header, { route, lang, navigate, setLang }),
      React.createElement('main', null, React.createElement(Page)),
      React.createElement(window.Footer, { lang, navigate }),
      React.createElement(TweaksPanel, null,
        React.createElement(TweakSection, { label: lang === 'de' ? 'Startseite' : 'Home' }),
        React.createElement(TweakRadio, {
          label: lang === 'de' ? 'Hero-Variante' : 'Hero variant', value: t.heroVariant,
          options: ['photo', 'split', 'light'], onChange: (v) => setTweak('heroVariant', v),
        }),
        React.createElement(TweakToggle, {
          label: lang === 'de' ? 'Partner-Marquee' : 'Partner marquee', value: t.showMarquee,
          onChange: (v) => setTweak('showMarquee', v),
        }),
        React.createElement(TweakSection, { label: lang === 'de' ? 'Marke' : 'Brand' }),
        React.createElement(TweakColor, {
          label: lang === 'de' ? 'Akzent' : 'Accent', value: t.accent,
          options: ['#C1121C', '#D22529', '#9E0F17'], onChange: (v) => setTweak('accent', v),
        })
      )
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
})();