import { 
  Brain, 
  Zap, 
  Shield, 
  Clock, 
  Tags, 
  Settings,
  Inbox,
  Filter
} from 'lucide-react'

const features = [
  {
    icon: Brain,
    title: "AI-powered categorization",
    description: "Our AI automatically recognizes whether an email is an invoice, newsletter, or important message.",
    color: "from-violet-500 to-purple-600"
  },
  {
    icon: Zap,
    title: "Real-time sorting",
    description: "New emails are categorized instantly. Your inbox arrives already sorted.",
    color: "from-amber-500 to-orange-600"
  },
  {
    icon: Tags,
    title: "Smart labels",
    description: "Automatic labels for VIP, clients, invoices, newsletters, social media and more.",
    color: "from-blue-500 to-cyan-600"
  },
  {
    icon: Shield,
    title: "GDPR compliant",
    description: "Your data stays secure. We only read email headers and metadata for sorting.",
    color: "from-green-500 to-emerald-600"
  },
  {
    icon: Clock,
    title: "Save time",
    description: "Average 2 hours per week less on email organization. More time for what matters.",
    color: "from-pink-500 to-rose-600"
  },
  {
    icon: Settings,
    title: "Fully customizable",
    description: "Define your own rules, VIP contacts, and categories based on your needs.",
    color: "from-indigo-500 to-blue-600"
  },
]

export function Features() {
  return (
    <section id="features" className="py-24 bg-slate-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section header */}
        <div className="text-center mb-16">
          <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
            Everything you need for{' '}
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-accent-500">
              Inbox Zero
            </span>
          </h2>
          <p className="text-lg text-slate-600 max-w-2xl mx-auto">
            EmailSorter combines AI technology with proven email management methods 
            for maximum productivity.
          </p>
        </div>

        {/* Features grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <FeatureCard key={index} {...feature} index={index} />
          ))}
        </div>

        {/* Bottom illustration */}
        <div className="mt-20 relative">
          <div className="bg-white rounded-3xl border border-slate-200 shadow-xl p-8 max-w-4xl mx-auto">
            <div className="grid md:grid-cols-3 gap-8 items-center">
              {/* Before */}
              <div className="text-center">
                <div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-red-100 flex items-center justify-center">
                  <Inbox className="w-10 h-10 text-red-500" />
                </div>
                <h4 className="font-semibold text-slate-900 mb-1">Before</h4>
                <p className="text-sm text-slate-500">Inbox chaos</p>
                <div className="mt-3 text-3xl font-bold text-red-500">847</div>
                <p className="text-xs text-slate-400">unread emails</p>
              </div>

              {/* Arrow */}
              <div className="hidden md:flex justify-center">
                <div className="w-24 h-24 rounded-full bg-gradient-to-r from-primary-500 to-accent-500 flex items-center justify-center shadow-lg">
                  <Filter className="w-10 h-10 text-white" />
                </div>
              </div>

              {/* After */}
              <div className="text-center">
                <div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-green-100 flex items-center justify-center">
                  <Inbox className="w-10 h-10 text-green-500" />
                </div>
                <h4 className="font-semibold text-slate-900 mb-1">After</h4>
                <p className="text-sm text-slate-500">All sorted</p>
                <div className="mt-3 text-3xl font-bold text-green-500">12</div>
                <p className="text-xs text-slate-400">important emails</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

interface FeatureCardProps {
  icon: React.ElementType
  title: string
  description: string
  color: string
  index: number
}

function FeatureCard({ icon: Icon, title, description, color, index }: FeatureCardProps) {
  return (
    <div 
      className="group bg-white rounded-2xl p-6 border border-slate-200 hover:border-primary-200 hover:shadow-lg transition-all duration-300"
      style={{ animationDelay: `${index * 0.1}s` }}
    >
      <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${color} flex items-center justify-center mb-5 group-hover:scale-110 transition-transform duration-300`}>
        <Icon className="w-7 h-7 text-white" />
      </div>
      <h3 className="text-xl font-semibold text-slate-900 mb-2">{title}</h3>
      <p className="text-slate-600">{description}</p>
    </div>
  )
}
