// Main app wrapper — mounts everything inside ThemeProvider + RouterProvider

function Shell() {
  const { route } = useRouter();
  const { t } = useTheme();
  const path = route.path;
  const active =
    path === '/' ? 'home' :
    path.startsWith('/clinic') ? 'clinics' :
    path.startsWith('/services') ? 'services' :
    path.startsWith('/article') ? 'articles' :
    path.startsWith('/booking') ? 'booking' :
    path.startsWith('/about') ? 'about' : 'home';

  let Page;
  if (path === '/') Page = <Home/>;
  else if (path === '/clinics') Page = <ClinicsList/>;
  else if (path.startsWith('/clinic/')) Page = <ClinicDetail/>;
  else if (path === '/services') Page = <ServicesCompare/>;
  else if (path === '/articles') Page = <ArticleList/>;
  else if (path.startsWith('/article/')) Page = <ArticleDetail/>;
  else if (path === '/booking') Page = <Booking/>;
  else if (path === '/about') Page = <About/>;
  else Page = <div style={{ padding: 40, textAlign: 'center', color: t.textMuted }}>404 — Không tìm thấy trang <a onClick={() => window.location.hash = '/'} style={{ cursor: 'pointer', color: t.blue }}>Về trang chủ</a></div>;

  return (
    <div style={{ minHeight: '100vh', background: t.surface }}>
      <Header active={active}/>
      <main>{Page}</main>
      <Footer/>
      <Tweaks/>
    </div>
  );
}

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

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