Product Grid

import {
  Badge,
  Button,
  Card,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@cooud-ui/ui";
import { ArrowUpRight } from "lucide-react";

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

const products: Product[] = [
  {
    id: "playbook",
    title: "The Creator Playbook",
    kind: "Course · 42 lessons",
    price: "$129",
    gradient: "from-primary/30 to-info/20",
    initials: "CP",
    badge: "Bestseller",
  },
  {
    id: "presets",
    title: "Cinematic LUT Presets",
    kind: "Asset pack · 60 presets",
    price: "$39",
    gradient: "from-info/30 to-success/20",
    initials: "LP",
  },
  {
    id: "templates",
    title: "Launch Notion System",
    kind: "Template · instant access",
    price: "$24",
    gradient: "from-warning/30 to-primary/20",
    initials: "NS",
  },
  {
    id: "ebook",
    title: "Newsletter to Income",
    kind: "Ebook · 180 pages",
    price: "$19",
    gradient: "from-success/30 to-info/20",
    initials: "NI",
  },
  {
    id: "workshop",
    title: "Monetization Workshop",
    kind: "Replay · 3 hours",
    price: "$89",
    gradient: "from-primary/30 to-warning/20",
    initials: "MW",
    badge: "New",
  },
  {
    id: "soundkit",
    title: "Ambient Sound Kit",
    kind: "Audio · 120 loops",
    price: "$29",
    gradient: "from-info/30 to-primary/20",
    initials: "SK",
  },
];

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>
  );
}