// Resources hub: two cards leading to Books & Articles and Video Library, plus YouTube channel banner.

function ResourcesApp() {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{ "themeColor": "navy" } /*EDITMODE-END*/);
  useLucideIcons([tweaks]);
  useTweakBodyClasses(tweaks);

  return (
    <>
      <SiteNav active="resources" />

      <header className="page-header">
        <div className="container" style={{ textAlign: "center" }}>
          <div className="resources-hero-image">
            <img src={(window.CURRENT_LANG || "en") === "en" ? "assets/resources-hero.jpg" : "assets/resources-hero-de.jpg"} alt="A hand holding a digital workspace surrounded by PMO icons — knowledge, reports, dashboards, teams, and tools" />
          </div>
          <span className="eyebrow">{t("resources.eyebrow")}</span>
          <h1 style={{ textAlign: "center", fontSize: "35px" }}>{t("resources.title")}</h1>
          <p>{t("resources.sub")}</p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="resource-hubs">
            <a href="articles.html" className="resource-hub">
              <span className="resource-hub-icon"><i data-lucide="file-text"></i></span>
              <h2>{t("resources.card1Title")}</h2>
              <p>{t("resources.card1Body")}</p>
              <span className="resource-hub-foot">{t("resources.card1Cta")} <i data-lucide="arrow-right"></i></span>
            </a>
            <a href="books-templates.html" className="resource-hub">
              <span className="resource-hub-icon"><i data-lucide="layout-template"></i></span>
              <h2>{t("resources.card3Title")}</h2>
              <p>{t("resources.card3Body")}</p>
              <span className="resource-hub-foot">{t("resources.card3Cta")} <i data-lucide="arrow-right"></i></span>
            </a>
          </div>
        </div>
      </section>

      <section className="section--tight" style={{ background: "var(--color-surface-alt)" }}>
        <div className="container">
          <div className="channel-banner">
            <span className="channel-banner-icon"><YouTubeGlyph size={28} /></span>
            <div>
              <h3>{t("resources.ytTitle")}</h3>
              <p>{t("resources.ytBody")}</p>
            </div>
            <a href={SITE.ytChannel()} target="_blank" rel="noopener noreferrer" className="btn btn--lg">
              {t("resources.ytButton")} <i data-lucide="external-link"></i>
            </a>
          </div>
        </div>
      </section>

      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Primary color"
        value={tweaks.themeColor}
        onChange={(v) => setTweak("themeColor", v)}
        options={[
        { value: "navy", label: "Navy" },
        { value: "graphite", label: "Graphite" },
        { value: "emerald", label: "Emerald" },
        { value: "gold", label: "Gold" }]
        } />
      </TweaksPanel>
    </>);

}

window.ResourcesApp = ResourcesApp;