// Video Gallery — YouTube embed cards
function TempleVideos({ t }) {
  const lang = t.locale;
  const ui = t.templeActivities.videos;
  const items = (window.TEMPLE_ACTIVITIES && window.TEMPLE_ACTIVITIES.videos) ? window.TEMPLE_ACTIVITIES.videos : [];

  return (
    <TempleSection id="temple-videos" eyebrow={ui.eyebrow} title={ui.title} intro={ui.intro}>
      <div className="wn-videos-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "20px" }}>
        {items.map(function (video) {
          const watchUrl = video.youtubeId
            ? "https://www.youtube.com/watch?v=" + video.youtubeId
            : (video.channelUrl || window.WTN_COMMUNITY.youtube);
          const thumb = video.youtubeId
            ? "https://img.youtube.com/vi/" + video.youtubeId + "/hqdefault.jpg"
            : "assets/life/chanting.jpg";

          return (
            <article key={video.id} className="wn-video-card" style={{ background: "var(--bg)", border: "1px solid var(--line)", borderRadius: "22px", overflow: "hidden", boxShadow: "0 14px 38px rgba(43,33,24,0.06)" }}>
              <a href={watchUrl} target="_blank" rel="noopener noreferrer" style={{ display: "block", position: "relative", aspectRatio: "16 / 9", overflow: "hidden" }}>
                <img src={thumb} alt={taText(video.title, lang)} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                <span style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(20,14,6,0.28)" }} aria-hidden="true">
                  <span style={{ width: "58px", height: "58px", borderRadius: "50%", border: "1px solid rgba(251,247,239,0.8)", display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(43,29,16,0.45)" }}>
                    <span style={{ width: 0, height: 0, borderTop: "10px solid transparent", borderBottom: "10px solid transparent", borderLeft: "16px solid var(--accent)", marginLeft: "4px" }} />
                  </span>
                </span>
              </a>
              <div style={{ padding: "20px" }}>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px, 3.2vw, 24px)", lineHeight: 1.2, margin: "0 0 10px", color: "var(--ink)" }}>
                  {taText(video.title, lang)}
                </h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(15px, 3vw, 16px)", lineHeight: 1.65, color: "var(--muted)", margin: "0 0 16px" }}>
                  {taText(video.description, lang)}
                </p>
                <TemplePrimaryButton href={watchUrl} external>
                  {ui.watch} →
                </TemplePrimaryButton>
              </div>
            </article>
          );
        })}
      </div>
      <div style={{ marginTop: "24px" }}>
        <a href={window.WTN_COMMUNITY.youtube} target="_blank" rel="noopener noreferrer" style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--nordic)", textDecoration: "none" }}>
          {ui.channelLink} →
        </a>
      </div>
    </TempleSection>
  );
}