const PROGRAM = [
  {
    time: '18:00',
    title: 'Arrival aperitivo',
    desc: 'Conscious bites prepared by Marie. Good people, good music, good vibes.',
  },
  {
    time: '18:45',
    title: 'Welcome to The Good People',
    desc: 'Why we’re here, what we believe in, and how each of us can make a difference.',
  },
  {
    time: '18:55',
    title: 'Meet the heroes: JACK Congo',
    desc: 'The incredible work of Franck, Roxane and their team to protect chimpanzees and the Congo rainforest.',
  },
  {
    time: '19:15',
    title: 'Tools for action',
    desc: 'A look at Chilli, the app we recommend to turn good intentions into simple, effective actions.',
  },
  {
    time: '19:30',
    title: 'Conscious food',
    desc: 'A talk with Marie, our dietitian, on the quality and impact of what we eat, for our health, animals and the planet, followed by your questions.',
  },
  {
    time: '20:00',
    title: 'Open conversation & celebration',
    desc: 'Ideas, questions, projects and collaborations, with a DJ set in the background and creative talk, until we wrap up by 21:00.',
  },
];

function Gathering() {
  return (
    <section className="tgp-band tgp-gather" id="gathering">
      <div className="tgp-section-head">
        <div className="tgp-eyebrow">the first gathering</div>
        <h2 className="tgp-h2">An evening to begin with.</h2>
      </div>
      <div className="tgp-gather-card">
        <div className="tgp-gather-left">
          <div className="tgp-gather-dateline">
            <div className="tgp-gather-day">01</div>
            <div className="tgp-gather-when">
              <div className="tgp-gather-mo">Wednesday, 1st July 2026 · 18:00–21:00</div>
              <div className="tgp-gather-where">Aethos, <em>Lisbon</em></div>
            </div>
          </div>
          <div className="tgp-prog-kicker">program of the night</div>
          <ol className="tgp-program">
            {PROGRAM.map((p) => (
              <li className="tgp-prog-item" key={p.time}>
                <div className="tgp-prog-time">{p.time}</div>
                <div className="tgp-prog-body">
                  <h3 className="tgp-prog-title">{p.title}</h3>
                  <p className="tgp-prog-desc">{p.desc}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
        <div className="tgp-gather-right">
          <image-slot
            id="gathering-visual"
            className="tgp-gather-slot"
            style={{ width: '100%', height: 'auto', aspectRatio: '4 / 3' }}
            shape="rounded"
            radius="12"
            src="good-people/assets/aethos-sunset.png"
            placeholder="Drop a warm venue / aperitivo / candlelight photo"
          ></image-slot>
          <div className="tgp-gather-cta">
            <a className="tgp-btn tgp-btn-primary tgp-btn-lg" href="#join">Save me a seat</a>
            <p className="tgp-gather-fine">Free event. We keep seats for the people who reply.</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Gathering = Gathering;