import {
  GitBranch,
  CalendarDays,
  Phone,
  Users,
  BarChart3,
  Bell,
  ShoppingCart,
  Moon,
  Shield,
  Smartphone,
  Globe,
  Webhook,
} from "lucide-react";

const features = [
  {
    icon: GitBranch,
    title: "Воронка продаж",
    description:
      "Отслеживайте путь клиента от первого контакта до постоянного абонемента. Автоматическое распределение, этапы, конверсия.",
    color: "text-primary",
    bg: "bg-primary/10",
  },
  {
    icon: CalendarDays,
    title: "Умное расписание",
    description:
      "Создание, отмена, перенос и повтор тренировок. Синхронизация графика работы тренера с 1С.",
    color: "text-blue-600",
    bg: "bg-blue-50",
  },
  {
    icon: Phone,
    title: "SIP-телефония",
    description:
      "Встроенный SIP-клиент с CallerID клуба. Тренер звонит из приложения — клиент видит номер клуба.",
    color: "text-success",
    bg: "bg-success/10",
  },
  {
    icon: Users,
    title: "База клиентов",
    description:
      "Карточка клиента с целями, травмами, историей тренировок, абонементами и балансом.",
    color: "text-purple-600",
    bg: "bg-purple-50",
  },
  {
    icon: BarChart3,
    title: "Аналитика и отчёты",
    description:
      "Конверсия воронки, рейтинг тренеров, финансовые отчёты. Данные в реальном времени.",
    color: "text-warning",
    bg: "bg-warning/10",
  },
  {
    icon: Bell,
    title: "Push-уведомления",
    description:
      "9 типов автоматических уведомлений: новый клиент, оплата, отмена, день рождения и другие.",
    color: "text-error",
    bg: "bg-error/10",
  },
  {
    icon: ShoppingCart,
    title: "Продажи и долги",
    description:
      "Выставление продаж, отслеживание реализации, контроль дебиторской задолженности клиентов.",
    color: "text-teal-600",
    bg: "bg-teal-50",
  },
  {
    icon: Moon,
    title: "Спящие клиенты",
    description:
      "Автоматическое выявление клиентов без активности более 30 дней. Возвращайте их в зал.",
    color: "text-indigo-600",
    bg: "bg-indigo-50",
  },
  {
    icon: Shield,
    title: "Роли и доступ",
    description:
      "6 ролей: тренер, координатор, фитнес-менеджер, рецепция, админ клуба, суперадмин платформы.",
    color: "text-gray-700",
    bg: "bg-gray-100",
  },
  {
    icon: Smartphone,
    title: "Мобильное приложение",
    description:
      "iOS и Android: дашборд, расписание, клиенты, воронка, звонки — всё в кармане тренера.",
    color: "text-pink-600",
    bg: "bg-pink-50",
  },
  {
    icon: Globe,
    title: "Веб-панели",
    description:
      "Рецепция, панель администратора клуба, панель суперадмина — три отдельных интерфейса.",
    color: "text-cyan-600",
    bg: "bg-cyan-50",
  },
  {
    icon: Webhook,
    title: "Webhooks и API",
    description:
      "12 типов webhook-событий, REST API с API-ключами. Интегрируйте с любыми внешними системами.",
    color: "text-amber-600",
    bg: "bg-amber-50",
  },
];

export default function Features() {
  return (
    <section id="features" className="py-20 bg-white">
      <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">
            12 модулей, которые закрывают все потребности — от первого звонка
            клиенту до ежемесячного отчёта.
          </p>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {features.map((f) => (
            <div
              key={f.title}
              className="group rounded-2xl border border-gray-100 p-6 hover:border-primary/20 hover:shadow-lg hover:shadow-primary/5 transition-all"
            >
              <div
                className={`w-11 h-11 rounded-xl ${f.bg} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}
              >
                <f.icon size={20} className={f.color} />
              </div>
              <h3 className="text-base font-semibold text-gray-900">
                {f.title}
              </h3>
              <p className="mt-2 text-sm text-gray-500 leading-relaxed">
                {f.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
