/* ================= ROUTER ================= */

function NotFound() {
  return (
    <React.Fragment>
      <PageHero eyebrow="404" en="Not Found"
        title={<>Halaman tidak <em className="serif-it">ditemukan</em>.</>}
        sub="Maaf, halaman yang kamu cari tidak ada atau sudah dipindahkan." />
      <section className="section">
        <div className="wrap" style={{ textAlign: "center" }}>
          <a className="btn btn--primary btn--lg" href="#/">Kembali ke Beranda <Arrow /></a>
        </div>
      </section>
    </React.Fragment>
  );
}

const ROUTES = {
  home: HomePage,
  tentang: TentangPage,
  program: ProgramPage,
  galeri: GaleriPage,
  berita: BeritaPage,
  pengurus: PengurusPage,
  kontak: KontakPage,
};

function App() {
  const route = useRoute();
  const Page = ROUTES[route] || NotFound;
  return (
    <React.Fragment>
      <Nav />
      <main key={route}>
        <Page />
      </main>
      <Footer />
    </React.Fragment>
  );
}

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