// SERVICES HUB page
function ServicesApp() {
  const [lang, setLang] = useLang();
  const t = mergeT(lang);
  const sh = t.services_hub;
  const meta = t.services_meta || {};
  const slugs = window.SERVICE_KEYS;
  const iconMap = {
    'House': Icon.House, 'Building': Icon.Building, 'Kitchen': Icon.Kitchen,
    'Bath': Icon.Bath, 'Sparkle': Icon.Sparkle, 'Carpentry': Icon.Carpentry,
    'Finish': Icon.Finish, 'Clipboard': Icon.Clipboard, 'Remodeling': Icon.Remodeling,
  };
  return (
    <>
      <Header lang={lang} setLang={setLang} t={t} active="services" />
      <PageHero
        crumbs={[{ label: sh.crumb }]}
        eyebrow={sh.eyebrow}
        titlePre={sh.title_pre}
        titleAccent={sh.title_accent}
        lead={sh.lead}
      />

      <section className="section">
        <div className="container">
          <div className="service-hub-grid">
            {slugs.map((slug, i) => {
              const card = sh.cards[slug];
              const m = meta[slug];
              if (!card) return null;
              const Ic = iconMap[card.ic] || Icon.Construction;
              return (
                <a className="service-hub-card" href={`service-${slug}.html`} key={slug}>
                  <div className="ic"><Ic size={28} /></div>
                  <h3>{m.title}</h3>
                  <p>{card.desc}</p>
                  <span className="lk">{lang === 'en' ? 'Learn more' : 'Saber más'} <Icon.ArrowRight size={12} /></span>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      <CTABanner t={t} />
      <FooterMP lang={lang} t={t} />
    </>
  );
}

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