import { CheckCircle2, Clock, Brain, Shield } from 'lucide-react'

const benefits = [
  {
    icon: Clock,
    title: "Save 2+ hours/week",
    description: "Less time sorting emails, more time for important tasks.",
  },
  {
    icon: Brain,
    title: "AI does it automatically",
    description: "Set up once, then everything runs by itself.",
  },
  {
    icon: Shield,
    title: "Privacy first",
    description: "Your emails stay private. We don't store any content.",
  },
  {
    icon: CheckCircle2,
    title: "Easy to use",
    description: "No learning curve. Ready to go in 2 minutes.",
  },
]

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-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section header */}
        <div className="text-center mb-12">
          <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
            Why EmailSorter?
          </h2>
          <p className="text-lg text-slate-300 max-w-2xl mx-auto">
            No more email chaos. Focus on what matters.
          </p>
        </div>

        {/* Benefits grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {benefits.map((benefit, index) => (
            <BenefitCard key={index} {...benefit} />
          ))}
        </div>
      </div>
    </section>
  )
}

interface BenefitCardProps {
  icon: React.ElementType
  title: string
  description: string
}

function BenefitCard({ icon: Icon, title, description }: BenefitCardProps) {
  return (
    <div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:bg-white/10 transition-colors">
      <div className="w-12 h-12 rounded-lg bg-primary-500/20 flex items-center justify-center mb-4">
        <Icon className="w-6 h-6 text-primary-400" />
      </div>
      <h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
      <p className="text-slate-400 text-sm">{description}</p>
    </div>
  )
}
