// PRLX Gear Hire — photographed item card: photo, expandable specs, Day/Weekend/Week rates, add-to-quote.
function RateBlock({ rates, compact }) {
  const cell = (label, val) => (
    <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, textTransform: "uppercase", letterSpacing: compact ? "0.06em" : "0.14em", color: "var(--prlx-graphite-500)" }}>{label}</span>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: compact ? 16 : 19, color: "#fff", lineHeight: 1 }}>
        <span style={{ fontSize: compact ? 11 : 12, color: "var(--prlx-graphite-400)", fontWeight: 600 }}>$</span>{val}
      </span>
    </div>
  );
  return (
    <div style={{ display: "flex", gap: compact ? 8 : 26 }}>
      {cell("Day", rates.day)}
      {cell("Wknd", rates.weekend)}
      {cell("Week", rates.week)}
    </div>
  );
}

function GearCard({ item, count, onAdd, onRemove, onOpen, revealClock }) {
  const { Icon, useReveal } = window;
  const [open, setOpen] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  const inCart = count > 0;
  const imgs = item.images || [];
  const feature = imgs[0];
  const { ref, shown } = useReveal(revealClock);

  return (
    <div
      ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", flexDirection: "column",
        background: "var(--prlx-graphite-900, #121315)",
        border: `1px solid ${inCart ? "var(--accent)" : "rgba(255,255,255,0.10)"}`,
        transition: "border-color 200ms, opacity 0.3s ease, transform 0.3s ease",
        opacity: shown ? 1 : 0,
        transform: shown ? "translateY(0)" : "translateY(20px)",
      }}
    >
      {/* photo (click to open gallery) */}
      <div onClick={() => !item.photoPending && onOpen && onOpen(item)} style={{ position: "relative", aspectRatio: "4 / 3", overflow: "hidden", background: "#0a0a0b", cursor: item.photoPending ? "default" : "pointer" }}>
        {item.photoPending ? (
          <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12,
               background: "linear-gradient(135deg, #14161a 0%, #1f2329 100%)", color: "var(--prlx-graphite-500)" }}>
            <Icon name="Camera" size={30} />
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.16em" }}>Photo coming soon</span>
          </div>
        ) : (
          <img src={`../../${feature}`} alt={`${item.name} hire — PRLX camera &amp; video gear hire, Hobart &amp; Darwin`}
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
              transform: hover ? "scale(1.05)" : "scale(1)", transition: "transform 640ms cubic-bezier(0.22,1,0.36,1)" }} />
        )}
        {/* hover view-gallery overlay */}
        {!item.photoPending && (
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
             background: "rgba(8,8,9,0.35)", opacity: hover ? 1 : 0, transition: "opacity 200ms" }}>
          <span style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 14px", background: "rgba(8,8,9,0.7)", border: "1px solid rgba(255,255,255,0.25)",
               fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", color: "#fff" }}>
            <Icon name="Expand" size={14} /> {imgs.length > 1 ? `View ${imgs.length} photos` : "View photo"}
          </span>
        </div>
        )}
        {/* qty badge */}
        <div style={{ position: "absolute", top: 12, left: 12, display: "flex", alignItems: "center", gap: 6,
             padding: "5px 9px", background: "rgba(8,8,9,0.72)", backdropFilter: "blur(6px)", border: "1px solid rgba(255,255,255,0.12)" }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--prlx-signal, #36C26E)", display: "inline-block" }} />
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "#fff", letterSpacing: "0.06em" }}>{item.qty} available</span>
        </div>
        {/* photo-count chip */}
        {imgs.length > 1 && (
          <div style={{ position: "absolute", bottom: 12, left: 12, display: "flex", alignItems: "center", gap: 5,
               padding: "4px 8px", background: "rgba(8,8,9,0.72)", backdropFilter: "blur(6px)", border: "1px solid rgba(255,255,255,0.12)",
               fontFamily: "var(--font-mono)", fontSize: 10, color: "#fff" }}>
            <Icon name="Images" size={12} /> {imgs.length}
          </div>
        )}
        {inCart && (
          <div style={{ position: "absolute", top: 12, right: 12, minWidth: 24, height: 24, padding: "0 7px",
               display: "flex", alignItems: "center", justifyContent: "center", background: "var(--accent)", color: "#fff",
               fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 13 }}>{count}</div>
        )}
      </div>

      {/* body */}
      <div style={{ display: "flex", flexDirection: "column", flex: 1, padding: 18 }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.16em", color: "var(--prlx-graphite-500)", marginBottom: 7 }}>
          {item.brand || item.cat}
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase", letterSpacing: "-0.01em", fontSize: 21, lineHeight: 1.02, color: "#fff" }}>
          {item.name}
        </div>
        {item.blurb && (
          <p style={{ fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 13, lineHeight: 1.5, color: "var(--prlx-graphite-300)", margin: "10px 0 0" }}>
            {item.blurb}
          </p>
        )}

        {/* expandable specs */}
        {item.specs && item.specs.length > 0 && (
          <div style={{ marginTop: 14 }}>
            <button onClick={() => setOpen((o) => !o)}
              style={{ display: "flex", alignItems: "center", gap: 7, background: "transparent", border: 0, cursor: "pointer", padding: 0,
                fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--prlx-graphite-400)" }}>
              <span style={{ display: "inline-flex", transform: open ? "rotate(90deg)" : "rotate(0deg)", transition: "transform 200ms" }}>
                <Icon name="ChevronRight" size={14} />
              </span>
              {open ? "Hide specs" : "Specs"}
            </button>
            <div style={{ overflow: "hidden", maxHeight: open ? 240 : 0, opacity: open ? 1 : 0, transition: "max-height 280ms cubic-bezier(0.22,1,0.36,1), opacity 200ms" }}>
              <ul style={{ listStyle: "none", margin: "12px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 7 }}>
                {item.specs.map((s) => (
                  <li key={s} style={{ display: "flex", gap: 9, fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--prlx-graphite-200)", lineHeight: 1.4 }}>
                    <span style={{ color: "var(--accent)", flexShrink: 0 }}>—</span>{s}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        )}

        <div style={{ flex: 1 }} />

        {/* rates + add */}
        <div style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid rgba(255,255,255,0.08)", display: "flex", flexWrap: "nowrap", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
          <RateBlock rates={item.rates} compact />
          {inCart ? (
            <div style={{ display: "flex", alignItems: "center", gap: 0, border: "1px solid var(--accent)" }}>
              <button onClick={() => onRemove(item)} aria-label="Remove one"
                style={{ width: 34, height: 34, background: "transparent", border: 0, color: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name="Minus" size={15} />
              </button>
              <span style={{ minWidth: 22, textAlign: "center", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 15, color: "#fff" }}>{count}</span>
              <button onClick={() => onAdd(item)} disabled={count >= item.qty} aria-label="Add one"
                style={{ width: 34, height: 34, 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={15} />
              </button>
            </div>
          ) : (
            <button onClick={() => onAdd(item)}
              style={{ display: "flex", alignItems: "center", gap: 7, padding: "9px 8px", background: "#fff", color: "var(--prlx-ink)", border: 0, cursor: "pointer",
                fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", whiteSpace: "nowrap" }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "var(--accent)"; e.currentTarget.style.color = "#fff"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.color = "var(--prlx-ink)"; }}>
              <Icon name="Plus" size={14} /> Quote
            </button>
          )}
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { GearCard, RateBlock });