/** Open bags live as stacked bubbles at the bottom right. Hold one to arm its ×. */
function CartBubbles({ carts, onOpen, onClose, armed, onArm }) {
  const keys = Object.keys(carts).filter(k => carts[k].length);
  if (!keys.length) return null;
  const timer = React.useRef(null);

  return (
    <div style={{ position: "absolute", left: 16, bottom: 118, zIndex: 45, display: "flex", flexDirection: "column-reverse", gap: 10 }}>
      {keys.map(k => {
        const count = carts[k].reduce((a, i) => a + i.qty, 0);
        const isArmed = armed === k;
        return (
          <div key={k} style={{ position: "relative" }}>
            <button type="button"
              onPointerDown={() => { timer.current = setTimeout(() => onArm(k), 420); }}
              onPointerUp={() => clearTimeout(timer.current)}
              onPointerLeave={() => clearTimeout(timer.current)}
              onClick={() => { if (!isArmed) onOpen(k); }}
              style={{
                width: 58, height: 58, borderRadius: "var(--radius-pill)",
                background: "var(--black)", border: "1px solid var(--white)",
                color: "var(--white)", cursor: "pointer", padding: 0,
                display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 1,
                opacity: isArmed ? 0.35 : 1,
                transition: "opacity var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out)"
              }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontStretch: "125%", fontSize: 17, lineHeight: 1 }}>
                {k.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase()}
              </span>
              <span style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 9, letterSpacing: "0.08em" }}>{plural(count, "item", "itens")}</span>
            </button>
            {isArmed && (
              <button type="button" aria-label={"Fechar sacola de " + k} onClick={() => onClose(k)}
                style={{
                  position: "absolute", inset: 0, borderRadius: "var(--radius-pill)",
                  background: "transparent", border: "none", cursor: "pointer", color: "var(--white)",
                  display: "flex", alignItems: "center", justifyContent: "center"
                }}>
                <Icon d={P.x} size={22} stroke={2.5} />
              </button>
            )}
          </div>
        );
      })}
    </div>
  );
}
Object.assign(window, { CartBubbles });