const PAST = [
  {
    edition: 'edition #1',
    date: 'Wednesday, 1st July 2026',
    place: 'Aethos, Lisbon',
    partner: 'JACK Congo',
    desc: 'Our first evening. Franck and Roxane presented JACK, the sanctuary they built in Congo to protect chimpanzees orphaned by poaching, alongside an aperitivo, a live set by Ilhem, and a room full of people meeting for the first time.',
    videoId: '-7r2vgAc1CA',
    videoLabel: 'The film Franck showed that night',
  },
];

function VideoEmbed({ videoId, label }) {
  const [playing, setPlaying] = React.useState(false);
  return (
    <div className="tgp-past-video">
      {playing ? (
        <iframe
          className="tgp-past-frame"
          src={`https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&rel=0`}
          title={label}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        ></iframe>
      ) : (
        <button className="tgp-past-poster" onClick={() => setPlaying(true)} aria-label={`Play: ${label}`}>
          <img
            className="tgp-past-thumb"
            src={`https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`}
            alt=""
            loading="lazy"
          />
          <span className="tgp-past-play" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.5 L19 12 L8 18.5 Z"></path></svg>
          </span>
          <span className="tgp-past-vlabel">{label}</span>
        </button>
      )}
    </div>
  );
}

function PastEvents() {
  return (
    <section className="tgp-band tgp-past" id="past">
      <div className="tgp-section-head">
        <div className="tgp-eyebrow">where we have been</div>
        <h2 className="tgp-h2">Past gatherings.</h2>
      </div>
      <div className="tgp-inner">
        <ol className="tgp-past-list">
          {PAST.map((p) => (
            <li className="tgp-past-item" key={p.edition}>
              <div className="tgp-past-meta">
                <div className="tgp-past-edition">{p.edition}</div>
                <div className="tgp-past-date">{p.date}</div>
                <div className="tgp-past-place">{p.place}</div>
              </div>
              <div className="tgp-past-body">
                <h3 className="tgp-past-partner">{p.partner}</h3>
                <p className="tgp-past-desc">{p.desc}</p>
                {p.videoId ? <VideoEmbed videoId={p.videoId} label={p.videoLabel} /> : null}
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}
window.PastEvents = PastEvents;