import { RefreshCw, ArrowLeftRight, Package, Layers, Check } from 'lucide-react';

const problems = [
  {
    icon: RefreshCw,
    title: 'Placeholder hell',
    problem: '"I\'ll add images later" never happens',
    solution: 'Generate real images as you build',
  },
  {
    icon: ArrowLeftRight,
    title: 'Context switching',
    problem: 'Leave IDE, generate elsewhere, come back',
    solution: 'Stay in your workflow. API, SDK, MCP',
  },
  {
    icon: Package,
    title: 'Asset management',
    problem: 'Download, optimize, upload, get URL',
    solution: 'Production CDN URLs instantly',
  },
  {
    icon: Layers,
    title: 'Style drift',
    problem: 'Every image looks different',
    solution: 'Reference images keep style consistent',
  },
];

export function ProblemSolutionSection() {
  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">
          Why developers choose Banatie
        </h2>
        <p className="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
          Stop fighting your image workflow. Start building.
        </p>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {problems.map((item, i) => (
            <div
              key={i}
              className="bg-gradient-to-b from-[rgba(127,29,29,0.25)] to-[rgba(30,10,20,0.7)] border border-red-400/20 backdrop-blur-[10px] rounded-xl p-6 flex flex-col min-h-[240px]"
            >
              <div className="flex-1 flex flex-col">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500/20 to-purple-500/20 flex items-center justify-center mb-4">
                  <item.icon className="w-6 h-6 text-red-400" />
                </div>
                <h3 className="font-semibold text-lg mb-2 text-red-400">{item.title}</h3>
                <p className="text-gray-500 text-sm mb-4">{item.problem}</p>
                <div className="mt-auto flex items-start gap-1 text-sm">
                  <Check className="w-4 h-4 text-green-400 flex-shrink-0 mt-0.5" />
                  <span className="text-white">{item.solution}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
