/* global React */
const { useState: useStateAA, useCallback: useCallbackAA } = React;

const ACCION_IMGS = [
  R('academia-accion/01.avif'),
  R('academia-accion/02.avif'),
  R('academia-accion/05.avif'),
  R('academia-accion/06.avif'),
  R('academia-accion/07.avif'),
  R('academia-accion/08.avif'),
  R('academia-accion/09.avif'),
  R('academia-accion/11.avif'),
  R('academia-accion/12.avif'),
  R('academia-accion/13.avif'),
];

function PhotoCard({ src, isActive, onClick }) {
  return (
    <div
      className={'acmp-aa-card' + (isActive ? ' is-active' : '')}
      onClick={!isActive ? onClick : undefined}
      role={!isActive ? 'button' : undefined}
      tabIndex={!isActive ? 0 : undefined}
      aria-label={!isActive ? 'Ver foto' : undefined}
    >
      <img src={src} alt="" loading="lazy" />
    </div>
  );
}

function AcademiaEnAccion() {
  const [active, setActiveAA] = useStateAA(0);
  const n = ACCION_IMGS.length;
  const prev = () => setActiveAA(a => (a - 1 + n) % n);
  const next = () => setActiveAA(a => (a + 1) % n);

  return (
    <section className="acmp-accion" id="accion">
      <style>{`
        .acmp-accion-head { text-align: center; padding: 0 24px; margin-bottom: 40px; }
        .acmp-accion-stage {
          display: flex; align-items: center; justify-content: center;
          gap: 20px; padding: 0 clamp(24px,5vw,80px);
          width: 100%; box-sizing: border-box;
        }
        .acmp-accion-cards {
          display: flex; align-items: center; justify-content: center;
          gap: 4px; flex: 1; overflow: hidden;
        }
        .acmp-aa-card {
          position: relative;
          width: clamp(260px,32vw,460px);
          aspect-ratio: 9/12;
          border-radius: 20px; overflow: hidden;
          background: #eee; flex-shrink: 0;
          opacity: 0.45; transform: scale(0.88);
          transition: opacity 0.3s ease, transform 0.3s ease;
          cursor: pointer;
        }
        .acmp-aa-card.is-active {
          opacity: 1; transform: scale(1);
          cursor: default;
          box-shadow: 0 24px 60px rgba(34,43,73,0.22);
        }
        .acmp-aa-card img {
          width: 100%; height: 100%;
          object-fit: cover; object-position: center top;
          display: block;
        }
        .acmp-aa-arrow {
          width: 48px; height: 48px; border-radius: 50%;
          border: 2px solid rgba(34,43,73,0.18);
          background: rgba(34,43,73,0.06);
          color: var(--acmp-navy);
          display: flex; align-items: center; justify-content: center;
          cursor: pointer; flex-shrink: 0;
          transition: background 0.2s, border-color 0.2s, color 0.2s;
        }
        .acmp-aa-arrow:hover { background: var(--acmp-orange); border-color: var(--acmp-orange); color: #fff; }
        .acmp-aa-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
        .acmp-aa-dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: rgba(34,43,73,0.2); border: none; cursor: pointer;
          transition: background 0.2s, transform 0.2s;
        }
        .acmp-aa-dot.is-active { background: var(--acmp-orange); transform: scale(1.3); }
        @media (max-width: 700px) {
          .acmp-aa-card { border-radius: 14px; }
          .acmp-aa-arrow { width: 38px; height: 38px; }
          .acmp-accion-cards { gap: 6px; }
        }
      `}</style>

      <div className="acmp-accion-head">
        <h2 className="acmp-accion-title">
          <span style={{ color: 'var(--acmp-navy)' }}>La Academia en <span style={{ color: 'var(--acmp-orange)' }}>acción</span></span>
        </h2>
      </div>

      <div className="acmp-accion-stage">
        <button className="acmp-aa-arrow" onClick={prev} aria-label="Foto anterior">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="15 18 9 12 15 6" />
          </svg>
        </button>

        <div className="acmp-accion-cards">
          {ACCION_IMGS.map((src, i) => {
            const offset = i - active;
            const visible = Math.abs(offset) <= 2;
            if (!visible) return null;
            return (
              <PhotoCard
                key={i}
                src={src}
                isActive={i === active}
                onClick={() => setActiveAA(i)}
              />
            );
          })}
        </div>

        <button className="acmp-aa-arrow" onClick={next} aria-label="Foto siguiente">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="9 18 15 12 9 6" />
          </svg>
        </button>
      </div>

      <div className="acmp-aa-dots">
        {ACCION_IMGS.map((_, i) => (
          <button
            key={i}
            className={'acmp-aa-dot' + (i === active ? ' is-active' : '')}
            onClick={() => setActiveAA(i)}
            aria-label={'Foto ' + (i + 1)}
          />
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { AcademiaEnAccion });