/* global React */
function AcademiaEnAccion() {
  const images = [
    window.__r('aa01','academia-accion/01.avif'),
    window.__r('aa02','academia-accion/02.avif'),
    window.__r('aa03','academia-accion/03.avif'),
    window.__r('aa04','academia-accion/04.avif'),
    window.__r('aa05','academia-accion/05.avif'),
    window.__r('aa06','academia-accion/06.avif'),
    window.__r('aa07','academia-accion/07.avif'),
    window.__r('aa08','academia-accion/08.avif'),
    window.__r('aa09','academia-accion/09.avif'),
    window.__r('aa10','academia-accion/10.avif'),
    window.__r('aa11','academia-accion/11.avif'),
    window.__r('aa12','academia-accion/12.avif'),
    window.__r('aa13','academia-accion/13.avif'),
  ];
  const loop = [...images, ...images];
  return (
    <section className="acmp-accion">
      <div className="acmp-accion-head">
        <h2 className="acmp-accion-title"><span style={{ color: 'rgb(0, 0, 0)' }}>La Academia en acción</span></h2>
      </div>
      <div className="acmp-accion-marquee">
        <div className="acmp-accion-track">
          {loop.map((src, i) => (
            <div className="acmp-accion-card" key={i}>
              <img src={src} alt="" loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { AcademiaEnAccion });