const CartDropdown = ({ onClose, navigate }) => {
  const { cart, removeFromCart, cartTotal, fmt } = useContext(StoreCtx);
  return (
    <div className="cart-dd" role="dialog" aria-label="Cart">
      <div className="cart-dd-head">
        <h4>Cart · {cart.length}</h4>
        <button className="btn btn-sm btn-ghost" onClick={onClose}><Icon.X size={14} /></button>
      </div>
      <div className="cart-dd-body">
        {cart.length === 0 ? (
          <div className="cart-empty">
            Your cart is empty.
            <span className="mono">// add a script to get started</span>
          </div>
        ) : (
          cart.map((line) => {
            const p = PRODUCTS.find((x) => x.id === line.id);
            if (!p) return null;
            return (
              <div className="cart-line" key={line.id}>
                <div className="cart-thumb">
                  <Placeholder label={p.name.split(" ").map(w => w[0]).join("").slice(0,3)} />
                </div>
                <div className="cart-line-info">
                  <div className="name">{p.name}</div>
                  <div className="meta">{p.category} · v{p.version}</div>
                </div>
                <div className="cart-line-right">
                  <div className="price">{fmt(p.price)}</div>
                  <button className="rm" onClick={() => removeFromCart(line.id)}>remove</button>
                </div>
              </div>
            );
          })
        )}
      </div>
      {cart.length > 0 ? (
        <div className="cart-dd-foot">
          <div className="cart-total-row">
            <span className="label">Subtotal</span>
            <span className="val">{fmt(cartTotal)}</span>
          </div>
          <button
            className="btn btn-primary btn-block"
            onClick={() => { onClose(); navigate("checkout"); }}
          >
            Checkout <Icon.Arrow size={14} />
          </button>
          <div style={{ textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-3)", marginTop: 10, letterSpacing: "0.04em", textTransform: "uppercase" }}>
            <Icon.Lock size={10} /> &nbsp;Secure checkout via Tebex
          </div>
        </div>
      ) : null}
    </div>
  );
};

Object.assign(window, { CartDropdown });