/* ============================================================
   Router + App shell. Hash-based routing (#/key).
   ============================================================ */
const { useState: useS, useEffect: useE } = React;

function getRoute() {
  const h = window.location.hash.replace(/^#\/?/, "");
  return h;
}

function renderRoute(route) {
  // home
  if (route === "" || route === "pocetna") return <Home />;

  // news
  if (route === "vijesti") return <NewsIndex />;
  if (route.startsWith("vijesti/")) return <NewsArticle articleKey={route.split("/")[1]} />;

  // top-level simple sections
  if (route === "nove-knjige") return <BooksPage />;
  if (route === "prinove") return <PrinovePage />;

  // povijest
  if (route === "povijest" || route === "povijest/povijest") return <PovijestPage current="povijest/povijest" />;
  if (route === "povijest/obol-60") return <ObolHistoryPage current="povijest/obol-60" />;

  // publikacije
  if (route === "publikacije") return <PublikacijeIndex />;
  if (route.startsWith("publikacije/")) {
    const sub = route.split("/")[1];
    if (window.HND.PUBLICATIONS[sub]) return <PublicationPage current={route} />;
  }

  // hnd izdanja
  if (route === "hnd-izdanja") return <IzdanjaIndex />;
  if (route.startsWith("hnd-izdanja/")) {
    const sub = route.split("/")[1];
    if (window.HND.EDITIONS[sub]) return <EditionPage current={route} />;
  }

  // informacije
  if (route === "informacije") return <InfoIndex />;
  if (route === "informacije/clanstvo") return <ClanstvoPage current={route} />;
  if (route.startsWith("informacije/ustroj")) return <UstrojPage current={route} />;
  if (route === "informacije/kontakt") return <KontaktPage current={route} />;
  if (route === "informacije/incc-2020") return <INCCPage current={route} title="INCC 2020" year="2020" />;

  // incc
  if (route === "incc-2025") return <INCCPage current={route} title="INCC 2025" year="2025" />;

  // utility
  if (route === "trazi") return <SearchPage />;
  if (route === "sitemap") return <SitemapPage />;
  if (route === "zastita-privatnosti") return <PrivacyPage />;
  if (route === "impressum") return <ImpressumPage />;

  // fallback
  return (
    <div className="wrap" style={{ padding: "120px 0", textAlign: "center" }}>
      <h1 style={{ fontSize: 40, fontWeight: 500 }}>Stranica nije pronađena</h1>
      <p style={{ color: "var(--muted)", marginTop: 14 }}>Tražena stranica ne postoji ili je premještena.</p>
      <a className="btn btn-solid" href={navHref("")} style={{ marginTop: 18 }}>Natrag na početnu</a>
    </div>
  );
}

function App() {
  const [route, setRoute] = useS(getRoute());
  const [lang, setLang] = useS(() => localStorage.getItem("hnd-lang") || "HR");
  const [drawerOpen, setDrawerOpen] = useS(false);

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

  useE(() => { localStorage.setItem("hnd-lang", lang); }, [lang]);

  return (
    <>
      <a className="skip-link" href="#content">Prijeđi na sadržaj</a>
      <TopBar lang={lang} setLang={setLang} />
      <Masthead current={route} lang={lang} setLang={setLang} onOpenDrawer={() => setDrawerOpen(true)} />
      <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} current={route} lang={lang} setLang={setLang} />
      <main id="content">{renderRoute(route)}</main>
      <Footer />
    </>
  );
}

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