// App entry — path-based routing (/admin, /trasee...), served via Firebase rewrite to index.html
const { useState: useStateA, useEffect: useEffectA } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#dc2626",
  "grunge": 0.6,
  "language": "ro"
}/*EDITMODE-END*/;

const PAGES = ['home', 'about', 'tours', 'events', 'gallery', 'membership', 'contact', 'admin'];

function pageFromLocation() {
  // legacy hash URLs (#/admin) still resolve
  const h = (window.location.hash || '').replace(/^#\/?/, '');
  if (PAGES.includes(h)) return h;
  const p = window.location.pathname.replace(/^\/+|\/+$/g, '');
  return PAGES.includes(p) ? p : 'home';
}

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);
  const [page, setPageState] = useStateA(pageFromLocation());
  const [lang, setLangState] = useStateA(tweaks.language || 'ro');

  const setPage = p => {
    setPageState(p);
    window.history.pushState({}, '', p === 'home' ? '/' : '/' + p);
  };

  useEffectA(() => {
    // normalize legacy hash URL to clean path
    const h = (window.location.hash || '').replace(/^#\/?/, '');
    if (PAGES.includes(h)) window.history.replaceState({}, '', h === 'home' ? '/' : '/' + h);
    const onPop = () => setPageState(pageFromLocation());
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  useEffectA(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    document.documentElement.style.setProperty('--accent-bright', tweaks.accent);
  }, [tweaks.accent]);

  const setLang = l => {
    setLangState(l);
    window.__lang = l;
    setTweak('language', l);
  };
  useEffectA(() => { window.__lang = lang; }, [lang]);

  useEffectA(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [page]);

  const pageProps = { lang, setPage, tweaks };

  return (
    <>
      <Nav page={page} setPage={setPage} lang={lang} setLang={setLang} goJoin={() => setPage('membership')} />
      <div key={page + '-' + lang} className="page active fade-in">
        {page === 'home' && <PageHome {...pageProps} />}
        {page === 'about' && <PageAbout {...pageProps} />}
        {page === 'tours' && <PageTours {...pageProps} />}
        {page === 'events' && <PageEvents {...pageProps} />}
        {page === 'gallery' && <PageGallery {...pageProps} />}
        {page === 'membership' && <PageMembership {...pageProps} />}
        {page === 'contact' && <PageContact {...pageProps} />}
        {page === 'admin' && <PageAdmin {...pageProps} />}
      </div>
      <Footer lang={lang} setPage={setPage} />
    </>
  );
}

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