const PAGE_PATHS = {
  home:     "/",
  seminars: "/seminars",
  gallery:  "/gallery",
  about:    "/about",
  contact:  "/contact"
};

function pageFromPath(pathname) {
  const clean = pathname.replace(/\/+$/, "") || "/";
  const entry = Object.entries(PAGE_PATHS).find(([, path]) => path === clean);
  return entry ? entry[0] : "home";
}

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

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

  React.useEffect(() => {
    const titles = {
      el: {
        home:     "Vortex Arts · Σεμινάρια χειροποίητου κοσμήματος στην Αθήνα",
        seminars: "Σεμινάρια αργυροχοΐας · Vortex Arts",
        gallery:  "Οι δημιουργίες σας · Vortex Arts",
        about:    "Vortexology · Vortex Arts",
        contact:  "Επικοινωνία · Vortex Arts"
      },
      en: {
        home:     "Vortex Arts · Jewellery making seminars in Athens",
        seminars: "Silversmithing seminars · Vortex Arts",
        gallery:  "Students' work · Vortex Arts",
        about:    "Vortexology · Vortex Arts",
        contact:  "Contact · Vortex Arts"
      }
    };
    document.title = titles[lang][activePage];
  }, [activePage, lang]);

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

  const setPage = (newPage) => {
    if (newPage === activePage) return;
    window.history.pushState({ page: newPage }, "", PAGE_PATHS[newPage] || "/");
    transitionTo(newPage);
  };

  // Browser back/forward buttons
  React.useEffect(() => {
    const onPopState = () => transitionTo(pageFromPath(window.location.pathname));
    window.addEventListener("popstate", onPopState);
    return () => window.removeEventListener("popstate", onPopState);
  });

  const t    = window.VTX_COPY[lang];
  const Page = {
    home:     HomePage,
    seminars: SeminarsPage,
    gallery:  GalleryPage,
    about:    AboutPage,
    contact:  ContactPage
  }[activePage];

  return (
    <div className="vtx-site">
      <TopNav page={activePage} setPage={setPage} lang={lang} setLang={setLang} t={t} />
      <div className={transitioning ? "page-out" : "page-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 />);