function ImageStrip() {
  const slots = ['strip-1', 'strip-2', 'strip-3', 'strip-4', 'strip-5', 'strip-6'];
  const wrapRef = React.useRef(null);

  // Curved-gallery transform loop
  React.useEffect(() => {
    const wrap = wrapRef.current;
    if (!wrap) return;
    let raf;
    const tick = () => {
      const vw = window.innerWidth;
      const cx = vw / 2;
      wrap.querySelectorAll('.strip-card').forEach((card) => {
        const r = card.parentElement.getBoundingClientRect();
        const itemCx = r.left + r.width / 2;
        let n = (itemCx - cx) / (vw / 2);
        n = Math.max(-1.2, Math.min(1.2, n));
        const rotY = -n * 32;
        const scale = 1 - Math.abs(n) * 0.12;
        const lift = Math.abs(n) * 14;
        card.style.transform = `rotateY(${rotY}deg) scale(${scale}) translateY(${-lift}px)`;
      });
      raf = requestAnimationFrame(tick);
    };
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (!reduced) raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const renderSet = (keyPrefix, hidden) => (
    slots.map((id, i) => (
      <div className="strip-item" key={`${keyPrefix}-${id}`} aria-hidden={hidden ? 'true' : undefined}>
        <div className="strip-card">
          <div className="strip-face">
            <image-slot id={id} shape="rect" placeholder={`Image ${i + 1}`}></image-slot>
            <div className="strip-scrim"></div>
          </div>
        </div>
      </div>
    ))
  );

  return (
    <div className="strip-wrap" data-screen-label="Image Strip" ref={wrapRef}>
      <div className="strip-track">
        {renderSet('a', false)}
        {renderSet('b', true)}
      </div>
    </div>
  );
}

window.ImageStrip = ImageStrip;