import { Brain, Eye, Activity, FileCheck, Download, Zap } from 'lucide-react';
import { Card } from './ui/card';

export function FeaturesShowcase() {
  const features = [
    {
      icon: Brain,
      title: 'Vision Transformer (ViT)',
      description: 'Advanced computer vision model analyzes UI layouts and visual hierarchies',
      color: 'from-purple-500 to-purple-600'
    },
    {
      icon: Eye,
      title: 'Explainable AI (XAI)',
      description: 'Transparent reasoning for every detection with confidence scores',
      color: 'from-blue-500 to-blue-600'
    },
    {
      icon: Activity,
      title: 'Interactive Heatmaps',
      description: 'Visual overlay highlighting problematic areas with severity indicators',
      color: 'from-green-500 to-green-600'
    },
    {
      icon: FileCheck,
      title: 'CFPB Compliance',
      description: 'Automated checking against Consumer Financial Protection Bureau guidelines',
      color: 'from-red-500 to-red-600'
    },
    {
      icon: Zap,
      title: 'Real-time Analysis',
      description: 'Fast processing with multi-category dark pattern detection',
      color: 'from-yellow-500 to-yellow-600'
    },
    {
      icon: Download,
      title: 'Export Reports',
      description: 'Download detailed analysis reports in TXT or JSON format',
      color: 'from-indigo-500 to-indigo-600'
    }
  ];

  return (
    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
      {features.map((feature, index) => {
        const Icon = feature.icon;
        return (
          <Card key={index} className="p-6 hover:shadow-lg transition-shadow">
            <div className={`w-12 h-12 rounded-lg bg-gradient-to-br ${feature.color} flex items-center justify-center mb-4`}>
              <Icon className="w-6 h-6 text-white" />
            </div>
            <h4 className="font-semibold mb-2 text-slate-900">{feature.title}</h4>
            <p className="text-sm text-slate-600">{feature.description}</p>
          </Card>
        );
      })}
    </div>
  );
}