import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Ticket, Wallet, Building, Banknote, Check, Sparkles } from "lucide-react";

const paymentOptions = [
  {
    id: "tkash-soko",
    icon: Wallet,
    title: "T-kash Soko",
    subtitle: "Requires connected T-kash wallet",
    highlight: "Zero Fees",
    highlightColor: "bg-green-100 text-green-700",
    lotteryTickets: 4,
    features: [
      "No transaction fees for customers",
      "Instant payment confirmation",
      "Build customer credit profile",
      "Seamless in-app experience"
    ],
    color: "border-telkom-turquoise/50 bg-gradient-to-br from-cyan-50 to-white"
  },
  {
    id: "external",
    icon: Building,
    title: "Wallets & Bank Apps",
    subtitle: "M-PESA, KCB, Co-op, NCBA, etc.",
    highlight: "Wide Reach",
    highlightColor: "bg-blue-100 text-blue-700",
    lotteryTickets: 2,
    features: [
      "Accept any KE-QR compatible wallet",
      "Bank app payments supported",
      "Standard wallet/bank fees apply",
      "Broad customer compatibility"
    ],
    color: "border-gray-200 bg-white"
  },
  {
    id: "cash",
    icon: Banknote,
    title: "Cash Payments",
    subtitle: "Traditional payments tracked",
    highlight: "50 KSH Credit",
    highlightColor: "bg-amber-100 text-amber-700",
    lotteryTickets: 1,
    features: [
      "Every user gets 50 KSH fee credit",
      "Accumulated fees settled later",
      "Full sales tracking in app",
      "Digital receipts for cash sales"
    ],
    color: "border-gray-200 bg-white"
  }
];

export default function PaymentOptions() {
  return (
    <section 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">
            Accept All Payment Methods
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            One app to accept T-kash, M-PESA, bank apps, and cash. Plus, earn lottery tickets with every transaction!*
          </p>
        </div>
        
        <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
          {paymentOptions.map((option) => {
            const Icon = option.icon;
            return (
              <Card 
                key={option.id} 
                className={`relative overflow-hidden border-2 ${option.color} shadow-lg hover:shadow-xl transition-all`}
                data-testid={`card-payment-${option.id}`}
              >
                {option.id === "tkash-soko" && (
                  <div className="absolute top-0 right-0">
                    <div className="bg-telkom-turquoise text-white text-xs font-bold px-4 py-1 rounded-bl-lg">
                      RECOMMENDED
                    </div>
                  </div>
                )}
                
                <div className="p-6">
                  <div className="flex items-start gap-4 mb-6">
                    <div className="w-14 h-14 rounded-2xl bg-gray-100 flex items-center justify-center flex-shrink-0">
                      <Icon className="w-7 h-7 text-gray-700" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold text-gray-900">{option.title}</h3>
                      <p className="text-sm text-gray-500">{option.subtitle}</p>
                    </div>
                  </div>
                  
                  <Badge className={`${option.highlightColor} border-0 mb-6`}>
                    {option.highlight}
                  </Badge>
                  
                  <div className="space-y-3 mb-6">
                    {option.features.map((feature, index) => (
                      <div key={index} className="flex items-start gap-3">
                        <Check className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
                        <span className="text-sm text-gray-600">{feature}</span>
                      </div>
                    ))}
                  </div>
                  
                  <div className="pt-4 border-t border-gray-100">
                    <div className="flex items-center gap-2">
                      <div className="flex items-center gap-1">
                        {Array.from({ length: option.lotteryTickets }).map((_, i) => (
                          <Ticket key={i} className="w-5 h-5 text-telkom-orange" />
                        ))}
                      </div>
                      <span className="text-sm font-medium text-gray-700">
                        {option.lotteryTickets} Lottery Tickets*
                      </span>
                    </div>
                    <p className="text-xs text-gray-500 mt-1">
                      For sales of 200 KSH or more
                    </p>
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
        
        <div className="mt-12 bg-gradient-to-r from-telkom-orange to-amber-500 rounded-2xl p-8 text-center text-white">
          <div className="flex items-center justify-center gap-3 mb-4">
            <Sparkles className="w-8 h-8" />
            <h3 className="text-2xl md:text-3xl font-bold">Monthly Lottery*</h3>
            <Sparkles className="w-8 h-8" />
          </div>
          <p className="text-xl mb-2">Win up to <span className="font-bold text-3xl">1,000,000 KSH</span> every month!</p>
          <p className="text-white/80">Every transaction earns you lottery tickets. The more you sell or buy, the more chances to win.</p>
          <p className="text-white/60 text-sm mt-4">*Lottery feature will be active from February 2026</p>
        </div>
      </div>
    </section>
  );
}
