import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Store, Wrench, ShoppingCart, ArrowRight, Check } from "lucide-react";

const pathways = [
  {
    id: "merchants",
    icon: Store,
    title: "For Product Vendors",
    subtitle: "Dukas, Kiosks, Retail Shops, Mini Supermarkets",
    description: "Sell products, manage inventory, and accept all payment types with powerful business tools.",
    features: [
      "Online and in-store sales",
      "Real-time inventory tracking",
      "Multi-shop & employee management",
      "Automated accounting reports"
    ],
    iconBg: "#FFED00",
    iconColor: "#000000",
    bgGradient: "from-yellow-50 to-yellow-100/50"
  },
  {
    id: "services",
    icon: Wrench,
    title: "For Service Vendors",
    subtitle: "Barbers, Salons, Mechanics, Plumbers, Tutors",
    description: "Get booked, get paid, and look professional with online bookings and service management.",
    features: [
      "Online booking & payments",
      "Reduce no-shows with prepayment",
      "Service history tracking",
      "Staff scheduling & geo-fencing"
    ],
    iconBg: "#00AACA",
    iconColor: "#FFFFFF",
    bgGradient: "from-cyan-50 to-cyan-100/50"
  },
  {
    id: "personal",
    icon: ShoppingCart,
    title: "Personal Shopping",
    subtitle: "Consumers & Everyday Users",
    description: "Shop, pay bills, send money, and book services with zero transaction fees using T-kash.",
    features: [
      "Zero fees with T-kash",
      "Shop and order online",
      "Build your credit profile",
      "Book local services easily"
    ],
    iconBg: "#FFED00",
    iconColor: "#000000",
    bgGradient: "from-yellow-50 to-yellow-100/50"
  }
];

export default function UserPathways() {
  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">
            Choose Your Path to Growth
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Build your credit profile with every transaction and unlock access to bank loans. Whether you sell products, offer services, or simply want to shop smarter, T-kash Soko helps you grow financially.
          </p>
        </div>
        
        <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
          {pathways.map((pathway) => {
            const Icon = pathway.icon;
            return (
              <Card 
                key={pathway.id}
                className={`relative overflow-hidden border-0 shadow-lg hover:shadow-xl transition-all duration-300 bg-gradient-to-br ${pathway.bgGradient}`}
                data-testid={`card-pathway-${pathway.id}`}
              >
                <div className="p-8">
                  <div className="w-16 h-16 rounded-2xl flex items-center justify-center mb-6" style={{ backgroundColor: pathway.iconBg }}>
                    <Icon className="w-8 h-8" style={{ color: pathway.iconColor }} />
                  </div>
                  
                  <h3 className="text-2xl font-bold text-gray-900 mb-2">{pathway.title}</h3>
                  <p className="text-sm font-medium text-gray-500 mb-4">{pathway.subtitle}</p>
                  <p className="text-gray-600 mb-6">{pathway.description}</p>
                  
                  <ul className="space-y-3 mb-8">
                    {pathway.features.map((feature, index) => (
                      <li key={index} className="flex items-center gap-3">
                        <div className="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0" style={{ backgroundColor: pathway.iconBg }}>
                          <Check className="w-3 h-3" style={{ color: pathway.iconColor }} />
                        </div>
                        <span className="text-gray-700 text-sm">{feature}</span>
                      </li>
                    ))}
                  </ul>
                  
                  <Button
                    variant="outline"
                    className="w-full group border-gray-300 hover:border-gray-400"
                    onClick={() => document.getElementById(pathway.id)?.scrollIntoView({ behavior: "smooth" })}
                    data-testid={`button-pathway-${pathway.id}`}
                  >
                    Learn More
                    <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
                  </Button>
                </div>
              </Card>
            );
          })}
        </div>
      </div>
    </section>
  );
}
