Spotlight Card

import { CardSpotlight } from '@/components/ui/card-spotlight'

import { Workflow, ShieldCheck, Timer } from 'lucide-react'
import { CardSpotlight } from '@/components/ui/card-spotlight'

const cards = [
  {
    icon: Workflow,
    title: 'Chained approvals',
    body: 'Route invoices through the right owner automatically, finance sees only what crosses their threshold.',
  },
  {
    icon: ShieldCheck,
    title: 'Guardrails built in',
    body: 'Every automated action is logged, reversible, and scoped to the permissions you set on day one.',
  },
  {
    icon: Timer,
    title: '38 hours back, monthly',
    body: 'The median team stops doing manual handoffs within two weeks of switching on autopilot.',
  },
]

export default function CardSpotlightDemo() {
  return (
    <div className="mx-auto grid min-h-[480px] max-w-5xl items-center gap-5 px-6 py-20 sm:grid-cols-3">
      {cards.map(({ icon: Icon, title, body }) => (
        <CardSpotlight key={title}>
          <div className="p-6">
            <Icon className="size-5 text-primary" aria-hidden="true" />
            <h3 className="mt-4 font-medium text-card-foreground">{title}</h3>
            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{body}</p>
          </div>
        </CardSpotlight>
      ))}
    </div>
  )
}