// PRLX Gear Hire — fullscreen gallery lightbox for an item's photos + specs + add-to-quote.
function GearGallery({ item, count, onAdd, onRemove, onClose }) {
  const { Button } = window.PRLXDesignSystem_b1b8b9;
  const { Icon, useViewport } = window;
  const { isMobile } = useViewport();
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => { setIdx(0); }, [item && item.id]);
  const imgs = item.images || [];
  const inCart = count > 0;

  const go = React.useCallback((d) => setIdx((i) => (i + d + imgs.length) % imgs.length), [imgs.length]);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowRight") go(1);
      else if (e.key === "ArrowLeft") go(-1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose, go]);

  const navBtn = (dir, icon) => (
    <button onClick={(e) => { e.stopPropagation(); go(dir); }} aria-label={dir > 0 ? "Next" : "Previous"}
      style={{ width: 46, height: 46, borderRadius: "50%", background: "rgba(8,8,9,0.6)", backdropFilter: "blur(6px)",
        border: "1px solid rgba(255,255,255,0.18)", color: "#fff", cursor: "pointer", display: imgs.length > 1 ? "flex" : "none",
        alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
      <Icon name={icon} size={22} />
    </button>
  );

  return (
    <div onClick={onClose}
      style={{ position: "fixed", inset: 0, zIndex: 1000, background: "rgba(5,5,5,0.92)", backdropFilter: "blur(10px)",
        display: "flex", alignItems: "center", justifyContent: "center", padding: isMobile ? 12 : 32,
        animation: "prlx-gfade 200ms ease" }}>
      <style>{`@keyframes prlx-gfade{from{opacity:0}to{opacity:1}}`}</style>

      <div onClick={(e) => e.stopPropagation()}
        style={{ width: "min(1180px, 100%)", maxHeight: "100%", display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.5fr 0.85fr", gap: isMobile ? 0 : 28, alignItems: "stretch", overflow: "hidden" }}>

        {/* image stage */}
        <div style={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
          <div style={{ position: "relative", flex: 1, minHeight: isMobile ? 240 : 420, background: "#0a0a0b", border: "1px solid rgba(255,255,255,0.10)", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <img src={`../../${imgs[idx]}`} alt={`${item.name} — photo ${idx + 1}, PRLX camera &amp; video gear hire in Hobart &amp; Darwin`}
              style={{ maxWidth: "100%", maxHeight: isMobile ? 320 : 560, objectFit: "contain", display: "block" }} />
            {/* arrows */}
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 14px", pointerEvents: "none" }}>
              <span style={{ pointerEvents: "auto" }}>{navBtn(-1, "ChevronLeft")}</span>
              <span style={{ pointerEvents: "auto" }}>{navBtn(1, "ChevronRight")}</span>
            </div>
            {/* counter */}
            {imgs.length > 1 && (
              <div style={{ position: "absolute", bottom: 12, left: 12, padding: "5px 10px", background: "rgba(8,8,9,0.7)", backdropFilter: "blur(6px)", border: "1px solid rgba(255,255,255,0.12)",
                fontFamily: "var(--font-mono)", fontSize: 11, color: "#fff", letterSpacing: "0.06em" }}>
                {idx + 1} / {imgs.length}
              </div>
            )}
          </div>
          {/* thumbnails */}
          {imgs.length > 1 && (
            <div style={{ display: "flex", gap: 8, marginTop: 10, overflowX: "auto", paddingBottom: 2 }}>
              {imgs.map((src, i) => (
                <button key={src} onClick={() => setIdx(i)}
                  style={{ width: 72, height: 54, flexShrink: 0, padding: 0, cursor: "pointer", overflow: "hidden", background: "#0a0a0b",
                    border: `1px solid ${i === idx ? "var(--accent)" : "rgba(255,255,255,0.14)"}`, opacity: i === idx ? 1 : 0.55, transition: "opacity 160ms, border-color 160ms" }}>
                  <img src={`../../${src}`} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </button>
              ))}
            </div>
          )}
        </div>

        {/* info panel */}
        <div style={{ display: "flex", flexDirection: "column", padding: isMobile ? "18px 4px 4px" : "4px 0", minWidth: 0 }}>
          <button onClick={onClose} aria-label="Close"
            style={{ alignSelf: "flex-end", width: 40, height: 40, background: "transparent", border: 0, color: "#fff", cursor: "pointer", display: isMobile ? "none" : "flex", alignItems: "center", justifyContent: "center", marginBottom: 4 }}>
            <Icon name="X" size={22} />
          </button>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.16em", color: "var(--prlx-graphite-500)", marginBottom: 8 }}>
            {item.brand || item.cat} · {item.qty} available
          </div>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase", letterSpacing: "-0.01em", fontSize: isMobile ? 26 : 32, lineHeight: 0.98, color: "#fff", margin: 0 }}>
            {item.name}
          </h3>
          {item.blurb && (
            <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14.5, lineHeight: 1.55, color: "var(--prlx-graphite-300)", margin: "14px 0 0" }}>{item.blurb}</p>
          )}
          {item.specs && (
            <ul style={{ listStyle: "none", margin: "18px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
              {item.specs.map((s) => (
                <li key={s} style={{ display: "flex", gap: 9, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--prlx-graphite-200)", lineHeight: 1.4 }}>
                  <span style={{ color: "var(--accent)", flexShrink: 0 }}>—</span>{s}
                </li>
              ))}
            </ul>
          )}

          <div style={{ flex: 1, minHeight: 18 }} />

          {/* rates + add */}
          <div style={{ paddingTop: 18, borderTop: "1px solid rgba(255,255,255,0.10)" }}>
            <div style={{ display: "flex", gap: 26, marginBottom: 16 }}>
              {[["Day", item.rates.day], ["Weekend", item.rates.weekend], ["Week", item.rates.week]].map(([l, v]) => (
                <div key={l} style={{ display: "flex", flexDirection: "column", gap: 3 }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--prlx-graphite-500)" }}>{l}</span>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 21, color: "#fff", lineHeight: 1 }}>
                    <span style={{ fontSize: 12, color: "var(--prlx-graphite-400)", fontWeight: 600 }}>$</span>{v}
                  </span>
                </div>
              ))}
            </div>
            {inCart ? (
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{ display: "flex", alignItems: "center", border: "1px solid var(--accent)" }}>
                  <button onClick={() => onRemove(item)} aria-label="Remove one" style={{ width: 40, height: 40, background: "transparent", border: 0, color: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="Minus" size={16} /></button>
                  <span style={{ minWidth: 28, textAlign: "center", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 16, color: "#fff" }}>{count}</span>
                  <button onClick={() => onAdd(item)} disabled={count >= item.qty} aria-label="Add one" style={{ width: 40, height: 40, background: "var(--accent)", border: 0, color: "#fff", cursor: count >= item.qty ? "not-allowed" : "pointer", opacity: count >= item.qty ? 0.4 : 1, display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="Plus" size={16} /></button>
                </div>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--prlx-graphite-400)" }}>in your quote</span>
              </div>
            ) : (
              <Button variant="primary" size="lg" fullWidth iconLeft={<Icon name="Plus" size={16} />} onClick={() => onAdd(item)}>
                Add to quote
              </Button>
            )}
          </div>
        </div>
      </div>

      {/* mobile close */}
      {isMobile && (
        <button onClick={onClose} aria-label="Close"
          style={{ position: "fixed", top: 14, right: 14, width: 44, height: 44, background: "rgba(8,8,9,0.7)", border: "1px solid rgba(255,255,255,0.18)", color: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1001 }}>
          <Icon name="X" size={22} />
        </button>
      )}
    </div>
  );
}
Object.assign(window, { GearGallery });