import { ArrowRightLeft, Phone, MessageCircle, Send, Webhook, Key } from "lucide-react";

const integrations = [
  {
    icon: ArrowRightLeft,
    name: "1С:Фитнес клуб",
    description:
      "Двусторонняя синхронизация: клиенты, членства, продажи, график работы — всё обновляется мгновенно.",
    tag: "Синхронизация",
  },
  {
    icon: Phone,
    name: "SIP-телефония",
    description:
      "Встроенный SIP-клиент (RFC 3261), G.711 + Opus, SRTP шифрование. CallerID клуба на каждом звонке.",
    tag: "Звонки",
  },
  {
    icon: MessageCircle,
    name: "WhatsApp Business",
    description:
      "Отправка сообщений клиентам через WhatsApp Business API прямо из карточки клиента.",
    tag: "Мессенджеры",
  },
  {
    icon: Send,
    name: "Telegram Bot",
    description:
      "Уведомления и коммуникации через Telegram Bot API. Автоматические напоминания о тренировках.",
    tag: "Мессенджеры",
  },
  {
    icon: Webhook,
    name: "Webhooks",
    description:
      "12 типов исходящих событий с HMAC-SHA256 подписью. Retry: 3 попытки с экспоненциальной задержкой.",
    tag: "Автоматизация",
  },
  {
    icon: Key,
    name: "REST API",
    description:
      "Полноценный API с API-ключами и scoped доступом. OpenAPI 3.1 спецификация. Cursor-based пагинация.",
    tag: "Разработчикам",
  },
];

export default function Integrations() {
  return (
    <section id="integrations" className="py-20 bg-navy text-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">
            Интеграции и API
          </h2>
          <p className="mt-4 text-lg text-gray-300">
            Подключите MyFitCRM к существующей инфраструктуре клуба. Готовые
            интеграции и открытый API для любых задач.
          </p>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {integrations.map((i) => (
            <div
              key={i.name}
              className="rounded-2xl bg-navy-light/50 border border-white/10 p-6 hover:border-primary/40 transition-colors"
            >
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 rounded-xl bg-primary/20 flex items-center justify-center">
                  <i.icon size={20} className="text-primary" />
                </div>
                <div>
                  <div className="font-semibold">{i.name}</div>
                  <div className="text-xs text-primary">{i.tag}</div>
                </div>
              </div>
              <p className="text-sm text-gray-300 leading-relaxed">
                {i.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
