import { Check, Download, Store, CreditCard, Wallet } from "lucide-react";

const steps = [
  {
    number: "01",
    icon: Download,
    title: "Sign Up",
    description: "Download T-kash Soko from Google Play Store and create your account with your phone number.",
    color: "bg-primary"
  },
  {
    number: "02",
    icon: Store,
    title: "Automatic Shop Setup",
    description: "Your shop is set up automatically in under 1 minute. No paperwork or branch visits required.",
    color: "bg-primary"
  },
  {
    number: "03",
    icon: CreditCard,
    title: "Start Accepting Payments",
    description: "Accept T-kash, M-PESA, bank apps, or cash. Use Catalogue, Express, or Voice checkout.",
    color: "bg-primary"
  },
  {
    number: "04",
    icon: Wallet,
    title: "Complete KYC & Access Money",
    description: "Complete your KYC to activate your T-kash wallet and access your sales balance anytime.",
    color: "bg-primary"
  }
];

const checkoutModes = [
  {
    title: "Catalogue Checkout",
    description: "Select items from your inventory list. Stock updates automatically with every sale."
  },
  {
    title: "Express Checkout",
    description: "Add amount, tag categories, and get paid fast. Perfect for quick transactions."
  },
  {
    title: "Voice Checkout",
    description: "Select items by speaking. Hands-free selling with automatic inventory updates."
  }
];

export default function HowItWorks() {
  return (
    <section id="how-to-start" className="py-20 bg-white">
      <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">
            How to Start Selling
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Get your business online in just 4 simple steps. No technical knowledge required.
          </p>
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-20">
          {steps.map((step, index) => {
            const Icon = step.icon;
            return (
              <div key={index} className="relative" data-testid={`step-${index + 1}`}>
                {index < steps.length - 1 && (
                  <div className="hidden lg:block absolute top-8 left-1/2 w-full h-0.5 bg-gray-200" style={{ transform: 'translateX(50%)' }} />
                )}
                <div className="relative bg-white rounded-2xl p-6 text-center">
                  <div className="inline-flex items-center justify-center mb-4">
                    <div className={`w-16 h-16 rounded-2xl ${step.color} flex items-center justify-center shadow-lg`}>
                      <Icon className="w-8 h-8 text-white" />
                    </div>
                  </div>
                  <div className="text-xs font-bold text-gray-400 mb-2">STEP {step.number}</div>
                  <h3 className="text-xl font-bold text-gray-900 mb-3">{step.title}</h3>
                  <p className="text-gray-600 text-sm">{step.description}</p>
                </div>
              </div>
            );
          })}
        </div>
        
        <div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl p-8 lg:p-12">
          <div className="text-center mb-10">
            <h3 className="text-2xl md:text-3xl font-bold text-white mb-3">
              Three Ways to Checkout
            </h3>
            <p className="text-gray-400">Choose the checkout method that fits your selling style</p>
          </div>
          
          <div className="grid md:grid-cols-3 gap-6">
            {checkoutModes.map((mode, index) => (
              <div 
                key={index} 
                className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors"
                data-testid={`checkout-mode-${index}`}
              >
                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mb-4">
                  <Check className="w-5 h-5 text-primary" />
                </div>
                <h4 className="text-lg font-bold text-white mb-2">{mode.title}</h4>
                <p className="text-gray-400 text-sm">{mode.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
