// Events listing — reads from TempleEventsData (data/events.ts)
function EventsPage({ t, setPage }) {
  const lang = t.locale;
  const copy = t.eventsPage;
  const cats = copy.categories;
  const events = window.TempleEventsData.templeEvents;
  const [filter, setFilter] = useState("all");

  const filtered = filter === "all"
    ? events
    : events.filter(function (e) { return e.categoryKey === filter; });

  const filters = window.TempleEventsData.categoryKeys.map(function (id) {
    return { id: id, label: cats[id] || id };
  });

  return (
    <div>
      <div className="wn-container">
        <PageHeading eyebrow={copy.eyebrow} title={copy.title} intro={copy.intro} />
      </div>

      <section style={{ paddingBottom: "80px" }}>
        <div className="wn-container">
          <div className="wn-gallery-filters" style={{ display: "flex", flexWrap: "wrap", gap: "8px", marginBottom: "28px" }} role="group" aria-label={copy.filterLabel}>
            {filters.map(function (f) {
              return (
                <TempleFilterChip key={f.id} label={f.label} active={filter === f.id} onClick={function () { setFilter(f.id); }} />
              );
            })}
          </div>

          <div className="wn-events-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "clamp(16px, 2.5vw, 24px)" }}>
            {filtered.map(function (event) {
              const primaryTitle = window.TempleEventsData.eventTitle(event, lang);
              const secondaryTitle = lang === "th" ? event.title : event.thaiTitle;
              const href = window.TempleEventsData.pageHref("eventDetail", event.slug);
              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)",
                  }}
                >
                  <a
                    href={href}
                    onClick={function (e) {
                      e.preventDefault();
                      setPage("eventDetail", { slug: event.slug });
                    }}
                    style={{ padding: 0, border: "none", background: "none", cursor: "pointer", textAlign: "left", width: "100%", color: "inherit", textDecoration: "none" }}
                  >
                    <div style={{ position: "relative", aspectRatio: "16 / 10", overflow: "hidden", background: "var(--gold-soft)" }}>
                      <img
                        src={event.coverImage}
                        alt={primaryTitle}
                        width={1600}
                        height={1000}
                        loading="lazy"
                        decoding="async"
                        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                      />
                      <div style={{ position: "absolute", top: "14px", left: "14px" }}>
                        <TempleCategoryBadge label={cats[event.categoryKey] || event.category} />
                      </div>
                    </div>
                    <div style={{ padding: "clamp(18px, 3vw, 24px)" }}>
                      <time style={{ display: "block", fontFamily: "var(--font-body)", fontSize: "12px", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--accent-deep)", marginBottom: "10px" }}>
                        {event.date}
                      </time>
                      <h2 className="wn-h3" style={{ margin: "0 0 6px", color: "var(--ink)" }}>
                        {primaryTitle}
                      </h2>
                      {secondaryTitle && secondaryTitle !== primaryTitle && (
                        <p style={{ margin: "0 0 10px", fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--muted)" }}>
                          {secondaryTitle}
                        </p>
                      )}
                      <p className="wn-body" style={{ margin: "0 0 12px", color: "var(--muted)" }}>
                        {window.TempleEventsData.eventDescription(event, lang)}
                      </p>
                      {event.tags && event.tags.length > 0 && (
                        <div style={{ display: "flex", flexWrap: "wrap", gap: "6px" }}>
                          {event.tags.slice(0, 4).map(function (tag) {
                            return (
                              <span key={tag} style={{ fontFamily: "var(--font-body)", fontSize: "11px", padding: "3px 8px", borderRadius: "999px", background: "var(--gold-soft)", color: "var(--ink)" }}>
                                {tag}
                              </span>
                            );
                          })}
                        </div>
                      )}
                    </div>
                  </a>
                  <div style={{ padding: "0 clamp(18px, 3vw, 24px) clamp(18px, 3vw, 24px)", marginTop: "auto" }}>
                    <BtnGhost onClick={function () { setPage("eventDetail", { slug: event.slug }); }}>
                      {copy.viewDetails} →
                    </BtnGhost>
                  </div>
                </article>
              );
            })}
          </div>

          <div style={{ marginTop: "40px", textAlign: "center" }}>
            <BtnSecondary onClick={function () { setPage("gallery"); }}>
              {copy.viewGallery}
            </BtnSecondary>
          </div>
        </div>
      </section>
    </div>
  );
}