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

export const metadata = {
  title: "Silo Drops",
  description: "Limited-time bins. This week only.",
};

export default function FindsPage() {
  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(--straw)]">
        8/13/2026 – 8/19/2026
      </p>
      <h1 className="mt-1 font-serif text-4xl">This week’s Silo Drops</h1>
      <p className="mt-2 max-w-xl text-sm text-muted">
        Short-run goods that leave the crib when the week turns. Hardware,
        wash, and pantry surprises — not a permanent aisle.
      </p>
      <div className="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5">
        {siloDrops.map((p) => (
          <GroceryTile key={p.id} product={p} layout="grid" />
        ))}
      </div>
    </div>
  );
}