// app.jsx — reads window.__PAGE_CONFIG__ and renders the matching page inside shared chrome.

const PAGE_TYPES = {
  home: HomePageBody,
  about: AboutBody,
  howwework: HowWeWorkBody,
  contact: ContactBody,
  accessibility: AccessibilityBody,
  privacy: PrivacyBody,
  terms: TermsBody,
  category: (props) => <CategoryPageBody slug={props.slug} />,
  city: (props) => <CityPageBody slug={props.slug} />,
  serviceshub: ServicesHubBody,
  areashub: AreasHubBody,
  booking: BookingBody
  // v2: `item` and `post` types are gone — 72 item routes fold into their category
  // page as anchored sections, 3 filler blog posts 301 to /. See redirects.json.
};

function NotFoundBody() {
  return (
    <section className="notfound">
      <div className="container">
        <div className="eyebrow">404</div>
        <h1 className="h-display">We couldn't find that page.</h1>
        <p>The page you're looking for may have moved. Try heading back home, or give us a call.</p>
        <Btn href={href('')} variant="primary" size="lg">Back to Home</Btn>
      </div>
    </section>
  );
}

function App() {
  const cfg = window.__PAGE_CONFIG__ || { type: 'home', slug: '' };
  const PageBody = PAGE_TYPES[cfg.type];

  const navActive = cfg.type === 'howwework' ? 'howwework'
    : cfg.type === 'category' || cfg.type === 'serviceshub' ? 'services'
    : cfg.type === 'city' ? 'areashub'
    : cfg.type;

  return (
    <>
      <UtilityBar />
      <Nav active={navActive} />
      <main data-screen-label={cfg.label || cfg.type}>
        {PageBody ? <PageBody {...cfg} /> : <NotFoundBody />}
      </main>
      <Footer />
      <MobileCallBar />
    </>
  );
}

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