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

const features = [
  {
    icon: Inbox,
    title: "Categories, not chaos",
    description: "Leads, clients, invoices, newsletters — sorted into folders. Your inbox shows what pays first.",
    color: "from-violet-500 to-purple-600",
    highlight: true,
  },
  {
    icon: Zap,
    title: "One click to sort",
    description: "Connect your inbox, click Sort Now. No rules to write. We read and categorize; you review.",
    color: "from-amber-500 to-orange-600",
    highlight: true,
  },
  {
    icon: Settings,
    title: "Runs when you want",
    description: "Sort on demand or set a schedule. Your inbox stays organized without you touching it.",
    color: "from-blue-500 to-cyan-600",
    highlight: true,
  },
  {
    icon: Brain,
    title: "Content-aware sorting",
    description: "We look at sender, subject, and a short snippet to decide the category. No keyword lists.",
    color: "from-green-500 to-emerald-600"
  },
  {
    icon: Shield,
    title: "Minimal data",
    description: "We only read what we need to categorize. No storing email body or attachments. GDPR compliant.",
    color: "from-pink-500 to-rose-600"
  },
  {
    icon: Clock,
    title: "Less time on triage",
    description: "Spend less time deciding what's important. Inbox shows clients and leads first.",
    color: "from-indigo-500 to-blue-600"
  },
]

export function Features() {
  return (
    <section id="features" className="py-24 bg-slate-50 dark:bg-slate-900">
      <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 dark:text-slate-100 mb-4">
            What it does
          </h2>
          <p className="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
            Sort incoming mail into categories so your inbox shows what matters first. No rules to write.
          </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 dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700 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 dark:bg-red-900/30 flex items-center justify-center">
                  <Inbox className="w-10 h-10 text-red-500 dark:text-red-400" />
                </div>
                <h4 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">Before</h4>
                <p className="text-sm text-slate-500 dark:text-slate-400">Inbox chaos</p>
                <div className="mt-3 text-3xl font-bold text-red-500 dark:text-red-400">847</div>
                <p className="text-xs text-slate-400 dark:text-slate-500">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 dark:bg-green-900/30 flex items-center justify-center">
                  <Inbox className="w-10 h-10 text-green-500 dark:text-green-400" />
                </div>
                <h4 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">After</h4>
                <p className="text-sm text-slate-500 dark:text-slate-400">All sorted</p>
                <div className="mt-3 text-3xl font-bold text-green-500 dark:text-green-400">12</div>
                <p className="text-xs text-slate-400 dark:text-slate-500">important emails</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

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

function FeatureCard({ icon: Icon, title, description, color, index, highlight }: FeatureCardProps) {
  return (
    <div 
      className={`group rounded-2xl p-6 border transition-all duration-300 ${
        highlight 
          ? 'bg-gradient-to-br from-white dark:from-slate-800 to-slate-50 dark:to-slate-800/50 border-primary-200 dark:border-primary-800 hover:border-primary-300 dark:hover:border-primary-700 hover:shadow-xl' 
          : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 hover:border-primary-200 dark:hover:border-primary-800 hover:shadow-lg'
      }`}
      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 shadow-lg`}>
        <Icon className="w-7 h-7 text-white" />
      </div>
      <h3 className={`${highlight ? 'text-2xl' : 'text-xl'} font-semibold text-slate-900 dark:text-slate-100 mb-2`}>{title}</h3>
      <p className="text-slate-600 dark:text-slate-400">{description}</p>
    </div>
  )
}
