/* global React, ReactDOM, useRoute, Nav, Footer, HomePage, PVRPage, MCCPage, TTPage, DCPage, ContactPage */

const App = () => {
  const [route, navigate] = useRoute();

  React.useEffect(() => {
    if (route === "privacy") window.location.replace("/privacy-policy/");
  }, [route]);

  let page;
  switch (route) {
    case "private-video-recorder": page = <PVRPage navigate={navigate}/>; break;
    case "motion-clock-camera": page = <MCCPage navigate={navigate}/>; break;
    case "truetide": page = <TTPage navigate={navigate}/>; break;
    case "dual-camera": page = <DCPage navigate={navigate}/>; break;
    case "contact": page = <ContactPage navigate={navigate}/>; break;
    case "home":
    default: page = <HomePage navigate={navigate}/>;
  }

  return (
    <>
      <Nav route={route} navigate={navigate}/>
      <main key={route}>{page}</main>
      <Footer navigate={navigate}/>
    </>
  );
};

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