import React from 'react';
import { useTranslation } from 'react-i18next';
import { UserPlus, Settings, Rocket } from 'lucide-react';

const HowItWorks: React.FC = () => {
  const { t } = useTranslation();

  const steps = [
    {
      number: '01',
      icon: UserPlus,
      title: t('marketing.howItWorks.step1.title'),
      description: t('marketing.howItWorks.step1.description'),
      color: 'brand',
    },
    {
      number: '02',
      icon: Settings,
      title: t('marketing.howItWorks.step2.title'),
      description: t('marketing.howItWorks.step2.description'),
      color: 'purple',
    },
    {
      number: '03',
      icon: Rocket,
      title: t('marketing.howItWorks.step3.title'),
      description: t('marketing.howItWorks.step3.description'),
      color: 'green',
    },
  ];

  const colorClasses: Record<string, { bg: string; text: string; border: string }> = {
    brand: {
      bg: 'bg-brand-100 dark:bg-brand-900/30',
      text: 'text-brand-600 dark:text-brand-400',
      border: 'border-brand-200 dark:border-brand-800',
    },
    purple: {
      bg: 'bg-purple-100 dark:bg-purple-900/30',
      text: 'text-purple-600 dark:text-purple-400',
      border: 'border-purple-200 dark:border-purple-800',
    },
    green: {
      bg: 'bg-green-100 dark:bg-green-900/30',
      text: 'text-green-600 dark:text-green-400',
      border: 'border-green-200 dark:border-green-800',
    },
  };

  return (
    <section className="py-20 lg:py-28 bg-gray-50 dark:bg-gray-800/50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-16">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
            {t('marketing.howItWorks.title')}
          </h2>
          <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
            {t('marketing.howItWorks.subtitle')}
          </p>
        </div>

        {/* Steps */}
        <div className="grid md:grid-cols-3 gap-8 lg:gap-12">
          {steps.map((step, index) => {
            const colors = colorClasses[step.color];
            return (
              <div key={step.number} className="relative">
                {/* Connector Line (hidden on mobile) */}
                {index < steps.length - 1 && (
                  <div className="hidden md:block absolute top-16 left-1/2 w-full h-0.5 bg-gradient-to-r from-gray-200 dark:from-gray-700 to-transparent" />
                )}

                <div className="relative bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 text-center">
                  {/* Step Number */}
                  <div className={`absolute -top-4 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full ${colors.bg} ${colors.text} border ${colors.border} text-sm font-bold`}>
                    {step.number}
                  </div>

                  {/* Icon */}
                  <div className={`inline-flex p-4 rounded-2xl ${colors.bg} mb-6`}>
                    <step.icon className={`h-8 w-8 ${colors.text}`} />
                  </div>

                  {/* Content */}
                  <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
                    {step.title}
                  </h3>
                  <p className="text-gray-600 dark:text-gray-400">
                    {step.description}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export default HowItWorks;
