// Single event — /events/[slug]
function EventDetailPage({ t, setPage, eventSlug }) {
  const lang = t.locale;
  const copy = t.eventsPage;
  const event = window.TempleEventsData.getBySlug(eventSlug);
  const [lightboxIndex, setLightboxIndex] = useState(null);

  if (!event) {
    return (
      <div className="wn-container" style={{ padding: "80px 0" }}>
        <PageHeading title={copy.notFoundTitle} intro={copy.notFoundBody} />
        <BtnPrimary onClick={function () { setPage("events"); }}>{copy.backToEvents}</BtnPrimary>
      </div>
    );
  }

  const title = window.TempleEventsData.eventTitle(event, lang);
  const secondaryTitle = lang === "th" ? event.title : event.thaiTitle;
  const description = window.TempleEventsData.eventDescription(event, lang);
  const allPhotos = window.TempleEventsData.eventImages(event);
  const extraPhotos = window.TempleEventsData.extraImages(event);
  const lightboxPhotos = allPhotos.map(function (src, i) {
    return { src: src, alt: title + (i > 0 ? " — " + i : "") };
  });

  return (
    <div>
      <div className="wn-container" style={{ paddingBottom: "24px" }}>
        <button
          type="button"
          onClick={function () { setPage("events"); }}
          style={{ background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--muted)", padding: "8px 0", marginBottom: "12px" }}
        >
          ← {copy.backToEvents}
        </button>
        <PageHeading
          eyebrow={copy.categories[event.categoryKey] || event.category}
          title={title}
          intro={description}
        />
        {secondaryTitle && secondaryTitle !== title && (
          <p style={{ margin: "-8px 0 12px", fontFamily: "var(--font-body)", fontSize: "16px", color: "var(--muted)" }}>
            {secondaryTitle}
          </p>
        )}
        <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", marginTop: "-4px", marginBottom: "8px" }}>
          <span style={{ fontFamily: "var(--font-body)", fontSize: "13px", color: "var(--accent-deep)" }}>{event.date}</span>
          {event.tags.map(function (tag) {
            return (
              <span key={tag} style={{ fontFamily: "var(--font-body)", fontSize: "12px", padding: "4px 10px", borderRadius: "999px", background: "var(--gold-soft)", color: "var(--ink)" }}>
                {tag}
              </span>
            );
          })}
        </div>
      </div>

      <section style={{ paddingBottom: "48px" }}>
        <div className="wn-container">
          <button
            type="button"
            onClick={function () { setLightboxIndex(0); }}
            aria-label={(copy.openPhoto || "Open photo") + ": " + title}
            style={{ display: "block", width: "100%", padding: 0, border: "none", background: "none", cursor: "zoom-in" }}
          >
            <img
              src={event.coverImage}
              alt={title}
              width={1600}
              height={1000}
              loading="eager"
              decoding="async"
              style={{ width: "100%", minHeight: "200px", maxHeight: "520px", objectFit: "cover", borderRadius: "24px", display: "block", border: "1px solid var(--line)", background: "var(--gold-soft)" }}
            />
          </button>
        </div>
      </section>

      {extraPhotos.length > 0 && (
        <section style={{ paddingBottom: "80px", background: "var(--bg-deep)" }}>
          <div className="wn-container">
            <h2 className="wn-h3" style={{ margin: "0 0 24px" }}>{copy.galleryHeading}</h2>
            <div className="wn-gallery-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "14px" }}>
              {extraPhotos.map(function (src, i) {
                const photoIndex = i + 1;
                return (
                  <figure
                    key={src}
                    role="button"
                    tabIndex={0}
                    onClick={function () { setLightboxIndex(photoIndex); }}
                    onKeyDown={function (e) { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setLightboxIndex(photoIndex); } }}
                    aria-label={(copy.openPhoto || "Open photo") + " " + (i + 1)}
                    style={{ margin: 0, overflow: "hidden", borderRadius: "16px", aspectRatio: "4 / 3", border: "1px solid var(--line)", background: "var(--gold-soft)", cursor: "zoom-in" }}
                  >
                    <img
                      src={src}
                      alt={title + " — " + (i + 1)}
                      width={1200}
                      height={900}
                      loading="lazy"
                      decoding="async"
                      style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                    />
                  </figure>
                );
              })}
            </div>
          </div>
        </section>
      )}

      <section style={{ paddingBottom: "80px" }}>
        <div className="wn-container" style={{ display: "flex", flexWrap: "wrap", gap: "12px" }}>
          <BtnPrimary onClick={function () { setPage("gallery"); }}>{copy.viewGallery}</BtnPrimary>
          <BtnGhost onClick={function () { setPage("calendar"); }}>{copy.viewCalendar}</BtnGhost>
          <BtnGhost onClick={function () { setPage("contact"); }}>{t.nav.contact}</BtnGhost>
        </div>
      </section>

      <PhotoLightbox
        photos={lightboxPhotos}
        index={lightboxIndex}
        onClose={function () { setLightboxIndex(null); }}
        onChange={setLightboxIndex}
        labels={{
          title: title,
          close: copy.close || "Close",
          prev: copy.prev || "Previous",
          next: copy.next || "Next",
        }}
      />
    </div>
  );
}