import { Settings2, Check, Info } from 'lucide-react';

const steps = [
  { number: 1, title: 'Your Prompt', subtitle: '"a cat on windowsill"' },
  { number: 2, title: 'Smart Enhancement', subtitle: 'Style + details added' },
  { number: 3, title: 'AI Generation', subtitle: 'Gemini creates image' },
  { number: 4, title: 'CDN Delivery', subtitle: 'Instant global URL' },
];

const controls = [
  { text: 'Style templates', detail: '— photorealistic, illustration, minimalist, and more' },
  { text: 'Reference images', detail: '— @aliases maintain visual consistency' },
  { text: 'Output specs', detail: '— aspect ratio, dimensions, format' },
];

export function HowItWorksSection() {
  return (
    <section className="py-20 px-6">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
          Your prompt. Your control. Production-ready.
        </h2>
        <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
          We handle the complexity so you can focus on building.
        </p>

        <div className="max-w-4xl mx-auto">
          <div className="grid md:grid-cols-4 gap-4 mb-8">
            {steps.map((step) => (
              <div key={step.number} className="text-center p-4">
                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 shadow-[0_2px_10px_rgba(99,102,241,0.4)] flex items-center justify-center mx-auto mb-3 text-sm font-bold">
                  {step.number}
                </div>
                <p className="text-sm font-medium mb-1">{step.title}</p>
                <p className="text-xs text-gray-500">{step.subtitle}</p>
              </div>
            ))}
          </div>

          <div className="bg-gradient-to-b from-indigo-500/10 to-[rgba(30,27,75,0.4)] border border-indigo-500/20 backdrop-blur-[10px] rounded-xl p-6 mt-8">
            <h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
              <Settings2 className="w-5 h-5 text-indigo-400" />
              What you control
            </h3>
            <div className="grid md:grid-cols-3 gap-4 text-sm">
              {controls.map((control, i) => (
                <div key={i} className="flex items-start gap-2">
                  <Check className="w-4 h-4 text-green-400 mt-0.5 flex-shrink-0" />
                  <span className="text-gray-300">
                    <strong className="text-white">{control.text}</strong> {control.detail}
                  </span>
                </div>
              ))}
            </div>
          </div>

          <p className="text-center text-gray-500 text-sm mt-6">
            <Info className="w-4 h-4 inline mr-1" />
            Enhanced prompts are visible in API response. You always see what was generated.
          </p>
        </div>
      </div>
    </section>
  );
}