function App() {
  const [activePage, setActivePage] = React.useState(() => {
    try { return localStorage.getItem("bhs-page") || "home"; } catch(e) { return "home"; }
  });
  const [lang, setLang] = React.useState(() => {
    try { return localStorage.getItem("bhs-lang") || "el"; } catch(e) { return "el"; }
  });
  const [transitioning, setTransitioning] = React.useState(false);
  const transRef = React.useRef(false);

  React.useEffect(() => { try { localStorage.setItem("bhs-page", activePage); } catch(e) {} }, [activePage]);
  React.useEffect(() => { try { localStorage.setItem("bhs-lang", lang); } catch(e) {} }, [lang]);
  React.useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [activePage]);
  React.useEffect(() => { document.documentElement.lang = lang; }, [lang]);

  const setPage = (newPage) => {
    if (newPage === activePage || transRef.current) return;
    transRef.current = true;
    setTransitioning(true);
    setTimeout(() => {
      setActivePage(newPage);
      setTransitioning(false);
      transRef.current = false;
    }, 220);
  };

  const t    = window.BHS_COPY[lang];
  const Page = { home: HomePage, packages: PackagesPage, about: AboutPage, contact: ContactPage }[activePage];

  return (
    <div className="bhs-site">
      <TopNav page={activePage} setPage={setPage} lang={lang} setLang={setLang} t={t} />
      <div className={transitioning ? "page-fade-out" : "page-fade-in"}>
        <Page key={activePage + lang} t={t} setPage={setPage} />
      </div>
      <Footer t={t} lang={lang} setPage={setPage} />
    </div>
  );
}

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