/**
 * WannWo — sage block, two-column ceremony + reception. The venue
 * illustrations are now <image-slot>s seeded with the line-art sketches as
 * `src`, so each one doubles as a placeholder the user can replace by dropping
 * their own photo. Calendar buttons were removed in favour of the single
 * "add to calendar" link in the date section.
 */
function WannWo({ events, flourish }) {
  return (
    <section
      id="wann-wo"
      className="section section-sage wannwo"
      data-screen-label="04 Wann & Wo">

      <div className="inner">
        <header className="wannwo-head reveal">
          <h2>Wann &amp; Wo</h2>
        </header>

        <div className="wannwo-grid">
          {events.map((ev, i) =>
          <article
            key={ev.id}
            className="event reveal"
            style={{ transitionDelay: `${i * 120}ms` }}>

              <div className="event-illu">
                <image-slot
                id={`event-illu-${ev.id}`}
                src={ev.illu}
                fit="contain"
                shape="rect"
                placeholder="Eigenes Foto ablegen">
                </image-slot>
              </div>
              <div className="event-text">
                <h3>{ev.kind}</h3>
                <p className="event-venue">
                  <strong>{ev.venue}</strong>
                </p>
                <p className="event-detail">{ev.detail}</p>
                <a
                  className="btn event-map"
                  href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(ev.venue)}`}
                  target="_blank"
                  rel="noopener noreferrer">
                  <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                    <path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z" />
                    <circle cx="12" cy="10" r="2.5" />
                  </svg>
                  Auf der Karte
                </a>
              </div>
            </article>
          )}
        </div>
      </div>

      <div className="divider divider--bottom" aria-hidden="true">
        <DividerFlourish />
      </div>
    </section>);
}

if (typeof window !== "undefined") window.WannWo = WannWo;