// Homepage events teaser — compact, one row (cover only; more photos on detail page)
function EventsPreview({ t, setPage }) {
  const lang = t.locale;
  const copy = t.eventsPage;
  const events = window.TempleEventsData.templeEvents.slice(0, 2);

  return (
    <section
      id="events-preview"
      className="wn-home-section"
      aria-labelledby="events-preview-title"
      style={{ padding: "clamp(40px, 6vw, 64px) 0", background: "var(--bg-deep)", borderTop: "1px solid var(--line)" }}
    >
      <div className="wn-container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: "16px", flexWrap: "wrap", marginBottom: "20px" }}>
          <div>
            <Eyebrow>{copy.homeEyebrow}</Eyebrow>
            <h2 id="events-preview-title" className="wn-h3" style={{ margin: "0" }}>{copy.homeTitle}</h2>
          </div>
          <button
            type="button"
            onClick={function () { setPage("events"); }}
            style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--ink)", borderBottom: "1px solid var(--accent)", padding: "4px 0" }}
          >
            {copy.viewAll} →
          </button>
        </div>

        <div style={{ display: "grid", gap: "10px" }}>
          {events.map(function (event) {
            return (
              <article
                key={event.id}
                className="wn-event-compact"
                style={{
                  display: "grid",
                  gridTemplateColumns: "72px minmax(0, 1fr)",
                  gap: "14px",
                  alignItems: "center",
                  padding: "12px 14px",
                  background: "var(--bg)",
                  border: "1px solid var(--line)",
                  borderRadius: "16px",
                }}
              >
                <button
                  type="button"
                  onClick={function () { setPage("eventDetail", { slug: event.slug }); }}
                  style={{ display: "contents", border: "none", background: "none", padding: 0, cursor: "pointer", textAlign: "left" }}
                >
                  <img
                    src={event.coverImage}
                    alt={window.TempleEventsData.eventTitle(event, lang)}
                    width={144}
                    height={144}
                    loading="lazy"
                    decoding="async"
                    style={{ width: "72px", height: "72px", borderRadius: "12px", objectFit: "cover", display: "block", border: "1px solid var(--line)", background: "var(--gold-soft)" }}
                  />
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--accent-deep)", marginBottom: "4px" }}>
                      {copy.categories[event.categoryKey] || event.category}
                    </div>
                    <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(18px, 3.2vw, 22px)", lineHeight: 1.25, margin: "0 0 4px", color: "var(--ink)" }}>
                      {window.TempleEventsData.eventTitle(event, lang)}
                    </h3>
                    <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", lineHeight: 1.5, color: "var(--muted)", margin: 0 }}>
                      {window.TempleEventsData.eventDescription(event, lang)}
                    </p>
                  </div>
                </button>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}