src/components/sections/Problem.tsx

import { motion } from 'motion/react';
import { SectionTitle } from '../ui/SectionTitle';

export default function Problem() {
  return (
    <section className="py-24 bg-slate-50 border-b border-slate-100">
      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionTitle 
          badge="Проблема"
          title="Теряете клиентов из-за инфраструктуры, которая не масштабируется?"
          subtitle="Сообщества ВКонтакте могут генерировать огромный трафик, но ручная обработка делает этот процесс неэффективным и ресурсоемким."
        />
        
        <div className="grid md:grid-cols-3 gap-8">
          {[
            {
              title: "Слишком медленные ответы",
              desc: "Лиды остывают за часы и уходят к конкурентам, пока менеджеры пытаются разобрать завалы сообщений в личке группы."
            },
            {
              title: "Выгорание от рутины",
              desc: "Сотрудники тратят 80% времени на копипаст ответов про цены, сроки доставки, адреса и условия возврата."
            },
            {
              title: "Дешевые чат-боты бесят",
              desc: "Обычные боты по кнопкам обрезают воронку: клиент пишет сложный вопрос, бот тупит, цикл сделки прерывается навсегда."
            }
          ].map((item, i) => (
            <motion.div 
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.15 }}
              className="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-sm relative overflow-hidden"
            >
              <div className="absolute top-0 left-0 w-2 h-full bg-red-400/20"></div>
              <h4 className="text-xl font-bold text-slate-900 mb-3">{item.title}</h4>
              <p className="text-slate-600 font-medium leading-relaxed">{item.desc}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}