/* LinkFX marketplace UI kit — App root, routing & auth modal */
const { Modal, Input, Checkbox, Button, Spinner, Heading } = window.LinkFXDesignSystem_0271c1;

function AuthModal({ mode, onClose, onSwitch }) {
  const [phase, setPhase] = React.useState("form"); // form | loading | done
  const isRegister = mode === "register";
  const submit = () => {
    setPhase("loading");
    setTimeout(() => setPhase("done"), 1200);
  };

  if (phase === "done") {
    return (
      <Modal onClose={onClose} title={isRegister ? "Account created" : "Welcome back"} maxWidth="md"
        description={isRegister ? "Check your inbox to verify your email, then you're ready to trade." : "You're signed in to the marketplace."}
        actions={<Button variant="primary" onClick={onClose}>Get started</Button>}>
        <div style={{ display: "flex", justifyContent: "center", padding: "0 0 .5rem" }}>
          <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--primary)", color: "var(--primary-content)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 30 }}>✓</div>
        </div>
      </Modal>
    );
  }

  return (
    <Modal onClose={onClose} maxWidth="md"
      title={isRegister ? "Open an account" : "Login to Marketplace"}
      description={isRegister ? "Trade every major currency from one login." : "Welcome back — enter your details to continue."}
      actions={
        <Button variant="accent" onClick={submit} disabled={phase === "loading"} style={{ minWidth: 160 }}>
          {phase === "loading" ? <><Spinner size="sm" onDark /> Please wait</> : (isRegister ? "Create account" : "Log in")}
        </Button>
      }>
      <div style={{ display: "flex", flexDirection: "column", gap: "1rem", paddingBottom: ".5rem" }}>
        {isRegister && (
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: ".75rem" }}>
            <Input label="First name" placeholder="Alex" />
            <Input label="Last name" placeholder="Morgan" />
          </div>
        )}
        <Input label="Email address" type="email" placeholder="you@company.com" />
        <Input label="Password" type="password" placeholder="••••••••" />
        <Checkbox label={isRegister ? "Send me FX rate alerts and product updates" : "Keep me signed in"} defaultChecked={!isRegister} />
        <p style={{ margin: ".25rem 0 0", fontSize: ".875rem", color: "var(--slate-500)", textAlign: "center" }}>
          {isRegister ? "Already have an account? " : "New to LinkFX? "}
          <a href="#" onClick={(e) => { e.preventDefault(); setPhase("form"); onSwitch(); }} style={{ fontWeight: 500 }}>
            {isRegister ? "Log in" : "Open an account"}
          </a>
        </p>
      </div>
    </Modal>
  );
}

function App() {
  const [route, setRoute] = React.useState("home");
  const [modal, setModal] = React.useState(null); // null | 'register' | 'login'

  const onNav = (r) => {
    const map = { home: "home", services: "services", blog: "blog", company: "home", showcases: "home", contact: "home" };
    setRoute(map[r] || "home");
    const scroller = document.getElementById("lfx-scroll");
    if (scroller) scroller.scrollTo({ top: 0 });
  };

  let page;
  if (route === "services") page = <window.LfxServiceDetailPage onRegister={() => setModal("register")} />;
  else if (route === "blog") page = <window.LfxBlogIndexPage />;
  else page = <window.LfxHomePage onRegister={() => setModal("register")} />;

  const transparentOver = route === "home" || route === "services" || route === "blog";

  return (
    <>
      <window.LfxHeader route={route} onNav={onNav} transparentOver={transparentOver}
        onRegister={() => setModal("register")} onLogin={() => setModal("login")} />
      <main>{page}</main>
      <window.LfxFooter onNav={onNav} />
      {modal && (
        <AuthModal mode={modal} onClose={() => setModal(null)}
          onSwitch={() => setModal(modal === "register" ? "login" : "register")} />
      )}
    </>
  );
}

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