// App-Root + Routing
const { useHashRoute, Header, Footer } = window.UI;
const { HomePage, AnlaesseOverview, AnlassDetail, LeistungenPage, GaleriePage, UeberUnsPage, KontaktPage, NotFound } = window.PAGES;
const { ConfiguratorPage, DankePage } = window.CONFIGURATOR;

function App() {
  const route = useHashRoute();
  const segs = route.segs;

  let page;
  if (segs.length === 0) page = <HomePage />;
  else if (segs[0] === 'anlaesse') {
    if (segs[1]) page = <AnlassDetail id={segs[1]} />;
    else page = <AnlaesseOverview />;
  }
  else if (segs[0] === 'leistungen') page = <LeistungenPage />;
  else if (segs[0] === 'galerie') page = <GaleriePage />;
  else if (segs[0] === 'ueber-uns') page = <UeberUnsPage />;
  else if (segs[0] === 'kontakt') page = <KontaktPage />;
  else if (segs[0] === 'konfigurator') {
    if (segs[1] === 'danke') page = <DankePage />;
    else page = <ConfiguratorPage />;
  }
  else page = <NotFound />;

  // Konfigurator hat eigenes Layout (eigener Stepper statt Hero)
  const isConfig = segs[0] === 'konfigurator';

  return (
    <div data-screen-label={`Route: ${route.path}`}>
      <Header route={route} />
      {page}
      {!isConfig && <Footer />}
    </div>
  );
}

// Konfig vom Server holen, dann erst rendern.
// Fallback (Hardcoded) ist bereits in window.SITE_DATA — wenn fetch scheitert,
// rendert die App einfach mit den Default-Werten.
(async function bootstrap() {
  if (window.OF_API && typeof window.OF_API.loadPublicConfig === 'function') {
    try {
      const cfg = await window.OF_API.loadPublicConfig();
      // Server-Werte ins SITE_DATA mergen (überschreibt Fallback)
      const sd = window.SITE_DATA;
      if (cfg.anlaesse  && cfg.anlaesse.length)  sd.ANLAESSE  = cfg.anlaesse;
      if (cfg.bausteine && Object.keys(cfg.bausteine).length) sd.BAUSTEINE = cfg.bausteine;
      if (cfg.anfahrt) sd.ANFAHRT = cfg.anfahrt;
      if (cfg.timeline_bausteine && cfg.timeline_bausteine.length) sd.TIMELINE_BAUSTEINE = cfg.timeline_bausteine;
      if (cfg.timeline_vorlagen) {
        sd.TIMELINE_VORLAGEN = cfg.timeline_vorlagen;
        if (cfg.timeline_vorlagen.default) sd.TIMELINE_VORLAGE = cfg.timeline_vorlagen.default;
      }
      sd.TEXTE = cfg.texte || {};
    } catch (e) { /* Fallback bleibt */ }
  }
  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
})();