// gallery.jsx — horizontal drag/swipe gallery (no vertical scroll hijacking)
function Gallery({ lang }) {
  const t = COPY[lang].gallery;
  const trackRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);
  const drag = React.useRef({ active: false, startX: 0, scrollLeft: 0 });

  const R = window.__resources || {};
  const asset = (id, path) => R[id] || path;
  const shots = [
    { src: asset("praxis2", "assets/praxis2.jpeg"), w: "wide" },
    { src: asset("praxis1", "assets/praxis1.jpeg"), w: "tall" },
    { src: asset("praxis5", "assets/praxis5.jpeg"), w: "wide" },
    { src: asset("praxis9", "assets/praxis9.jpeg"), w: "tall" },
    { src: asset("praxis7", "assets/praxis7.jpeg"), w: "wide" },
    { src: asset("praxis8", "assets/praxis8.jpeg"), w: "tall" },
    { src: asset("praxis4", "assets/praxis4.jpeg"), w: "wide" },
    { src: asset("praxis10", "assets/praxis10.jpeg"), w: "tall" },
    { src: asset("praxis3", "assets/praxis3.jpeg"), w: "wide" },
    { src: asset("praxis11", "assets/praxis11.jpeg"), w: "wide" },
  ];

  React.useEffect(() => {
    const track = trackRef.current;
    if (!track) return;

    // Update progress bar on horizontal scroll
    const onScroll = () => {
      const max = track.scrollWidth - track.clientWidth;
      setProgress(max > 0 ? track.scrollLeft / max : 0);
    };
    track.addEventListener("scroll", onScroll, { passive: true });

    // Mouse drag-to-scroll
    const onMouseDown = (e) => {
      drag.current = { active: true, startX: e.pageX - track.offsetLeft, scrollLeft: track.scrollLeft };
      track.style.cursor = "grabbing";
      track.style.userSelect = "none";
    };
    const onMouseMove = (e) => {
      if (!drag.current.active) return;
      const x = e.pageX - track.offsetLeft;
      track.scrollLeft = drag.current.scrollLeft - (x - drag.current.startX);
    };
    const onMouseUp = () => {
      drag.current.active = false;
      track.style.cursor = "grab";
      track.style.userSelect = "";
    };

    track.addEventListener("mousedown", onMouseDown);
    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("mouseup", onMouseUp);

    return () => {
      track.removeEventListener("scroll", onScroll);
      track.removeEventListener("mousedown", onMouseDown);
      window.removeEventListener("mousemove", onMouseMove);
      window.removeEventListener("mouseup", onMouseUp);
    };
  }, []);

  return (
    <section className="gallery" id="gallery">
      <div className="gallery-head">
        <div className="container">
          <div className="sec-eyebrow">{t.eyebrow}</div>
        </div>
        <div className="gallery-progress">
          <div className="gallery-progress-bar" style={{ width: (progress * 100) + "%" }} />
        </div>
      </div>
      <div className="gallery-track" ref={trackRef}>
        {shots.map((s, i) => (
          <figure className={"gallery-item " + s.w} key={i}>
            <img src={s.src} alt={t.shots[i] || ""} loading="lazy" draggable="false" />
          </figure>
        ))}
        <div className="gallery-end">
          <div className="display">{lang === "de" ? "Komm vorbei." : "Come by."}</div>
          <a href="#location" className="btn ghost"
             onClick={(e) => { e.preventDefault(); const el = document.getElementById("location"); if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" }); }}>
            {COPY[lang].location.eyebrow} <Arrow />
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Gallery });