// Top-level App
(function () {

const { useState: useStateApp } = React;

function App() {
  const [activePage, setActivePage] = useStateApp("max-home");
  const { pageBg, font } = window.MAX_DATA;
  return (
    <div style={{ display: "flex", height: "100vh", background: pageBg, fontFamily: font, overflow: "hidden" }}>
      <window.LeftNav activePage={activePage} setActivePage={setActivePage} />
      <div style={{ display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }}>
        <window.TopNav />
        <main style={{ flex: 1, overflowY: "auto" }}>
          {activePage === "max-home" && <window.MaxHomePage />}
          {activePage === "automations" && <window.AutomationsPage />}
          {activePage === "journeys" && <window.JourneysPage />}
        </main>
      </div>
    </div>
  );
}

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