import { Code2, Users, Zap } from 'lucide-react'
import SpotlightCard from '@/components/ui/SpotlightCard'

const items = [
  {
    icon: Code2,
    title: "Built in public",
    description: "We ship updates and share progress openly. No hype, no fake traction.",
  },
  {
    icon: Users,
    title: "Early users",
    description: "We're in beta. Feedback from freelancers and small teams shapes the product.",
  },
  {
    icon: Zap,
    title: "Simple setup",
    description: "Connect Gmail or Outlook, click Sort. No long onboarding or sales call.",
  },
]

export function Testimonials() {
  return (
    <section className="py-20 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-2xl sm:text-3xl font-bold text-white mb-2">
            Honest context
          </h2>
          <p className="text-slate-400 text-sm sm:text-base">
            We're a small product. Here's how we work.
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-6">
          {items.map((item, index) => (
            <SpotlightCard
              key={index}
              spotlightColor="rgba(34, 197, 94, 0.25)"
              className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10"
            >
              <div className="w-10 h-10 rounded-lg bg-primary-500/20 flex items-center justify-center mb-4">
                <item.icon className="w-5 h-5 text-primary-400" />
              </div>
              <h3 className="text-base font-semibold text-white mb-1">{item.title}</h3>
              <p className="text-slate-400 text-sm">{item.description}</p>
            </SpotlightCard>
          ))}
        </div>
      </div>
    </section>
  )
}
