import { ProductRail } from "@/components/silo/ProductRail";
import { GroceryTile } from "@/components/silo/GroceryTile";
import { weeklyCrib, binCuts, siloDrops } from "@/data/silo-catalog";

export const metadata = {
  title: "Weekly Crib",
  description: "This week's SiloMart circular — dated prices, short bins.",
};

export default function WeeklyPage() {
  return (
    <div>
      <div className="silo-chrome border-b border-border bg-[var(--brand-blue-deep)] text-[var(--on-brand)]">
        <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)]">
            Circular · 8/13 – 8/19
          </p>
          <h1 className="mt-2 font-serif text-4xl">Weekly Crib</h1>
          <p className="mt-2 max-w-xl text-sm text-[var(--on-brand)]/75">
            Everyday mill prices, printed as a crib — not a flyer stuffed with coupons.
          </p>
        </div>
      </div>
      <div className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6 lg:px-8">
        <h2 className="font-serif text-2xl">This week’s staples</h2>
        <div className="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5">
          {weeklyCrib.map((p) => (
            <GroceryTile key={p.id} product={p} layout="grid" />
          ))}
        </div>
      </div>
      <ProductRail title="Bin Cuts this week" href="/drops" products={binCuts.slice(0, 10)} />
      <ProductRail title="Silo Drops in the crib" href="/finds" products={siloDrops} />
    </div>
  );
}