/* global React, ReactDOM, Nav, Footer, useHashRoute, useReveal,
   HomePage, AboutPage, PhilosophyPage, ServicesPage, ContactPage,
   DisclaimerPage, PrivacyPage, TermsPage, HipaaPage, GoodFaithPage, AccessibilityPage */

const { useEffect } = React;

function App() {
  const [route, navigate] = useHashRoute();
  useReveal();

  // re-run reveal observer on route change
  useEffect(() => {
    const t = setTimeout(() => {
      document.querySelectorAll(".reveal:not(.is-in)").forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight && r.bottom > 0) el.classList.add("is-in");
      });
    }, 50);
    return () => clearTimeout(t);
  }, [route]);

  let Page;
  switch (route) {
    case "about":      Page = AboutPage; break;
    case "philosophy": Page = PhilosophyPage; break;
    case "services":   Page = ServicesPage; break;
    case "contact":    Page = ContactPage; break;
    case "disclaimer": Page = DisclaimerPage; break;
    case "privacy":    Page = PrivacyPage; break;
    case "terms":      Page = TermsPage; break;
    case "hipaa":      Page = HipaaPage; break;
    case "gfe":        Page = GoodFaithPage; break;
    case "accessibility": Page = AccessibilityPage; break;
    default:           Page = HomePage;
  }

  return (
    <>
      <Nav route={route} navigate={navigate} dark={route === "home"} />
      <main key={route}>
        <Page navigate={navigate} />
      </main>
      <Footer navigate={navigate} />
    </>
  );
}

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