Storefront grid

import {
  Badge,
  Button,
  Card,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@cronus-ui/ui";
import { PRODUCTS } from "../lib/demo-store.js";
import { ArrowUpRight } from "lucide-react";

interface Product {
  id: string;
  title: string;
  kind: string;
  price: string;
  gradient: string;
  initials: string;
  badge?: string;
}

// The storefront grid shows the digital creator line from the shared demo-store
// dataset (everything that is not the physical Audio/Accessories catalog), so the
// same products stay in sync across the grid, cart, and order surfaces. Prices are
// whole dollars here (e.g. `$129`), derived from the canonical `priceValue`.
const products: Product[] = PRODUCTS.filter(
  (p) => p.category !== "Audio" && p.category !== "Accessories",
).map((p) => ({
  id: p.id,
  title: p.name,
  kind: p.kind,
  price: `$${p.priceValue}`,
  gradient: p.gradient,
  initials: p.initials,
  badge: p.badge,
}));

export function ProductGridBlock() {
  return (
    <section aria-label="Digital products" className="flex w-full flex-col gap-6">
      <header className="flex flex-wrap items-end justify-between gap-3">
        <div className="flex flex-col gap-1">
          <h2 className="font-display text-2xl font-semibold text-fg">Shop the store</h2>
          <p className="text-sm text-fg-secondary">Digital products from independent creators.</p>
        </div>
        <Badge variant="secondary">6 products</Badge>
      </header>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {products.map((product) => (
          <Card key={product.id} className="gap-0 overflow-hidden pt-0 shadow-sm">
            <div className={`relative flex aspect-[16/10] items-center justify-center bg-gradient-to-br ${product.gradient}`}>
              <span className="font-display text-3xl font-semibold text-fg/70">
                {product.initials}
              </span>
              {product.badge ? (
                <div className="absolute left-3 top-3">
                  <Badge variant="primary">{product.badge}</Badge>
                </div>
              ) : null}
            </div>
            <CardHeader className="pt-4">
              <CardTitle className="font-display text-base">{product.title}</CardTitle>
              <p className="col-span-full text-sm text-fg-tertiary">{product.kind}</p>
            </CardHeader>
            <CardFooter className="mt-auto items-center justify-between gap-3 pt-4">
              <span className="font-display text-lg font-semibold text-fg">{product.price}</span>
              <Button size="sm">
                Buy now
                <ArrowUpRight className="size-3.5" aria-hidden="true" />
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>
    </section>
  );
}