// Articles page — short-form practitioner reads + downloadables banner.

function ArticlesApp() {
  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">
          <span className="eyebrow">{t("art.eyebrow")}</span>
          <h1>{t("art.title")}</h1>
          <p>{t("art.sub")}</p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="section-head" style={{ marginBottom: 28 }}>
            <div className="section-head-text">
              <span className="eyebrow">{t("books.articlesEyebrow")}</span>
              <h2 style={{ fontSize: 28 }}>{t("books.articlesTitle")}</h2>
              <p>{t("books.articlesSub")}</p>
            </div>
          </div>

          <div className="article-list">
            {SITE.ARTICLES.map((a, i) => {
              const live = a.href && a.href !== "#";
              const Tag = live ? "a" : "div";
              const props = live ? { href: a.href } : {};
              return (
                <Tag key={i} {...props} className={"article-row" + (live ? "" : " is-static")}>
                  <span className="article-row-icon"><i data-lucide="file-text"></i></span>
                  <div className="article-row-body">
                    <div className="article-row-type">{tx(a, "type")}</div>
                    <h3 className="article-row-title">{tx(a, "title")}</h3>
                    <p className="article-row-desc">{tx(a, "desc")}</p>
                  </div>
                  <div className="article-row-meta">{a.minutes} {t("books.minRead")}{live ? <i data-lucide="arrow-right" style={{ width: 14, height: 14, marginLeft: 8 }}></i> : null}</div>
                </Tag>
              );
            })}
          </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"><i data-lucide="download"></i></span>
            <div>
              <h3>{t("books.dlTitle")}</h3>
              <p>{t("books.dlBody")}</p>
            </div>
            <a href="books-templates.html" className="btn btn--lg">
              {t("resources.card3Cta")} <i data-lucide="arrow-right"></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.ArticlesApp = ArticlesApp;