import { 
  UserPlus, 
  Link2, 
  Sparkles, 
  PartyPopper,
  ArrowDown 
} from 'lucide-react'

const steps = [
  {
    icon: UserPlus,
    step: "01",
    title: "Create account",
    description: "Sign up for free in less than 60 seconds. No credit card required.",
  },
  {
    icon: Link2,
    step: "02",
    title: "Connect email",
    description: "Connect Gmail or Outlook with one click. Secure OAuth authentication.",
  },
  {
    icon: Sparkles,
    step: "03",
    title: "AI analyzes",
    description: "Our AI learns your email patterns and creates personalized sorting rules.",
  },
  {
    icon: PartyPopper,
    step: "04",
    title: "Enjoy Inbox Zero",
    description: "Sit back and enjoy a clean inbox – automatically.",
  },
]

export function HowItWorks() {
  return (
    <section id="how-it-works" className="py-24 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section header */}
        <div className="text-center mb-16">
          <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
            4 steps to a{' '}
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-accent-500">
              clean inbox
            </span>
          </h2>
          <p className="text-lg text-slate-600 max-w-2xl mx-auto">
            Get started in minutes – no technical knowledge required.
          </p>
        </div>

        {/* Steps */}
        <div className="relative">
          {/* Connection line */}
          <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-primary-200 via-primary-400 to-primary-200 -translate-y-1/2" />
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {steps.map((item, index) => (
              <StepCard key={index} {...item} />
            ))}
          </div>
        </div>

        {/* CTA */}
        <div className="mt-16 text-center">
          <div className="inline-flex flex-col items-center">
            <ArrowDown className="w-8 h-8 text-primary-400 animate-bounce mb-4" />
            <p className="text-slate-600 mb-2">Ready to get started?</p>
            <a 
              href="/register"
              className="text-primary-600 font-semibold hover:text-primary-700 transition-colors"
            >
              Try it free now →
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}

interface StepCardProps {
  icon: React.ElementType
  step: string
  title: string
  description: string
}

function StepCard({ icon: Icon, step, title, description }: StepCardProps) {
  return (
    <div className="relative">
      {/* Card */}
      <div className="bg-slate-50 rounded-2xl p-6 text-center hover:bg-white hover:shadow-xl transition-all duration-300 border border-transparent hover:border-slate-200">
        {/* Step number */}
        <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-gradient-to-r from-primary-500 to-primary-600 text-white text-sm font-bold px-4 py-1 rounded-full shadow-md">
          {step}
        </div>
        
        {/* Icon */}
        <div className="w-16 h-16 mx-auto mt-4 mb-4 rounded-2xl bg-white shadow-md flex items-center justify-center">
          <Icon className="w-8 h-8 text-primary-600" />
        </div>
        
        {/* Content */}
        <h3 className="text-lg font-semibold text-slate-900 mb-2">{title}</h3>
        <p className="text-slate-600 text-sm">{description}</p>
      </div>
    </div>
  )
}