/* Photography.jsx — "[ 02 ] Through the lens": a horizontal swipe slideshow. */
const { useState: usePhotoState, useRef: usePhotoRef, useEffect: usePhotoEffect } = React;

const PHOTO_ASSET_BASE = window.location.pathname.includes("/ui_kits/portfolio-website/")
  ? "../../assets/photography/"
  : "assets/photography/";

const NEEL_PHOTOS = [
  { id: "sfo-airport", file: "sfo-airport.jpg", cat: "Aviation", title: "SFO Airport", loc: "San Francisco, CA" },
  { id: "new-york-city", file: "new-york-city.jpg", cat: "City", title: "New York City", loc: "New York, NY" },
  { id: "sensorio", file: "sensorio.jpg", cat: "Light", title: "Sensorio", loc: "Paso Robles, CA" },
  { id: "interlaken", file: "interlaken.jpg", cat: "Landscape", title: "Interlaken", loc: "Interlaken, Switzerland" },
  { id: "cabo-da-roca", file: "cabo-da-roca.jpg", cat: "Coast", title: "Cabo da Roca", loc: "Sintra, Portugal" },
];

function Photography() {
  const trackRef = usePhotoRef(null);
  const [idx, setIdx] = usePhotoState(0);
  const total = NEEL_PHOTOS.length;

  usePhotoEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const next = Math.round(track.scrollLeft / track.clientWidth);
        setIdx(Math.max(0, Math.min(total - 1, next)));
      });
    };
    track.addEventListener("scroll", onScroll, { passive: true });
    return () => { track.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
  }, [total]);

  const go = (i) => {
    const track = trackRef.current;
    if (!track) return;
    const next = Math.max(0, Math.min(total - 1, i));
    track.scrollTo({ left: next * track.clientWidth, behavior: "smooth" });
  };

  const onKey = (e) => {
    if (e.key === "ArrowRight") { e.preventDefault(); go(idx + 1); }
    if (e.key === "ArrowLeft") { e.preventDefault(); go(idx - 1); }
  };

  return (
    <div id="photography" style={{ borderTop: "1px solid var(--border)" }}>
      <Section style={{ paddingTop: 96, paddingBottom: 36 }}>
        <div className="photo-head" style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
          <div>
            <Kicker>[ 03 ] Through the lens</Kicker>
            <h2 className="h1" style={{ margin: "14px 0 0" }}>Photography</h2>
            <p className="body" style={{ maxWidth: 520, margin: "16px 0 0" }}>
              Stills from travel, airports, cities, and the spaces between assignments.
            </p>
          </div>
          <span className="timecode" style={{ fontSize: 13, color: "var(--fg-3)", whiteSpace: "nowrap" }}>
            {String(idx + 1).padStart(2, "0")} <span style={{ color: "var(--fg-4)" }}>/ {String(total).padStart(2, "0")}</span>
          </span>
        </div>
      </Section>

      <div
        ref={trackRef}
        className="photo-track"
        tabIndex={0}
        onKeyDown={onKey}
        role="region"
        aria-label="Photography slideshow"
      >
        {NEEL_PHOTOS.map((p) => <PhotoSlide key={p.id} p={p} />)}
      </div>

      <Section style={{ paddingTop: 28, paddingBottom: 96 }}>
        <div className="photo-ticks">
          {NEEL_PHOTOS.map((p, i) => (
            <button
              key={p.id}
              aria-label={"Go to photo " + (i + 1)}
              onClick={() => go(i)}
              className="photo-tick"
              data-on={i === idx ? "" : undefined}
            />
          ))}
        </div>
      </Section>
    </div>
  );
}

function PhotoSlide({ p }) {
  const [h, setH] = usePhotoState(false);
  return (
    <figure className="photo-slide">
      <div className="photo-frame" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}>
        <img
          src={PHOTO_ASSET_BASE + p.file}
          alt={p.title}
          loading="lazy"
          style={{ transform: h ? "scale(1.015)" : "scale(1)", transition: "transform var(--dur) var(--ease)" }}
        />
        <span className="label" style={{ position: "absolute", left: 16, top: 14, fontSize: 11, color: "#fff", pointerEvents: "none" }}>{p.cat}</span>
      </div>
      <figcaption className="photo-meta">
        <h4 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 19, color: "var(--fg)", margin: 0, lineHeight: 1.2 }}>{p.title}</h4>
        <span className="timecode" style={{ fontSize: 12.5, color: "var(--fg-3)" }}>{p.loc}</span>
      </figcaption>
    </figure>
  );
}

Object.assign(window, { Photography, NEEL_PHOTOS });