function Partners() {
  const { t } = useApp();
  return (
    <section className="partners section-pad" id="partners">
      <div className="container">
        <div className="reveal" style={{maxWidth:"56ch"}}>
          <div className="eyebrow" style={{marginBottom:"18px"}}>{t.partners.eyebrow}</div>
          <h2 className="h-section">{t.partners.title}</h2>
          <p className="body-lg" style={{marginTop:"20px"}}>{t.partners.lede}</p>
        </div>

        <div className="partner-row">
          {t.partners.list.map((p, i) => (
            <div key={i} className={`partner reveal delay-${i+1}`}>
              <div className="partner-logo">
                {p.logo ? (
                  <img src={p.logo} alt={t.a11y?.partnerLogoAlt ? t.a11y.partnerLogoAlt(p.name) : p.name} width={56} height={56} loading="lazy" decoding="async" />
                ) : (
                  <span aria-hidden="true">{p.mark}</span>
                )}
              </div>
              <div className="partner-role">{p.role}</div>
              <h3>{p.name}<span className="en">{p.en}</span></h3>
              <p>{p.body}</p>
              <div className="partner-lead">— {p.lead}</div>
            </div>
          ))}
        </div>

        <div className="mou-stack">
          {(t.partners.mous || []).map((m, i) => (
            <div key={i} className={`mou-bar reveal delay-${4 + i}`}>
              <div>
                <div className="lbl">{m.lbl}</div>
                <div className="title">{m.title}</div>
              </div>
              <div className="date">{m.date}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Partners = Partners;