/* global React */
const { useState: useStateEC, useEffect: useEffectEC } = React;

/* ------------------------------------------------------------------ */
/* EditorialCarousel — framed image carousel for editorial pairs       */
/*                                                                    */
/* Used inside an editorial pair layout (image one side, copy other). */
/* Sits within a grid column — respects the grid's aspect ratio,      */
/* crossfades between N slides, shows faint dots bottom-centre and a  */
/* small numbered caption top-left so readers can orient.             */
/*                                                                    */
/* Props:                                                             */
/*   slides   [{ src, alt, caption? }]                                */
/*   aspect   CSS aspect-ratio, default "3/4"                         */
/*   auto     auto-advance interval in ms, 0 to disable, default 6000 */
/* ------------------------------------------------------------------ */

function EditorialCarousel({ slides = [], aspect = "3/4", auto = 6000 }) {
  const [i, setI] = useStateEC(0);
  const [paused, setPaused] = useStateEC(false);

  useEffectEC(() => {
    if (!auto || paused || slides.length < 2) return;
    const id = setInterval(() => setI((x) => (x + 1) % slides.length), auto);
    return () => clearInterval(id);
  }, [auto, paused, slides.length]);

  if (!slides.length) return null;

  return (
    <div
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        position: "relative",
        aspectRatio: aspect,
        background: "#e4e2da",
        overflow: "hidden",
      }}
    >
      {slides.map((s, idx) => (
        s.video ? (
          <video
            key={idx}
            src={s.video}
            poster={s.src}
            autoPlay muted loop playsInline preload={idx === 0 ? "auto" : "metadata"}
            style={{
              position: "absolute", inset: 0,
              width: "100%", height: "100%",
              objectFit: s.fit || "cover", objectPosition: s.pos || "center", display: "block",
              opacity: idx === i ? 1 : 0,
              transition: "opacity 900ms ease",
            }}
          />
        ) : (
          <img
            key={idx}
            src={s.src}
            srcSet={window.IMG && window.IMG.srcsetFor(s.src)}
            sizes={window.IMG && window.IMG.sizes()}
            alt={s.alt || ""}
            loading={idx === 0 ? "eager" : "lazy"}
            style={{
              position: "absolute", inset: 0,
              width: "100%", height: "100%",
              objectFit: s.fit || "cover", objectPosition: s.pos || "center", display: "block",
              opacity: idx === i ? 1 : 0,
              transition: "opacity 900ms ease",
            }}
          />
        )
      ))}

      {/* Top-left caption chip */}
      {slides[i].caption && (
        <div style={{
          position: "absolute", top: 16, left: 16,
          fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
          color: "#f5f3ef", fontWeight: 500,
          mixBlendMode: "difference",
        }}>
          {slides[i].caption}
        </div>
      )}

      {/* Bottom-centre dots */}
      {slides.length > 1 && (
        <div style={{
          position: "absolute",
          bottom: 16, left: 0, right: 0,
          display: "flex", justifyContent: "center", gap: 8,
          pointerEvents: "none",
        }}>
          {slides.map((_, idx) => (
            <button
              key={idx}
              onClick={() => setI(idx)}
              aria-label={`Show image ${idx + 1}`}
              style={{
                width: idx === i ? 20 : 5,
                height: 2,
                background: idx === i ? "rgba(245,243,239,0.95)" : "rgba(245,243,239,0.5)",
                border: "none", cursor: "pointer", padding: 0,
                pointerEvents: "auto",
                mixBlendMode: "difference",
                transition: "width 320ms ease, background 320ms ease",
              }}
            />
          ))}
        </div>
      )}
    </div>
  );
}

window.EditorialCarousel = EditorialCarousel;