function OVOPrototypeApp() {
  const [activeScreen, setActiveScreen] = React.useState("overview");
  const [checkedIn, setCheckedIn] = React.useState(false);
  const dataset = window.ovoDataset;
  const activeItem = window.ovoNavItems.find((navItem) => navItem.key === activeScreen) || window.ovoNavItems[0];

  function runCheckIn() {
    setCheckedIn(true);
    if (activeScreen === "overview") {
      setActiveScreen("student");
    }
  }

  function resetDemo() {
    setCheckedIn(false);
    setActiveScreen("overview");
  }

  const screenProps = {
    dataset,
    checkedIn,
    onNavigate: setActiveScreen,
    onRunCheckIn: runCheckIn
  };

  const screenMap = {
    overview: <OverviewScreen {...screenProps} />,
    admin: <AdminScreen {...screenProps} />,
    lecturer: <LecturerScreen {...screenProps} />,
    student: <StudentScreen {...screenProps} />,
    leadership: <LeadershipScreen {...screenProps} />,
    core: <CoreTrustScreen {...screenProps} />,
    workforce: <WorkforceScreen {...screenProps} />,
    integration: <IntegrationScreen {...screenProps} />,
    roadmap: <RoadmapScreen {...screenProps} />
  };

  return (
    <div className="app-root">
      <div className="app-frame">
        <Sidebar activeScreen={activeScreen} onNavigate={setActiveScreen} />
        <main className="main-stage">
          <Topbar
            activeLabel={activeItem.label}
            activeScreen={activeScreen}
            checkedIn={checkedIn}
            onNavigate={setActiveScreen}
            onRunCheckIn={runCheckIn}
            onReset={resetDemo}
          />
          <div className="page-scroll">
            {screenMap[activeScreen]}
          </div>
        </main>
      </div>
    </div>
  );
}

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