// Parleur landing — app entry. Hash-routed, lang-switchable.

const STORAGE_KEY = 'parleur.lang';

function detectInitialLang() {
  try {
    const stored = localStorage.getItem(STORAGE_KEY);
    if (stored === 'en' || stored === 'zh' || stored === 'ja') return stored;
  } catch (_) { /* localStorage may be unavailable */ }
  const nav = (navigator.language || 'en').toLowerCase();
  if (nav.startsWith('zh')) return 'zh';
  if (nav.startsWith('ja')) return 'ja';
  return 'en';
}

// CONTEXT: Paddle redirects to plain-pathname URLs (e.g.
// `parleur.app/checkout/success?_ptxn=...`), but our SPA is hash-routed.
// On first load, lift the pathname into the hash so routing still works
// — preserve querystring (Paddle puts `_ptxn` there).
//
// Always rewrite when pathname is non-`/`, regardless of any pre-existing
// hash. The earlier guard `!location.hash` failed when Chrome (or our own
// later route-effect) attached `#/` to a `/checkout` URL: pathname stayed
// `/checkout` but the hash was non-empty so the rewrite was skipped, and
// the app fell back to rendering Home from the `/` hash.
(() => {
  const path = window.location.pathname;
  if (path === '/') return;
  const search = window.location.search || '';
  window.history.replaceState(null, '', '/' + search + '#' + path);
})();

const App = () => {
  const [route, setRoute] = React.useState(() => {
    const h = window.location.hash.replace(/^#/, '');
    return h && h.startsWith('/') ? h : '/';
  });
  const [lang, setLangState] = React.useState(detectInitialLang);

  const setLang = (l) => {
    setLangState(l);
    try { localStorage.setItem(STORAGE_KEY, l); } catch (_) {}
  };

  React.useEffect(() => {
    const target = '#' + route;
    if (window.location.hash !== target) {
      window.history.replaceState(null, '', target);
    }
    document.documentElement.lang = lang === 'zh' ? 'zh-Hant' : lang === 'ja' ? 'ja' : 'en';
  }, [route, lang]);

  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace(/^#/, '');
      setRoute(h && h.startsWith('/') ? h : '/');
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  let page;
  switch (route) {
    case '/pricing': page = <Pricing lang={lang} setRoute={setRoute}/>; break;
    case '/privacy': page = <Privacy lang={lang}/>; break;
    case '/terms':   page = <Terms lang={lang}/>; break;
    case '/refund':  page = <Refund lang={lang}/>; break;
    case '/checkout':          page = <CheckoutLanding lang={lang}/>; break;
    case '/checkout/success':  page = <CheckoutSuccess lang={lang}/>; break;
    case '/checkout/canceled': page = <CheckoutCanceled lang={lang} setRoute={setRoute}/>; break;
    default:         page = <Home lang={lang} setRoute={setRoute}/>;
  }

  return (
    <>
      <Nav route={route} setRoute={setRoute} lang={lang} setLang={setLang}/>
      <main>{page}</main>
      <Footer setRoute={setRoute} lang={lang}/>
    </>
  );
};

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