function Partners() {
  return (
    <section className="block" data-screen-label="Partners">
      <div className="page">
        <div className="section-head">
          <div className="kicker">04 · Colaboran</div>
          <h2>Partners<br/>tecnológicos<span style={{color:'var(--accent)'}}>.</span></h2>
          <div className="aside">
            Cinco referentes que construyen con nosotros la jornada y sus contenidos.
          </div>
        </div>

        <div className="partners-grid">
          {PARTNERS.map((p, i) => (
            <div key={i} className="partner" title={`${p.name} · ${p.sub}`}>
              {p.logo ? (
                <img
                  src={p.logo}
                  alt={p.name}
                  className="partner-logo"
                  loading="lazy"
                  onError={(e) => { e.currentTarget.style.display = 'none'; }}
                />
              ) : (
                <div className="name">{p.name}</div>
              )}
              <div className="sub">{p.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Partners = Partners;
