/* Hudson Pay marketing site — router + mount. */
const { Nav, Hero, TrustPartners, Solutions, Infrastructure, Security, WhyHudson, GlobalReach, Contact, Footer } = window.HPParts;
const { GetStarted, SignIn, Privacy } = window.HPPages;

function Landing({ onPage }) {
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <div id="hp-scroll" style={{ height: "100%", overflowY: "auto", scrollBehavior: "smooth" }}>
      <Nav onNav={scrollTo} onPage={onPage} />
      <Hero onPage={onPage} onNav={scrollTo} />
      <TrustPartners />
      <Solutions onPage={onPage} />
      <Infrastructure />
      <Security />
      <WhyHudson />
      <GlobalReach />
      <Contact onPage={onPage} />
      <Footer onPage={onPage} onNav={scrollTo} />
    </div>
  );
}

function App() {
  const [page, setPage] = React.useState("home");
  React.useEffect(() => {
    const s = document.getElementById("hp-scroll");
    if (s) s.scrollTop = 0;
  }, [page]);
  const onPage = (p) => setPage(p);
  return (
    <div style={{ height: "100vh", overflow: "hidden", background: "var(--surface-page)" }}>
      {page === "home" && <Landing onPage={onPage} />}
      {page === "getstarted" && <GetStarted onPage={onPage} />}
      {page === "signin" && <SignIn onPage={onPage} />}
      {page === "privacy" && <div style={{ height: "100%", overflowY: "auto" }}><Privacy onPage={onPage} /></div>}
    </div>
  );
}

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