Guarantee cards

"use client"

import { motion, useReducedMotion } from "motion/react"
import { FlaskConical, RotateCcw, Truck, type LucideIcon } from "lucide-react"
import { cn } from "@/components/storekit/lib/cn"

/* Three guarantee cards. Icon in an accent tinted circle, a title and one
   line. Cards lift 2px on hover and reveal once as the row scrolls in. */

const EASE = [0.23, 1, 0.32, 1] as const

type Guarantee = { icon: LucideIcon; title: string; body: string }

export function TrustGuarantees({
  items = [
    { icon: RotateCcw, title: "30-day guarantee", body: "Not right? Send it back within 30 days for a full refund." },
    { icon: Truck, title: "Free shipping over $150", body: "Tracked, temperature-aware shipping on every order." },
    { icon: FlaskConical, title: "Lot-level testing", body: "Every batch has its own certificate, published before it ships." },
  ],
  className,
}: {
  items?: Guarantee[]
  className?: string
}) {
  const reduce = useReducedMotion()
  return (
    <ul data-sk-section="trust" data-sk-variant="trust-guarantees" className={cn("grid gap-4 sm:grid-cols-3", className)}>
      {items.map(({ icon: Icon, title, body }, i) => (
        <motion.li
          key={title}
          initial={{ opacity: 0, y: reduce ? 0 : 8 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "0px 0px -10% 0px" }}
          transition={{ duration: 0.45, ease: EASE, delay: reduce ? 0 : i * 0.06 }}
        >
          <div className="h-full rounded-sk-card border border-sk-line bg-sk-card p-6 transition-transform duration-200 ease-sk-out hover:-translate-y-0.5 motion-reduce:hover:translate-y-0">
            <span className="grid h-11 w-11 place-items-center rounded-full bg-sk-accent/10 text-sk-accent">
              <Icon size={20} strokeWidth={1.75} aria-hidden />
            </span>
            <h3 className="mt-5 text-balance font-sk-display text-[17px] font-semibold tracking-[-0.01em] text-sk-ink">{title}</h3>
            <p className="mt-1.5 text-sm leading-[1.5] text-sk-muted">{body}</p>
          </div>
        </motion.li>
      ))}
    </ul>
  )
}