/* Harupa.pro — main page app. */
(function () {
  const { SiteNav, SiteFooter, useLangState, scrollToId } = window.HPChrome;

  function App() {
    const { lang, setLang, t } = useLangState("main");
    const links = [
      { label: t("nav-services"), id: "services" },
      { label: t("nav-engagement"), id: "engagement" },
      { label: t("nav-track"), id: "track-record" },
      { label: t("nav-about"), id: "about" },
      { label: t("nav-articles"), id: "articles" },
      { label: t("nav-contact"), id: "contact" },
    ];
    return (
      <React.Fragment>
        <SiteNav t={t} lang={lang} setLang={setLang} links={links} ctaId="contact" />
        <window.HPHero t={t} onNavigate={scrollToId} />
        <window.HPEngagement t={t} />
        <window.HPServices t={t} />
        <window.HPWhyFractional t={t} />
        <window.HPTrackRecord t={t} />
        <window.HPAbout t={t} />
        <window.HPArticles t={t} lang={lang} />
        <window.HPContact t={t} />
        <SiteFooter t={t} />
      </React.Fragment>
    );
  }
  ReactDOM.createRoot(document.getElementById("hp-app")).render(<App />);
})();