/* global React, useViewport */
const { useState: useStateGC, useEffect: useEffectGC } = React;

/* ------------------------------------------------------------------ */
/* GatewayCarousel — full-bleed collection showcase                    */
/*                                                                    */
/* Mid-page full-bleed strip used on the Gateway collection detail.   */
/* Same visual language as FeatureCarousel (crossfade, faint dots,    */
/* auto-advance, bottom-centred caption) but shorter (72vh) so the    */
/* page keeps flowing and each slide speaks to a Gateway install.     */
/* ------------------------------------------------------------------ */

const GATEWAY_SLIDES = [
  {
    eyebrow: "Adelaide · 2025",
    title: "Gateway",
    image: "images/collections/gateway/hero/01.jpg",
  },
  {
    eyebrow: "Cairns · 2025",
    title: "Gateway",
    image: "images/collections/gateway/hero/02.jpg",
  },
  {
    eyebrow: "Airport entrance · In situ",
    title: "Gateway",
    image: "images/collections/gateway/hero/03.jpg",
  },
];

function GatewayCarousel({ hideCaption = false }) {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStateGC(0);
  const [paused, setPaused] = useStateGC(false);

  useEffectGC(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % GATEWAY_SLIDES.length), 7000);
    return () => clearInterval(id);
  }, [paused]);

  const s = GATEWAY_SLIDES[i];

  return (
    <section
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        position: "relative",
        width: "100%",
        height: isMobile ? "76vh" : "78vh",
        minHeight: isMobile ? 520 : 620,
        maxHeight: isMobile ? "none" : 820,
        overflow: "hidden",
        background: "#1a1917",
      }}
    >
      {/* Image layers */}
      {GATEWAY_SLIDES.map((ss, idx) => (
        <div key={idx} style={{
          position: "absolute", inset: 0,
          opacity: idx === i ? 1 : 0,
          transition: "opacity 1100ms ease",
        }}>
          <img src={ss.image} srcSet={window.IMG && window.IMG.srcsetFor(ss.image)} sizes={window.IMG && window.IMG.sizes()} alt={ss.title} loading={idx === 0 ? "eager" : "lazy"}
               style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
      ))}

      {/* Legibility gradient */}
      <div style={{
        position: "absolute", inset: 0,
        background: hideCaption
          ? "linear-gradient(to bottom, transparent 70%, rgba(26,25,23,0.35) 100%)"
          : "linear-gradient(to bottom, transparent 50%, rgba(26,25,23,0.55) 100%)",
        pointerEvents: "none",
      }} />

      {/* Caption */}
      {!hideCaption && (
      <div style={{
        position: "absolute",
        left: 0, right: 0,
        bottom: isMobile ? 84 : 100,
        padding: isMobile ? "0 24px" : "0 32px",
        textAlign: "center",
        color: "#f5f3ef",
      }}>
        <h3 style={{
          fontFamily: "var(--font-display, Poppins, sans-serif)",
          fontWeight: 500,
          fontSize: isMobile ? "clamp(20px, 5vw, 26px)" : "clamp(22px, 1.9vw, 32px)",
          lineHeight: 1.18,
          letterSpacing: "-0.01em",
          margin: "0 auto",
          maxWidth: "26ch",
          textWrap: "balance",
        }}>
          {s.title}
        </h3>
      </div>
      )}

      {/* Dots */}
      <div style={{
        position: "absolute",
        bottom: isMobile ? 36 : 44,
        left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10,
      }}>
        {GATEWAY_SLIDES.map((_, idx) => (
          <button key={idx}
            onClick={() => setI(idx)}
            aria-label={`Show slide ${idx + 1}`}
            style={{
              width: idx === i ? 24 : 6,
              height: 2,
              background: idx === i ? "rgba(245,243,239,0.95)" : "rgba(245,243,239,0.4)",
              border: "none", cursor: "pointer", padding: 0,
              transition: "width 320ms ease, background 320ms ease",
            }}
          />
        ))}
      </div>
    </section>
  );
}

window.GatewayCarousel = GatewayCarousel;