// REWIND website — PUBLIC EVENTS. Editorial calendar in the REWIND idiom: dark
// ground, hairline-separated rows, tracked-caps meta on the left, the flyer and
// the billing on the right. Data-driven (window.RW_DATA.publicEvents).
function PublicEventsView({ go }) {
  const D = window.RW_DATA;
  const U = window.RW_CONTENT.ui.publicEvents;
  const M = window.RW_CONTENT.media || {};
  const media = (value, fallback) => value ? (/^(data:|https?:|\/)/.test(value) ? value : RWA(value)) : fallback;
  const withEmail = (text) => text.replace("{email}", D.contact.general);
  // Past events drop off on their own. A record without a valid end time is
  // incomplete rather than indefinitely current, so it stays off the public
  // calendar until the editor supplies one.
  const now = Date.now();
  const events = (D.publicEvents || []).filter((ev) => (
    !ev.manualHide
    && typeof ev.ends === "string"
    && Number.isFinite(new Date(ev.ends).getTime())
    && new Date(ev.ends).getTime() > now
  ));

  return (
    <div>
      {/* image-led hero */}
      <section className="phero phero--sm">
        <img className="pimg" src={media(M.publicEventsHeroImage, RWA("c-rewind2331"))} alt="" style={{ opacity: 0.7 }} />
        <div className="pscrim"></div>
      </section>

      {/* the calendar */}
      <section className="sec">
        <div className="wrap">
          <div className="sec-head" style={{ marginBottom: "var(--vs-5)" }}>
            <h2 className="rw-marquee title" style={{ margin: 0 }}>{U.heading}</h2>
          </div>

          {events.length === 0 && (
            <p className="lead" style={{ margin: "0 auto", maxWidth: "52ch", textAlign: "left" }}>
              {withEmail(U.empty)}
            </p>
          )}

          <div className="evlist">
            {events.map((ev) => (
              <article key={ev.id} className="evrow" data-rw-field="eventAssets" data-rw-event-id={ev.__eventId}>
                <div className="evmeta">
                  <span className="evwhen">{ev.date}</span>
                  <span className="evdot">{ev.time}</span>
                  <span className="evtag">{ev.kind}</span>
                  <span className="evdot">{ev.room}</span>
                </div>
                <div className="evbody">
                  <div className="frame evcover" style={{ aspectRatio: ev.flyerRatio || "4 / 5" }}>
                    <RWZoomImg src={media(ev.flyer, "")} alt={ev.title + " flyer"} loading="lazy" />
                  </div>
                  <div>
                    <span className="eyebrow" style={{ color: "var(--champagne)" }}>{ev.vol}</span>
                    <h3 className="rw-heading subsec" style={{ margin: "12px 0 0" }}>{ev.title}</h3>
                    <p className="rw-subtitle" style={{ margin: "14px 0 0", fontWeight: "var(--wt-light)" }}>{ev.lineup}</p>
                    {ev.genres ? <p className="lead" style={{ margin: "6px 0 0" }}>{ev.genres}</p> : null}
                    <p className="lead" style={{ margin: "18px 0 0" }}>{ev.blurb}</p>
                    <div className="cta-row">
                      <a className="btn btn--champ" data-rw-field="publicEventsRsvpUrl" href={ev.rsvp || D.rsvpUrl} target="_blank" rel="noopener">{U.rsvp}</a>
                    </div>
                  </div>
                </div>
              </article>
            ))}
          </div>

          {events.length > 0 && <p className="fineprint" style={{ marginTop: "var(--vs-5)" }}>{withEmail(U.more)}</p>}
        </div>
      </section>
    </div>);

}
window.PublicEventsView = PublicEventsView;