import {
  Dumbbell,
  UsersRound,
  TrendingUp,
  MonitorSmartphone,
  Building2,
  ShieldCheck,
} from "lucide-react";

const roles = [
  {
    icon: Dumbbell,
    role: "Тренер",
    platform: "Мобильное приложение",
    capabilities: [
      "Дашборд со статистикой и ближайшими занятиями",
      "Расписание: создание, отмена, перенос тренировок",
      "Карточки клиентов с целями и травмами",
      "Воронка продаж: новые → назначенные → проведённые",
      "SIP-звонки с CallerID клуба",
      "Выставление продаж и контроль долгов",
    ],
    color: "from-primary to-primary-dark",
  },
  {
    icon: UsersRound,
    role: "Координатор",
    platform: "Мобильное приложение",
    capabilities: [
      "Распределение клиентов по тренерам",
      "Передача между департаментами",
      "Статистика департамента",
      "Расписание всех тренеров",
      "SIP-звонки и журнал",
    ],
    color: "from-blue-500 to-blue-700",
  },
  {
    icon: TrendingUp,
    role: "Фитнес-менеджер",
    platform: "Мобильное + Веб",
    capabilities: [
      "Полная аналитика и отчёты",
      "Движение клиентов по воронке",
      "Расписание всех тренеров",
      "Конверсия и рейтинг",
      "SIP-звонки",
    ],
    color: "from-purple-500 to-purple-700",
  },
  {
    icon: MonitorSmartphone,
    role: "Администратор рецепции",
    platform: "Веб-панель",
    capabilities: [
      "Запись на вводные тренировки",
      "Поиск и карточки клиентов",
      "Распределение новых клиентов",
      "Текущее состояние клуба",
      "Статистика по тренерам",
    ],
    color: "from-teal-500 to-teal-700",
  },
  {
    icon: Building2,
    role: "Администратор клуба",
    platform: "Веб-панель",
    capabilities: [
      "Управление сотрудниками и департаментами",
      "Залы и локации",
      "Каталог услуг и пакетов",
      "Настройки интеграций и уведомлений",
      "API-ключи и webhooks",
    ],
    color: "from-amber-500 to-amber-700",
  },
  {
    icon: ShieldCheck,
    role: "Суперадминистратор",
    platform: "Веб-панель платформы",
    capabilities: [
      "Управление всеми клубами",
      "Лицензии и модули",
      "Мониторинг платформы",
      "Audit log",
      "2FA обязательна",
    ],
    color: "from-gray-700 to-gray-900",
  },
];

export default function Roles() {
  return (
    <section id="roles" 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">
            6 ролей пользователей — от тренера до суперадминистратора. Каждый
            видит только то, что нужно именно ему.
          </p>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {roles.map((r) => (
            <div
              key={r.role}
              className="rounded-2xl bg-white border border-gray-100 overflow-hidden hover:shadow-lg transition-shadow"
            >
              <div
                className={`bg-gradient-to-r ${r.color} px-6 py-4 flex items-center gap-3`}
              >
                <r.icon size={22} className="text-white" />
                <div>
                  <div className="text-white font-semibold">{r.role}</div>
                  <div className="text-white/70 text-xs">{r.platform}</div>
                </div>
              </div>
              <div className="p-6">
                <ul className="space-y-2.5">
                  {r.capabilities.map((c) => (
                    <li key={c} className="flex items-start gap-2 text-sm text-gray-600">
                      <svg
                        className="h-4 w-4 mt-0.5 text-success shrink-0"
                        fill="currentColor"
                        viewBox="0 0 20 20"
                      >
                        <path
                          fillRule="evenodd"
                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                          clipRule="evenodd"
                        />
                      </svg>
                      {c}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
