// Upcoming Events — full grid on calendar page; compact list on homepage
function UpcomingEvents({ t, setPage, compact }) {
  const lang = t.locale;
  const ui = t.templeActivities.events;
  const cats = ui.categories;
  const limit = compact ? 3 : 6;
  const events = (window.TempleActivitiesData && window.TempleActivitiesData.getUpcomingEvents())
    ? window.TempleActivitiesData.getUpcomingEvents().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, { weekday: "short", day: "numeric", month: "short", year: "numeric" });
  }

  if (compact) {
    return (
      <TempleSection id="upcoming-events" eyebrow={ui.eyebrow} title={ui.homeTitle || ui.title} intro={ui.homeIntro || ui.intro} alt>
        <div className="wn-events-compact" style={{ display: "grid", gap: "12px" }}>
          {events.map(function (event) {
            return (
              <article
                key={event.id}
                className="wn-event-compact"
                style={{
                  display: "grid",
                  gridTemplateColumns: "88px minmax(0, 1fr) auto",
                  gap: "16px",
                  alignItems: "center",
                  padding: "clamp(14px, 3vw, 20px)",
                  background: "var(--bg)",
                  border: "1px solid var(--line)",
                  borderRadius: "20px",
                }}
              >
                <img
                  src={event.image}
                  alt={taText(event.title, lang)}
                  loading="lazy"
                  className="wn-event-compact-thumb"
                  style={{
                    width: "88px",
                    height: "88px",
                    borderRadius: "14px",
                    objectFit: "cover",
                    display: "block",
                    border: "1px solid var(--line)",
                    background: "var(--bg-deep)",
                  }}
                />
                <div style={{ minWidth: 0 }}>
                  <time dateTime={event.date} style={{ display: "block", fontFamily: "var(--font-body)", fontSize: "14px", letterSpacing: "0.04em", color: "var(--accent-deep)", marginBottom: "6px" }}>
                    {formatDate(event.date)} · {event.time}
                  </time>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px, 3.8vw, 26px)", lineHeight: 1.25, margin: "0 0 6px", color: "var(--ink)" }}>
                    {taText(event.title, lang)}
                  </h3>
                  <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(15px, 3vw, 16px)", lineHeight: 1.6, color: "var(--muted)", margin: 0 }}>
                    {taText(event.description, lang)}
                  </p>
                </div>
                <TemplePrimaryButton onClick={function () { setPage("calendar"); }}>
                  {ui.viewDetails}
                </TemplePrimaryButton>
              </article>
            );
          })}
        </div>
        <div style={{ marginTop: "24px", textAlign: "center" }}>
          <TempleGhostButton onClick={function () { setPage("calendar"); }}>
            {ui.viewAll} →
          </TempleGhostButton>
        </div>
      </TempleSection>
    );
  }

  return (
    <TempleSection id="upcoming-events" eyebrow={ui.eyebrow} title={ui.title} intro={ui.intro} alt>
      <div className="wn-events-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "20px" }}>
        {events.map(function (event) {
          return (
            <article key={event.id} className="wn-event-card" style={{ display: "flex", flexDirection: "column", background: "var(--bg)", border: "1px solid var(--line)", borderRadius: "24px", overflow: "hidden", boxShadow: "0 16px 42px rgba(43,33,24,0.06)" }}>
              <div style={{ position: "relative", aspectRatio: "16 / 10", overflow: "hidden" }}>
                <img src={event.image} alt={taText(event.title, lang)} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                <div style={{ position: "absolute", top: "14px", left: "14px" }}>
                  <TempleCategoryBadge label={cats[event.category] || event.category} />
                </div>
              </div>
              <div style={{ padding: "22px", display: "flex", flexDirection: "column", flex: 1, gap: "12px" }}>
                <time dateTime={event.date} style={{ fontFamily: "var(--font-body)", fontSize: "12px", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--accent-deep)" }}>
                  {formatDate(event.date)} · {event.time}
                </time>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(22px, 3.5vw, 26px)", lineHeight: 1.2, margin: 0, color: "var(--ink)" }}>
                  {taText(event.title, lang)}
                </h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(15px, 3vw, 16px)", lineHeight: 1.65, color: "var(--muted)", margin: 0, flex: 1 }}>
                  {taText(event.description, lang)}
                </p>
                <div style={{ fontFamily: "var(--font-body)", fontSize: "13px", color: "var(--ink)", opacity: 0.8 }}>
                  ⌖ {taText(event.location, lang)}
                </div>
                <div className="wn-event-actions" style={{ display: "flex", flexDirection: "column", gap: "8px", paddingTop: "6px" }}>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
                    <TemplePrimaryButton onClick={function () { setPage("calendar"); }}>
                      {ui.viewDetails}
                    </TemplePrimaryButton>
                    <TempleGhostButton href={window.TempleActivitiesData.googleCalendarUrl(event, lang)} external>
                      {ui.addCalendar}
                    </TempleGhostButton>
                  </div>
                  <EventRegisterForm event={event} ui={ui} lang={lang} />
                </div>
              </div>
            </article>
          );
        })}
      </div>
      <div style={{ marginTop: "28px", textAlign: "center" }}>
        <TempleGhostButton onClick={function () { setPage("calendar"); }}>
          {ui.viewAll} →
        </TempleGhostButton>
      </div>
    </TempleSection>
  );
}