const JOIN = [
  {
    num: 'Wednesday, 1st July 2026',
    title: 'Save yourself a seat',
    desc: "Be in the room for the first evening in Lisbon: the JACK story, an aperitivo, music, and people who care like you do.",
    cta: 'reserve a seat →',
    tone: 'olive',
    href: '#gathering',
  },
  {
    num: 'stay connected',
    title: 'Join the community',
    desc: "A quiet circle on WhatsApp and beyond, where we swap tools, ethical finds, and ways to help. You are not powerless, and you are not alone.",
    cta: 'join the circle →',
    tone: 'sage',
    href: '#',
  },
  {
    num: 'lend a hand',
    title: 'Offer your skills',
    desc: "Not everyone can move to Congo for thirty years. But everyone can do something: visibility, ideas, partnerships, a craft. Tell us what's yours.",
    cta: 'write to us →',
    tone: 'ochre',
    href: '#',
  },
];

function Join() {
  return (
    <section className="tgp-band tgp-join" id="join">
      <div className="tgp-section-head">
        <div className="tgp-eyebrow">how to be part of it</div>
        <h2 className="tgp-h2">
          You don't have to do everything.<br />Just <em>something</em>.
        </h2>
      </div>
      <div className="tgp-inner">
        <div className="tgp-join-grid">
          {JOIN.map((j, i) => (
            <article className={`tgp-join-card tgp-join-card-${j.tone}`} key={i}>
              <div className="tgp-join-num">{j.num}</div>
              <h3 className="tgp-join-title">{j.title}</h3>
              <p className="tgp-join-desc">{j.desc}</p>
              <a className="tgp-join-cta" href={j.href}>{j.cta}</a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Join = Join;