// PRLX Gear Hire — category tabs, photo-card grid, and list rows for non-photographed items.
function GearListRow({ item, count, onAdd, onRemove }) {
  const { Icon, useViewport } = window;
  const { isMobile } = useViewport();
  const inCart = count > 0;
  const rate = (label, val) => (
    <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 52 }}>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--prlx-graphite-500)" }}>{label}</span>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 15, color: "#fff", lineHeight: 1 }}>
        <span style={{ fontSize: 10, color: "var(--prlx-graphite-400)", fontWeight: 600 }}>$</span>{val}
      </span>
    </div>
  );
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: isMobile ? "1fr auto" : "minmax(0,1fr) auto auto 120px",
      alignItems: "center", gap: isMobile ? 12 : 22, padding: isMobile ? "16px 4px" : "16px 8px",
      borderBottom: "1px solid rgba(255,255,255,0.08)",
      background: inCart ? "rgba(255,255,255,0.03)" : "transparent", transition: "background 180ms",
    }}>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 15, color: "#fff", lineHeight: 1.25 }}>{item.name}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--prlx-graphite-500)", marginTop: 4 }}>
          {item.cat} · {item.qty} available
        </div>
      </div>

      {!isMobile && (
        <div style={{ display: "flex", gap: 20 }}>
          {rate("Day", item.rates.day)}
          {rate("Wknd", item.rates.weekend)}
          {rate("Week", item.rates.week)}
        </div>
      )}
      {!isMobile && <div />}

      {isMobile && (
        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 8 }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 15, color: "#fff" }}>
            <span style={{ fontSize: 10, color: "var(--prlx-graphite-400)" }}>$</span>{item.rates.day}<span style={{ fontSize: 10, color: "var(--prlx-graphite-500)", fontWeight: 600 }}>/day</span>
          </span>
        </div>
      )}

      <div style={{ justifySelf: "end", gridColumn: isMobile ? "2" : "auto" }}>
        {inCart ? (
          <div style={{ display: "flex", alignItems: "center", border: "1px solid var(--accent)" }}>
            <button onClick={() => onRemove(item)} aria-label="Remove one"
              style={{ width: 30, height: 30, background: "transparent", border: 0, color: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="Minus" size={13} />
            </button>
            <span style={{ minWidth: 20, textAlign: "center", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 14, color: "#fff" }}>{count}</span>
            <button onClick={() => onAdd(item)} disabled={count >= item.qty} aria-label="Add one"
              style={{ width: 30, height: 30, 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={13} />
            </button>
          </div>
        ) : (
          <button onClick={() => onAdd(item)}
            style={{ display: "flex", alignItems: "center", gap: 6, padding: "8px 13px", background: "transparent", color: "#fff", border: "1px solid rgba(255,255,255,0.22)", cursor: "pointer",
              fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.12em", whiteSpace: "nowrap" }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--accent)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.22)"; }}>
            <Icon name="Plus" size={13} /> Quote
          </button>
        )}
      </div>
    </div>
  );
}

function HireGrid({ cart, onAdd, onRemove, onOpen }) {
  const { GearCard, useViewport } = window;
  const [tab, setTab] = React.useState("All");
  const { isMobile, isTablet } = useViewport();
  const tabs = ["All", ...window.PRLX_HIRE_CATEGORIES];
  const revealClock = React.useRef(0);

  // Re-cascade the fade-in whenever the filter changes.
  React.useEffect(() => { revealClock.current = 0; }, [tab]);

  const visible = window.PRLX_HIRE.filter((i) => tab === "All" || i.cat === tab);
  const photoItems = visible.filter((i) => (i.images && i.images.length > 0) || i.photoPending);
  const listItems = visible.filter((i) => !(i.images && i.images.length > 0) && !i.photoPending);

  return (
    <section id="catalogue" data-screen-label="Catalogue" style={{ background: "var(--prlx-ink)", padding: isMobile ? "0 20px 80px" : "0 32px 110px" }}>
      {/* sticky tab bar */}
      <div style={{ position: "sticky", top: 64, zIndex: 40, background: "var(--prlx-ink)", paddingTop: 18, paddingBottom: 14, marginBottom: 22, borderBottom: "1px solid rgba(255,255,255,0.10)" }}>
        <div style={{ display: "flex", gap: isMobile ? 8 : 10, flexWrap: "wrap" }}>
          {tabs.map((c) => {
            const on = tab === c;
            const n = c === "All" ? window.PRLX_HIRE.length : window.PRLX_HIRE.filter((i) => i.cat === c).length;
            return (
              <button key={c} onClick={() => setTab(c)}
                style={{
                  display: "flex", alignItems: "center", gap: 7, padding: isMobile ? "8px 12px" : "9px 16px",
                  background: on ? "#fff" : "transparent", color: on ? "var(--prlx-ink)" : "var(--prlx-graphite-200)",
                  border: `1px solid ${on ? "#fff" : "rgba(255,255,255,0.18)"}`, cursor: "pointer",
                  fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", transition: "all 160ms",
                }}>
                {c}
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 600, color: on ? "var(--prlx-graphite-500)" : "var(--prlx-graphite-600)" }}>{n}</span>
              </button>
            );
          })}
        </div>
      </div>

      {/* photo cards */}
      {photoItems.length > 0 && (
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : isTablet ? "repeat(2, 1fr)" : "repeat(auto-fill, minmax(280px, 1fr))", gap: 18 }}>
          {photoItems.map((i) => (
            <GearCard key={`${tab}-${i.id}`} item={i} count={cart[i.id] || 0} onAdd={onAdd} onRemove={onRemove} onOpen={onOpen} revealClock={revealClock} />
          ))}
        </div>
      )}

      {/* list items */}
      {listItems.length > 0 && (
        <div style={{ marginTop: photoItems.length > 0 ? 56 : 8 }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 6 }}>
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase", letterSpacing: "-0.01em", fontSize: 22, color: "#fff", margin: 0 }}>
              {tab === "All" ? "Also in store" : "More " + tab.toLowerCase()}
            </h3>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--prlx-graphite-500)" }}>{listItems.length} items</span>
          </div>
          <div style={{ borderTop: "1px solid rgba(255,255,255,0.10)" }}>
            {listItems.map((i) => (
              <GearListRow key={i.id} item={i} count={cart[i.id] || 0} onAdd={onAdd} onRemove={onRemove} />
            ))}
          </div>
        </div>
      )}
    </section>
  );
}
Object.assign(window, { HireGrid, GearListRow });