// gallery.jsx — portfolio grid + lightbox

const { useState, useEffect, useCallback } = React;

const GALLERY_ITEMS = [
  { id: 1,  title: "Kitsune",               category: "Neo-trad",    placement: "Forearm",      hours: "8h",  span: "col-7 row-tall", tone: "ph--tone-1", img: "images/tattoo3.jpg" },
  { id: 2,  title: "Hyssop & Pall",         category: "Botanical",   placement: "Nape",         hours: "3h",  span: "col-5 row-1",    tone: "ph--tone-2", img: "images/tattoo1.jpg" },
  { id: 3,  title: "Apparition",            category: "Blackwork",   placement: "Forearm",      hours: "9h",  span: "col-5 row-sq",   tone: "ph--tone-3", img: "images/tattoo4.jpg" },
  { id: 4,  title: "Old Glory",             category: "American Trad", placement: "Thigh",      hours: "10h", span: "col-7 row-wide", tone: "ph--tone-4", img: "images/tattoo9.jpg" },
  { id: 5,  title: "Wayfinder",             category: "Blackwork",   placement: "Calf",         hours: "6h",  span: "col-4 row-tall", tone: "ph--tone-2", img: "images/tattoo6.jpg" },
  { id: 6,  title: "The Cartographer",      category: "Fine line",   placement: "Upper back",   hours: "7h",  span: "col-8 row-wide", tone: "ph--tone-1", img: "images/tattoo5.jpg" },
  { id: 7,  title: "Godspeed",              category: "Blackwork",   placement: "Hand",         hours: "4h",  span: "col-4 row-sq",   tone: "ph--tone-3", img: "images/tattoo7.jpg" },
  { id: 8,  title: "Vellum",                category: "Lettering",   placement: "Wrist",        hours: "2h",  span: "col-4 row-1",    tone: "ph--tone-4", img: "images/tattoo2.jpg" },
  { id: 9,  title: "Watcher",               category: "Whipshade",   placement: "Hand",         hours: "3h",  span: "col-4 row-sq",   tone: "ph--tone-1", img: "images/tattoo8.jpg" },
];

function Gallery() {
  const [open, setOpen] = useState(null);
  const idx = open === null ? -1 : GALLERY_ITEMS.findIndex(x => x.id === open);

  const close = useCallback(() => setOpen(null), []);
  const next  = useCallback(() => {
    if (idx >= 0) setOpen(GALLERY_ITEMS[(idx + 1) % GALLERY_ITEMS.length].id);
  }, [idx]);
  const prev  = useCallback(() => {
    if (idx >= 0) setOpen(GALLERY_ITEMS[(idx - 1 + GALLERY_ITEMS.length) % GALLERY_ITEMS.length].id);
  }, [idx]);

  useEffect(() => {
    if (open === null) return;
    const onKey = (e) => {
      if (e.key === "Escape") close();
      if (e.key === "ArrowRight") next();
      if (e.key === "ArrowLeft")  prev();
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open, close, next, prev]);

  const active = idx >= 0 ? GALLERY_ITEMS[idx] : null;

  return (
    <section className="section" id="gallery" data-screen-label="02 Portfolio">
      <div className="kicker-row reveal">
        <span className="num">02 — PORTFOLIO</span>
      </div>
      <h2 className="h-section reveal">
        Selected <em className="h-italic">work,</em><br/>
        from the archive.
      </h2>
      <p className="lede reveal" style={{ marginTop: 32 }}>
        Each piece, a quiet conversation between<br/>steel, skin, and intention.
      </p>

      <div className="gallery">
        {GALLERY_ITEMS.map((it, i) => (
          <div
            key={it.id}
            className={`gallery__item ${it.span} reveal`}
            style={{ transitionDelay: `${(i % 3) * 0.08}s` }}
            onClick={() => setOpen(it.id)}
            role="button"
            tabIndex={0}
          >
            <div className={`ph ph--photo ${it.tone}`} style={it.img ? { backgroundImage: `url(${it.img})` } : null}>
              {!it.img && <span className="ph__label">{`SA · ${String(it.id).padStart(3, "0")} · ${it.category.toUpperCase()}`}</span>}
            </div>
            <div className="gallery__item-info">
              <div className="num">{`№ ${String(it.id).padStart(3, "0")}`}</div>
              <div className="title">{it.title}</div>
              <div className="meta">
                <span>{it.category}</span>
                <span>{it.placement}</span>
                <span>{it.hours}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Lightbox */}
      <div className={"lightbox " + (open !== null ? "is-open" : "")} onClick={close}>
        {active && (
          <div className="lightbox__inner" onClick={(e) => e.stopPropagation()}>
            <button className="lightbox__close" onClick={close} aria-label="Close">✕</button>
            <button className="lightbox__nav prev" onClick={prev} aria-label="Previous">←</button>
            <button className="lightbox__nav next" onClick={next} aria-label="Next">→</button>
            <div className="lightbox__media">
              <div className={`ph ph--photo ${active.tone}`} style={active.img ? { backgroundImage: `url(${active.img})` } : null}>
                {!active.img && <span className="ph__label">{`SA · ${String(active.id).padStart(3, "0")} · ${active.category.toUpperCase()}`}</span>}
              </div>
            </div>
            <div className="lightbox__caption">
              <div>
                <div>{`№ ${String(active.id).padStart(3, "0")} · ${active.category}`}</div>
                <div className="title">{active.title}</div>
              </div>
              <div>{active.placement} · {active.hours}</div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

window.Gallery = Gallery;