// Participants.jsx
function Participants() {
  const { t } = window.useI18n();
  return (
    <section className="section section--white">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t.participants.eyebrow}</span>
            <h2 className="section-title">{t.participants.title}</h2>
          </div>
          <p className="section-sub">{t.participants.sub}</p>
        </div>
        <div className="participants-grid">
          {t.participants.cards.map((c, i) => (
            <div className="participant" key={i}>
              <div className="participant__num">— {c.num}</div>
              <h4>{c.title}</h4>
              <p>{c.text}</p>
            </div>
          ))}
        </div>
        <blockquote className="quote">{t.participants.quote}</blockquote>
      </div>
    </section>
  );
}
window.Participants = Participants;