// SERVICE DETAIL — slug read from <meta name="page-service" content="...">
function ServiceDetailApp() {
  const [lang, setLang] = useLang();
  const t = mergeT(lang);
  const slug = (document.querySelector('meta[name="page-service"]') || {}).content || "residential";
  const meta = (t.services_meta || {})[slug] || { title: slug };
  const sd = (t.service_detail || {})[slug] || {};
  return (
    <>
      <Header lang={lang} setLang={setLang} t={t} active="service-detail" />
      <PageHero
        crumbs={[
          { label: t.nav.services, href: "services.html" },
          { label: sd.crumb || meta.title },
        ]}
        eyebrow={meta.short && meta.short.toUpperCase()}
        titlePre={sd.title || meta.title}
        lead={sd.lead}
      />
      <ServiceDetailBody slug={slug} t={t} lang={lang} />
      <CTABanner t={t} />
      <FooterMP lang={lang} t={t} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<ServiceDetailApp />);