import { GroceryTile } from "@/components/silo/GroceryTile";
import { binCuts } from "@/data/silo-catalog";

export const metadata = {
  title: "Bin Cuts",
  description: "Marked-down SiloMart staples. Compare-at still on the tile.",
};

export default function DropsPage() {
  return (
    <div className="mx-auto max-w-[1280px] px-4 py-10 sm:px-6 lg:px-8">
      <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--brand-orange)]">
        Marked down
      </p>
      <h1 className="mt-1 font-serif text-4xl">Bin Cuts</h1>
      <p className="mt-2 max-w-xl text-sm text-muted">
        Same labels, quieter tickets. Percent-off is computed against the crib’s
        compare-at — not a fake strikethrough.
      </p>
      <div className="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5">
        {binCuts.map((p) => (
          <GroceryTile key={p.id} product={p} layout="grid" />
        ))}
      </div>
    </div>
  );
}