import { Send, Settings, Rocket, HeadphonesIcon } from "lucide-react";

const steps = [
  {
    icon: Send,
    step: "01",
    title: "Оставьте заявку",
    description:
      "Заполните форму — мы свяжемся в течение 30 минут и подберём оптимальный тариф для вашего клуба.",
  },
  {
    icon: Settings,
    step: "02",
    title: "Настроим систему",
    description:
      "Подключим ваш клуб, загрузим базу клиентов, настроим роли сотрудников и интеграцию с 1С.",
  },
  {
    icon: Rocket,
    step: "03",
    title: "Запуск за 1 день",
    description:
      "Установите мобильное приложение тренерам, откройте веб-панель рецепции — и начинайте работать.",
  },
  {
    icon: HeadphonesIcon,
    step: "04",
    title: "Поддержка 24/7",
    description:
      "Персональный менеджер, обучение команды, помощь с миграцией данных. Мы всегда на связи.",
  },
];

export default function HowItWorks() {
  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">
            Начните за 4 простых шага
          </h2>
          <p className="mt-4 text-lg text-gray-500">
            От заявки до полностью работающей системы — за один день.
          </p>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {steps.map((s, idx) => (
            <div key={s.step} className="relative">
              {idx < steps.length - 1 && (
                <div className="hidden lg:block absolute top-10 left-[calc(50%+40px)] w-[calc(100%-80px)] h-[2px] bg-gradient-to-r from-primary/30 to-primary/10" />
              )}
              <div className="text-center">
                <div className="relative mx-auto w-20 h-20 rounded-2xl bg-white border-2 border-primary/20 flex items-center justify-center shadow-sm mb-5">
                  <s.icon size={28} className="text-primary" />
                  <div className="absolute -top-2 -right-2 w-7 h-7 rounded-full bg-primary text-white text-xs font-bold flex items-center justify-center">
                    {s.step}
                  </div>
                </div>
                <h3 className="text-base font-semibold text-gray-900">
                  {s.title}
                </h3>
                <p className="mt-2 text-sm text-gray-500 leading-relaxed">
                  {s.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
