/* global React, ReactDOM, Landing, OrderFlow, PaymentReturn */
function App() {
  const [lang, setLangState] = React.useState(() => {
    const saved = localStorage.getItem("lp_lang");
    if (saved && window.I18N[saved]) return saved;
    return "nl";
  });

  // ?payment_return=<orderId> → terug van de Mollie-checkout
  const paymentOrderId = new URLSearchParams(window.location.search).get("payment_return");
  const [view, setView] = React.useState(paymentOrderId ? "payment" : "landing"); // 'landing' | 'order' | 'payment'

  function setLang(l) { setLangState(l); localStorage.setItem("lp_lang", l); }
  React.useEffect(() => { document.documentElement.lang = lang; }, [lang]);

  const t = window.I18N[lang];

  function goOrder() { setView("order"); window.scrollTo({ top: 0 }); }
  function goLanding() {
    if (paymentOrderId) { window.history.replaceState({}, "", "/"); }
    setView("landing"); window.scrollTo({ top: 0 });
  }

  if (view === "payment") return <PaymentReturn t={t} lang={lang} setLang={setLang} orderId={paymentOrderId} onBack={goLanding} />;
  if (view === "order") return <OrderFlow t={t} lang={lang} setLang={setLang} onBack={goLanding} />;
  return <Landing t={t} lang={lang} setLang={setLang} onOrder={goOrder} />;
}

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