const fairxViews = {
  website: window.Website,
  fairness: window.FairnessPage,
  "stock-intro": window.StockIntroPage,
  "fair28-intro": window.Fair28IntroPage,
  chain: window.ChainPage,
  oracle: window.OraclePage,
  bridge: window.BridgePage,
  developer: window.DeveloperPage,
  "app-dashboard": window.AppDashboardPage,
  dapp: window.Dapp,
  "stock-trade": window.StockTradePage,
  vault: window.VaultPage,
  risk: window.RiskPage,
  portfolio: window.PortfolioPage,
  "explorer-home": window.ExplorerHomePage,
  explorer: window.Explorer,
};

function FairxApp() {
  const getInitialView = () => {
    const fromHash = window.location.hash.replace("#", "");
    return fairxViews[fromHash] ? fromHash : "website";
  };
  const [view, setView] = React.useState(getInitialView);
  const motionRoot = React.useRef(null);

  window.useFairxMotion(motionRoot, view);

  React.useEffect(() => {
    const syncFromHash = () => setView(getInitialView());
    window.addEventListener("hashchange", syncFromHash);
    return () => window.removeEventListener("hashchange", syncFromHash);
  }, []);

  const navigate = (target) => {
    if (!fairxViews[target]) return;
    window.location.hash = target;
    setView(target);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const ActiveView = fairxViews[view] || window.Website;
  return (
    <div className="fairx-motion-root" ref={motionRoot}>
      <ActiveView currentView={view} onNavigate={navigate} />
    </div>
  );
}

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