// Latest Temple News — update feed
function TempleNews({ t, setPage, compact }) {
  const lang = t.locale;
  const ui = t.templeActivities.news;
  const cats = ui.categories;
  const limit = compact ? 3 : 5;
  const items = (window.TEMPLE_ACTIVITIES && window.TEMPLE_ACTIVITIES.news) ? window.TEMPLE_ACTIVITIES.news.slice(0, limit) : [];

  function formatDate(iso) {
    const p = iso.split("-");
    const d = new Date(Number(p[0]), Number(p[1]) - 1, Number(p[2]));
    const loc = lang === "th" ? "th-TH" : lang === "no" ? "nb-NO" : "en-GB";
    return d.toLocaleDateString(loc, { day: "numeric", month: compact ? "short" : "long", year: "numeric" });
  }

  if (compact) {
    return (
      <TempleSection id="temple-news" eyebrow={ui.eyebrow} title={ui.title} intro={ui.homeIntro || ui.intro} compact>
        <div className="wn-news-list" style={{ display: "grid", gap: "10px" }}>
          {items.map(function (item) {
            return (
              <article
                key={item.id}
                className="wn-news-item"
                style={{
                  display: "grid",
                  gridTemplateColumns: "auto 1fr",
                  gap: "14px",
                  alignItems: "start",
                  padding: "14px 16px",
                  background: "var(--bg)",
                  border: "1px solid var(--line)",
                  borderRadius: "16px",
                }}
              >
                <time dateTime={item.date} style={{ fontFamily: "var(--font-body)", fontSize: "12px", letterSpacing: "0.04em", color: "var(--muted)", whiteSpace: "nowrap", paddingTop: "2px" }}>
                  {formatDate(item.date)}
                </time>
                <div>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(18px, 3.5vw, 22px)", lineHeight: 1.25, margin: "0 0 4px", color: "var(--ink)" }}>
                    {taText(item.title, lang)}
                  </h3>
                  <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(14px, 2.8vw, 15px)", lineHeight: 1.55, color: "var(--muted)", margin: 0 }}>
                    {taText(item.summary, lang)}
                  </p>
                </div>
              </article>
            );
          })}
        </div>
        <div style={{ marginTop: "14px", display: "flex", flexWrap: "wrap", gap: "12px", alignItems: "center" }}>
          <a href="https://www.facebook.com/watthainorway" target="_blank" rel="noopener noreferrer" style={{ fontFamily: "var(--font-body)", fontSize: "13px", color: "var(--nordic)", textDecoration: "none" }}>
            {ui.facebookLink} →
          </a>
        </div>
      </TempleSection>
    );
  }

  return (
    <TempleSection id="temple-news" eyebrow={ui.eyebrow} title={ui.title} intro={ui.intro}>
      <div className="wn-news-list" style={{ display: "grid", gap: "14px" }}>
        {items.map(function (item, i) {
          return (
            <article
              key={item.id}
              className="wn-news-item"
              style={{
                display: "grid",
                gridTemplateColumns: i === 0 ? "1fr" : "auto 1fr auto",
                gap: "18px",
                alignItems: "center",
                padding: "clamp(18px, 3vw, 24px)",
                background: i === 0 ? "linear-gradient(180deg, #fffdf8, var(--bg))" : "var(--bg)",
                border: "1px solid var(--line)",
                borderRadius: "22px",
              }}
            >
              {i > 0 && (
                <time dateTime={item.date} style={{ fontFamily: "var(--font-body)", fontSize: "12px", letterSpacing: "0.06em", color: "var(--muted)", whiteSpace: "nowrap" }}>
                  {formatDate(item.date)}
                </time>
              )}
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: "10px", flexWrap: "wrap", marginBottom: "8px" }}>
                  <TempleCategoryBadge label={cats[item.category] || item.category} />
                  {i === 0 && (
                    <time dateTime={item.date} style={{ fontFamily: "var(--font-body)", fontSize: "12px", color: "var(--muted)" }}>
                      {formatDate(item.date)}
                    </time>
                  )}
                </div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: i === 0 ? "clamp(26px, 4vw, 34px)" : "clamp(20px, 3.5vw, 24px)", lineHeight: 1.2, margin: "0 0 8px", color: "var(--ink)" }}>
                  {taText(item.title, lang)}
                </h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(15px, 3vw, 17px)", lineHeight: 1.7, color: "var(--muted)", margin: 0, maxWidth: "68ch" }}>
                  {taText(item.summary, lang)}
                </p>
              </div>
              <TempleGhostButton onClick={function () { setPage("calendar"); }}>
                {ui.readMore} →
              </TempleGhostButton>
            </article>
          );
        })}
      </div>
      <div style={{ marginTop: "24px" }}>
        <a href="https://www.facebook.com/watthainorway" target="_blank" rel="noopener noreferrer" style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--nordic)", textDecoration: "none" }}>
          {ui.facebookLink} →
        </a>
      </div>
    </TempleSection>
  );
}