/* global React, ReactDOM, KxNav, KxFooter,
   HomePage, FirmPage, StrategiesPage, PlantationsPage, InsightsPage, ContactPage */
const { useState, useEffect } = React;

function App() {
  const [page, setPage] = useState("Home");

  // scroll to top on nav change
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [page]);

  // Map URL link names to page state values
  const navLabel = page === "Home" ? "Firm" : page;

  return (
    <>
      <KxNav current={navLabel} onNav={setPage} />
      <main>
        {page === "Home"        && <HomePage onNav={setPage} />}
        {page === "Firm"        && <FirmPage />}
        {page === "Strategies"  && <StrategiesPage />}
        {page === "Plantations" && <PlantationsPage />}
        {page === "Insights"    && <InsightsPage />}
        {page === "Contact"     && <ContactPage />}
      </main>
      <KxFooter onNav={setPage} />
    </>
  );
}

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