// =============================================================
// Design Brains — Main App + Router
// =============================================================

function App() {
  return (
    <RouterProvider>
      <Shell />
    </RouterProvider>
  );
}

function Shell() {
  const { route } = useRouter();

  // Parse route
  let page = null;
  if (route === "/" || route === "") {
    page = <HomePage />;
  } else if (route === "/about") {
    page = <AboutPage />;
  } else if (route === "/services") {
    page = <ServicesPage />;
  } else if (route.startsWith("/services/")) {
    const parts = route.split("/").filter(Boolean); // ["services", slug, sub?]
    const slug = parts[1];
    const subSlug = parts[2];
    if (SERVICES[slug]) {
      page = <ServiceDetailPage slug={slug} subSlug={subSlug} />;
    } else {
      page = <NotFound />;
    }
  } else if (route === "/faq") {
    page = <FAQPage />;
  } else if (route === "/contact") {
    page = <ContactPage />;
  } else if (route === "/blog") {
    page = <BlogIndex />;
  } else if (route.startsWith("/blog/")) {
    const slug = route.split("/")[2];
    page = <BlogPostPage slug={slug} />;
  } else if (route === "/quote" || route.startsWith("/quote")) {
    page = <QuotePage />;
  } else {
    page = <NotFound />;
  }

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

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