import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Check, Wallet, ShoppingBag, Send, Receipt, CreditCard, Ticket, MapPin, Building } from "lucide-react";
import personalImage from "@assets/image_1768676575623.png";

const features = [
  {
    icon: ShoppingBag,
    title: "Shop Anywhere",
    description: "Shop from local stores or order online from T-kash Soko merchants"
  },
  {
    icon: Wallet,
    title: "Zero Fees",
    description: "Pay using T-kash with zero transaction fees on T-kash Soko"
  },
  {
    icon: Ticket,
    title: "Win Up to 1M KSH*",
    description: "Every purchase of minimum 200 KSH earns lottery tickets for monthly draws*"
  },
  {
    icon: CreditCard,
    title: "Build Credit",
    description: "Every payment builds your personal credit profile for future loans"
  },
  {
    icon: Send,
    title: "Track Your Spending",
    description: "Track how you spend your money and transfer funds easily"
  },
  {
    icon: Receipt,
    title: "Digital Receipts",
    description: "Access all your purchase receipts digitally, organized in one place"
  },
  {
    icon: MapPin,
    title: "Book Services",
    description: "Book hairdressers, barbers, mechanics, and domestic services"
  },
  {
    icon: Building,
    title: "40,000+ Agents",
    description: "Deposit cash easily at over 40,000 T-kash or KCB agents"
  }
];

export default function PersonalSection() {
  return (
    <section id="personal" className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4">
        <div className="text-center mb-16">
          <Badge className="bg-telkom-yellow/20 text-amber-700 border-telkom-yellow/30 mb-4">
            For Everyday Users
          </Badge>
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            Personal Shopping & Payments
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            T-kash Soko isn't just for merchants. Use the same app for all your personal shopping, payments, and money transfers.
          </p>
        </div>
        
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div className="relative rounded-2xl overflow-hidden shadow-xl">
            <img
              src={personalImage}
              alt="Young African person using mobile payment"
              className="w-full h-auto object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent" />
            <div className="absolute bottom-0 left-0 right-0 p-6">
              <div className="bg-white/10 backdrop-blur-md rounded-xl p-4 border border-white/20">
                <div className="flex items-center justify-between text-white">
                  <div>
                    <p className="font-semibold text-lg">One App. Two Profiles.</p>
                    <p className="text-sm text-gray-300">Switch between personal and merchant modes</p>
                  </div>
                  <div className="flex gap-2">
                    <div className="w-10 h-10 rounded-full bg-telkom-orange flex items-center justify-center">
                      <ShoppingBag className="w-5 h-5" />
                    </div>
                    <div className="w-10 h-10 rounded-full bg-telkom-turquoise flex items-center justify-center">
                      <Wallet className="w-5 h-5" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div>
            <div className="grid sm:grid-cols-2 gap-4">
              {features.map((feature, index) => {
                const Icon = feature.icon;
                return (
                  <Card 
                    key={index} 
                    className="p-5 border border-gray-100 hover:border-telkom-yellow/50 hover:shadow-md transition-all"
                    data-testid={`card-personal-feature-${index}`}
                  >
                    <div className="flex items-start gap-4">
                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-telkom-yellow/20 to-amber-100 flex items-center justify-center flex-shrink-0">
                        <Icon className="w-5 h-5 text-amber-600" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-gray-900 mb-1">{feature.title}</h3>
                        <p className="text-sm text-gray-600">{feature.description}</p>
                      </div>
                    </div>
                  </Card>
                );
              })}
            </div>
          </div>
        </div>
        
        <p className="text-center text-sm text-gray-500 mt-8">*Lottery feature will be active from February 2026</p>
      </div>
    </section>
  );
}
