Shop by goal

import { Activity, Brain, Flame, Hourglass, Moon, Sparkles, type LucideIcon } from "lucide-react"
import { cn } from "@/components/storekit/lib/cn"

/* Shop by goal. Six small link tiles, each with an icon and a product count.
   The border turns accent on hover and focus. */

type Goal = { label: string; count: number; href: string; icon: LucideIcon }

export function CollectionBenefits({
  goals = [
    { label: "Recovery", count: 12, href: "#", icon: Activity },
    { label: "Skin", count: 8, href: "#", icon: Sparkles },
    { label: "Metabolic", count: 9, href: "#", icon: Flame },
    { label: "Sleep", count: 5, href: "#", icon: Moon },
    { label: "Cognition", count: 7, href: "#", icon: Brain },
    { label: "Longevity", count: 11, href: "#", icon: Hourglass },
  ],
  className,
}: {
  goals?: Goal[]
  className?: string
}) {
  return (
    <ul data-sk-section="collection" data-sk-variant="collection-benefits" className={cn("grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6", className)}>
      {goals.map(({ label, count, href, icon: Icon }) => (
        <li key={label}>
          <a
            href={href}
            className="group flex h-full min-h-[132px] flex-col justify-between gap-6 rounded-sk-card border border-sk-line bg-sk-card p-4 sm:p-5 outline-none transition-[border-color,transform] duration-200 ease-sk-out hover:border-sk-accent active:scale-[0.97] focus-visible:border-sk-accent focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper"
          >
            <span className="grid h-10 w-10 place-items-center rounded-sk-chip bg-sk-surface text-sk-ink transition-colors duration-200 group-hover:text-sk-accent">
              <Icon size={18} strokeWidth={1.75} aria-hidden />
            </span>
            <span className="flex flex-col gap-1">
              <span className="text-[15px] font-medium text-sk-ink">{label}</span>
              <span className="whitespace-nowrap font-sk-mono text-[11px] uppercase tracking-[0.1em] text-sk-muted tabular-nums sm:tracking-[0.14em]">
                {count} {count === 1 ? "product" : "products"}
              </span>
            </span>
          </a>
        </li>
      ))}
    </ul>
  )
}