import {
  PhoneOff,
  UserX,
  FileWarning,
  Timer,
} from "lucide-react";

const problems = [
  {
    icon: PhoneOff,
    title: "Тренеры звонят с личного номера",
    description:
      "Клиенты не берут трубку, а при увольнении тренера — база контактов уходит вместе с ним.",
    color: "text-error",
    bg: "bg-error/10",
  },
  {
    icon: UserX,
    title: "Клиенты теряются в воронке",
    description:
      "Нет прозрачности: кто звонил, кому назначена тренировка, кто «заснул» и перестал ходить.",
    color: "text-warning",
    bg: "bg-warning/10",
  },
  {
    icon: FileWarning,
    title: "Отчёты собираются вручную",
    description:
      "Менеджер тратит часы на Excel вместо того, чтобы принимать решения на основе данных.",
    color: "text-blue-600",
    bg: "bg-blue-50",
  },
  {
    icon: Timer,
    title: "Рутина съедает время",
    description:
      "Запись, подтверждение, напоминания, расписание — всё вручную. Ошибки и пропуски неизбежны.",
    color: "text-purple-600",
    bg: "bg-purple-50",
  },
];

export default function Problems() {
  return (
    <section className="py-20 bg-surface">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-2xl mx-auto mb-14">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900">
            Знакомые проблемы?
          </h2>
          <p className="mt-4 text-lg text-gray-500">
            Большинство фитнес-клубов сталкиваются с одними и теми же
            сложностями. MyFitCRM решает каждую из них.
          </p>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {problems.map((p) => (
            <div
              key={p.title}
              className="rounded-2xl bg-white p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow"
            >
              <div
                className={`w-12 h-12 rounded-xl ${p.bg} flex items-center justify-center mb-4`}
              >
                <p.icon size={22} className={p.color} />
              </div>
              <h3 className="text-base font-semibold text-gray-900">
                {p.title}
              </h3>
              <p className="mt-2 text-sm text-gray-500 leading-relaxed">
                {p.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
