function Catalog({ items, density, onPick }) {
  const publicItems = getPublicItems(items);
  const [filter, setFilter] = React.useState("tudo");
  const categories = ["tudo", ...Array.from(new Set(publicItems.map((item) => item.category)))];
  const visible = filter === "tudo" ? publicItems : publicItems.filter((item) => item.category === filter);
  const counts = getStatusCounts(publicItems);
  const total = getItemTotal(publicItems);

  return (
    <section className="shell" id="catálogo">
      <div className="index">
        <div className="index-head">
          <h2>Índice <em>de objetos</em></h2>
          <div className="filters" role="list" aria-label="Filtrar por categoria">
            {categories.map((category) => (
              <button
                key={category}
                type="button"
                className={filter === category ? "active" : ""}
                aria-pressed={filter === category}
                onClick={() => setFilter(category)}
              >
                {category}
              </button>
            ))}
          </div>
        </div>
        <div className="mono count-line">
          <span>{counts.available} disponíveis</span>
          <span>{counts.reserved} reservados</span>
          <span>{counts.sold} vendidos</span>
          {counts.invalid > 0 && <span>{counts.invalid} com status inválido</span>}
          <span className="count-total">{visible.length} de {total}</span>
        </div>
        <div className={`grid density-${density}`}>
          {visible.map((item, index) => (
            <Card key={item.id} item={item} idx={index} total={total} onPick={onPick} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Card({ item, idx, total, onPick }) {
  const status = getStatus(item);
  const open = (event) => {
    if (
      event.defaultPrevented ||
      event.button !== 0 ||
      event.metaKey ||
      event.altKey ||
      event.ctrlKey ||
      event.shiftKey
    ) {
      return;
    }
    onPick(item);
  };

  return (
    <a
      href={getItemHash(item)}
      className={`card ${item.status === "sold" ? "sold" : ""} ${!validateStatus(item.status) ? "invalid" : ""}`}
      onClick={open}
      aria-label={`Abrir detalhes de ${item.name}, ${status.short}, ${formatItemPrice(item)}`}
    >
      <div className="catno">No. {item.id} / {total}</div>
      <div className="thumb">
        <PhotoFrame item={item} variant={idx} />
        <div className={`status-pill ${status.pill}`}>
          {item.status === "available" && <span className="status-dot"></span>}
          {status.short}
        </div>
        <span className="label">{item.category.toLowerCase()} · {item.id}</span>
      </div>
      <div className="meta">
        <h3>{item.name}</h3>
        <div className="price">{formatItemPrice(item)}</div>
      </div>
      <div className="cat-line">
        <span className="mono">{item.category}</span>
        <span className="mono">{item.year}</span>
      </div>
    </a>
  );
}

Object.assign(window, { Catalog, Card });