// Listing card — two variants: editorial (default) & dense row

function ListingCard({ item, onClick, onWatch, watching, variant = "editorial", accent }) {
  const cd = useCountdown(item.closesAt);

  if (variant === "dense") {
    return (
      <div className="row-card" onClick={() => onClick(item.id)}>
        <img className="row-photo" src={item.photos[0]} alt="" loading="lazy" />
        <div>
          <div className="row-title">{item.title}</div>
          <div className="row-sub">{item.brand}</div>
        </div>
        <div>
          <span className={`tag ${typeTagClass(item.type)}`}>{typeLabel(item.type)}</span>
        </div>
        <div className="mono num" style={{ fontSize: 14 }}>{item.quantity.toLocaleString()} <span style={{ color: "var(--ink-3)", fontSize: 12 }}>units</span></div>
        <div>
          <div className="stat-kicker" style={{ marginBottom: 2, fontSize: 10 }}>Start</div>
          <div className="mono num" style={{ fontSize: 14 }}>{fmt$(item.startingBid)}</div>
        </div>
        <div>
          <div className="stat-kicker" style={{ marginBottom: 2, fontSize: 10 }}>Current</div>
          <div className="mono num" style={{ fontSize: 14, color: "var(--emerald)", fontWeight: 600 }}>{fmt$(item.currentBid)}</div>
        </div>
        <div>
          <div className="stat-kicker" style={{ marginBottom: 2, fontSize: 10 }}>Buy now</div>
          <div className="mono num" style={{ fontSize: 14 }}>{item.buyNow ? fmt$(item.buyNow) : "—"}</div>
        </div>
        <div>
          <div className={"countdown " + (cd.urgent ? "urgent" : "")} title="Time left">
            <IcClock size={13} /> {cd.short}
          </div>
          <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 2 }}>{item.bidCount} bid{item.bidCount === 1 ? "" : "s"}</div>
        </div>
      </div>
    );
  }

  return (
    <article className="listing-card" onClick={() => onClick(item.id)}>
      <div className="listing-photo">
        <img src={item.photos[0]} alt={item.title} loading="lazy" />
        <div className="photo-overlay-top">
          <span className={`tag ${typeTagClass(item.type)}`}>{typeLabel(item.type)}</span>
          <button className="watch-btn" data-on={watching}
            onClick={(e) => { e.stopPropagation(); onWatch(item.id); }}
            title={watching ? "Saved" : "Save"}>
            {watching ? <IcBookmarkFill size={15} /> : <IcBookmark size={15} />}
          </button>
        </div>
        <div className="photo-overlay-bot">
          {cd.urgent && (
            <span className="pill pill-amber">
              <span className="status-dot" /> Closing soon
            </span>
          )}
        </div>
      </div>
      <div className="listing-body">
        <div className="listing-meta">
          <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{item.id}</span>
          <span className="listing-brand">{item.brand}</span>
        </div>
        <h3 className="listing-title">{item.title}</h3>
        <div className="row gap-12 center" style={{ fontSize: 13, color: "var(--ink-3)", whiteSpace: "nowrap", overflow: "hidden" }}>
          <span className="row center gap-4" style={{ whiteSpace: "nowrap" }}><IcBox size={13} /> {item.quantity.toLocaleString()} {item.quantity === 1 ? "unit" : "units"}</span>
          <span style={{ width: 3, height: 3, background: "var(--ink-4)", borderRadius: "50%", flexShrink: 0 }} />
          <span className="row center gap-4" style={{ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}><IcMapPin size={13} /> {item.location}</span>
        </div>
        <div style={{ flex: 1 }} />
        <div className="listing-stats">
          <div className="listing-stat">
            <div className="listing-stat-label">Start</div>
            <div className="listing-stat-value mono">{fmt$k(item.startingBid)}</div>
          </div>
          <div className="listing-stat">
            <div className="listing-stat-label">Current</div>
            <div className="listing-stat-value emerald mono">{fmt$k(item.currentBid)}</div>
          </div>
          <div className="listing-stat">
            <div className="listing-stat-label">Buy now</div>
            <div className="listing-stat-value mono">{item.buyNow ? fmt$k(item.buyNow) : "—"}</div>
          </div>
        </div>
      </div>
      <div className="listing-footer">
        <div className={"countdown " + (cd.urgent ? "urgent" : "")}>
          <IcClock size={13} /> {cd.short} left
        </div>
        <span style={{ color: "var(--ink-3)" }}>{item.bidCount} bid{item.bidCount === 1 ? "" : "s"}</span>
      </div>
    </article>
  );
}

Object.assign(window, { ListingCard });