import { Card } from "@/components/ui/card";
import { 
  QrCode, 
  Package, 
  Globe, 
  FileSpreadsheet, 
  Users, 
  MapPin, 
  Bot, 
  Wallet,
  ShieldCheck,
  Clock,
  Smartphone,
  Wifi
} from "lucide-react";

const features = [
  {
    icon: QrCode,
    title: "Fast QR Checkout",
    description: "Customers scan and pay using Kenya's official KE-QR Code Standard (2023)",
    color: "bg-telkom-orange"
  },
  {
    icon: Package,
    title: "Automated Inventory",
    description: "Real-time stock updates with every sale. Never run out of popular items.",
    color: "bg-telkom-turquoise"
  },
  {
    icon: Globe,
    title: "Online Sales",
    description: "Sell products and services online. Accept orders from anywhere in Kenya.",
    color: "bg-green-500"
  },
  {
    icon: FileSpreadsheet,
    title: "Automated Accounting",
    description: "Business performance reports generated automatically. Track revenue and costs.",
    color: "bg-purple-500"
  },
  {
    icon: Users,
    title: "Employee Management",
    description: "Role-based access, activity tracking, and salary payments through T-kash.",
    color: "bg-blue-500"
  },
  {
    icon: MapPin,
    title: "Geo-fencing",
    description: "Location-based controls ensure staff can only operate from your shop.",
    color: "bg-red-500"
  },
  {
    icon: Bot,
    title: "AI Support",
    description: "In-app AI assistant for instant help with any question or issue.",
    color: "bg-indigo-500"
  },
  {
    icon: Wallet,
    title: "Pay Later",
    description: "Offer flexible 7, 14, or 30 day payment terms to attract more customers.",
    color: "bg-amber-500"
  },
  {
    icon: ShieldCheck,
    title: "AI Credit Profile",
    description: "Every transaction builds your credit score for future business loans.",
    color: "bg-emerald-500"
  },
  {
    icon: Clock,
    title: "1-Minute Setup",
    description: "Automatic business setup with no paperwork or branch visits required.",
    color: "bg-pink-500"
  },
  {
    icon: Smartphone,
    title: "No Hardware",
    description: "Everything runs on your smartphone. No POS machines or extra devices.",
    color: "bg-cyan-500"
  },
  {
    icon: Wifi,
    title: "Free Data",
    description: "T-kash Soko uses free data when your phone has a Telkom SIM.",
    color: "bg-violet-500"
  }
];

export default function FeaturesSection() {
  return (
    <section id="features" className="py-20 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            Powerful Tools to Grow Your Business
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Everything you need to sell, manage, and grow — built into one simple app.
          </p>
        </div>
        
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {features.map((feature, index) => {
            const Icon = feature.icon;
            return (
              <Card 
                key={index} 
                className="p-6 border-0 shadow-md hover:shadow-xl transition-all duration-300 bg-white group"
                data-testid={`card-feature-${index}`}
              >
                <div className={`w-12 h-12 rounded-xl ${feature.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
                  <Icon className="w-6 h-6 text-white" />
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-2">{feature.title}</h3>
                <p className="text-gray-600 text-sm leading-relaxed">{feature.description}</p>
              </Card>
            );
          })}
        </div>
      </div>
    </section>
  );
}
