/* App.jsx — router + state for the DLG public site.
   Routes: home | antrag | news | kontakt | impressum | datenschutz
   URL hash is kept in sync so refresh + shareable links work. */

const ROUTES = ["home", "antrag", "news", "kontakt", "impressum", "datenschutz"];
const routeFromHash = () => {
  const h = (window.location.hash || "").replace(/^#\/?/, "");
  return ROUTES.includes(h) ? h : "home";
};

const App = () => {
  const [route, setRoute] = React.useState(routeFromHash);

  React.useEffect(() => {
    const onHash = () => setRoute(routeFromHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  React.useEffect(() => {
    const desired = `#/${route}`;
    if (window.location.hash !== desired) {
      window.history.replaceState(null, "", desired);
    }
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [route]);

  const handleNav = (r) => setRoute(ROUTES.includes(r) ? r : "home");

  let body = null;
  if (route === "antrag")        body = <AntragScreen     onBack={() => handleNav("home")} onSubmit={() => {}}/>;
  else if (route === "news")     body = <NewsScreen       onNav={handleNav}/>;
  else if (route === "kontakt")  body = <KontaktScreen    onNav={handleNav}/>;
  else if (route === "impressum")    body = <ImpressumScreen   onNav={handleNav}/>;
  else if (route === "datenschutz")  body = <DatenschutzScreen onNav={handleNav}/>;
  else                           body = <HomeScreen       onNav={handleNav}/>;

  // Antrag screen has its own self-contained layout (no global header/footer)
  if (route === "antrag") {
    return (
      <>
        <ComponentStyles/>
        {body}
      </>
    );
  }

  return (
    <>
      <ComponentStyles/>
      <Header route={route} onNav={handleNav}/>
      {body}
      <Footer onNav={handleNav}/>
    </>
  );
};

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