import { MessageSquare, Cpu, Rocket } from 'lucide-react';

const steps = [
  {
    icon: MessageSquare,
    step: '01',
    title: 'Describe Your Idea',
    description: 'Tell Lovable what you want to build in plain English. Be as detailed or brief as you like — our AI understands context and intent.',
    color: 'from-brand-400 to-brand-600',
  },
  {
    icon: Cpu,
    step: '02',
    title: 'AI Generates & Iterates',
    description: 'Watch as Lovable generates a full-stack application in real-time. Edit with natural language, refine with clicks, iterate instantly.',
    color: 'from-pink-400 to-rose-600',
  },
  {
    icon: Rocket,
    step: '03',
    title: 'Ship to Production',
    description: 'One click deploys your app to the cloud. Custom domains, SSL, and CDN included. Your app is live in seconds.',
    color: 'from-orange-400 to-red-500',
  },
];

export default function HowItWorks() {
  return (
    <section id="how-it-works" className="py-24 px-4 sm:px-6 lg:px-8 relative">
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/5 to-transparent" />
      </div>

      <div className="max-w-5xl mx-auto">
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-500/10 border border-brand-500/20 mb-4">
            <span className="text-xs font-medium text-brand-300 uppercase tracking-wider">How it works</span>
          </div>
          <h2 className="text-4xl sm:text-5xl font-bold tracking-tight mb-4">
            Three steps to <span className="gradient-text">your dream app</span>
          </h2>
          <p className="text-lg text-surface-300 max-w-2xl mx-auto">
            No setup, no configuration, no boilerplate. Just describe and deploy.
          </p>
        </div>

        <div className="relative">
          {/* Connecting line */}
          <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-px bg-gradient-to-r from-brand-500/30 via-pink-500/30 to-orange-500/30 -translate-y-1/2" />

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
            {steps.map((step, index) => (
              <div key={step.step} className="relative group">
                <div className="glass-card p-8 text-center hover:bg-white/[0.08] transition-all duration-300">
                  <div className="inline-flex items-center justify-center mb-6">
                    <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${step.color} flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300`}>
                      <step.icon className="w-7 h-7 text-white" />
                    </div>
                  </div>
                  <div className="text-sm font-bold text-brand-400 mb-2">{step.step}</div>
                  <h3 className="text-xl font-bold mb-3">{step.title}</h3>
                  <p className="text-surface-300 leading-relaxed">{step.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}