"use client";

import { useState } from "react";
import { ChevronDown } from "lucide-react";

const faqs = [
  {
    q: "Что включает бесплатный пробный период?",
    a: "14 дней полного доступа ко всем функциям выбранного тарифа. Без привязки карты, без ограничений. После окончания пробного периода вы выбираете тариф или продолжаете на бесплатном плане с базовым функционалом.",
  },
  {
    q: "Как происходит миграция данных из другой CRM?",
    a: "Мы поддерживаем импорт из 1С:Фитнес клуб, Mobifitness, YCLIENTS и Excel. Наша команда поможет с миграцией: загрузим клиентскую базу, историю тренировок, абонементы и продажи. Обычно миграция занимает 1-2 дня.",
  },
  {
    q: "Работает ли MyFitCRM с 1С:Фитнес клуб?",
    a: "Да, мы поддерживаем двустороннюю синхронизацию с 1С:Фитнес клуб через REST/SOAP API. Клиентская база, членства, пакеты услуг, продажи, реализация и график работы тренера синхронизируются мгновенно.",
  },
  {
    q: "Нужен ли отдельный SIP-сервер для телефонии?",
    a: "Нет. SIP-телефония полностью встроена в MyFitCRM. Мы предоставляем инфраструктуру (STUN/TURN/ICE серверы). Вам нужен только SIP-аккаунт от вашего провайдера IP-телефонии.",
  },
  {
    q: "Можно ли управлять несколькими клубами?",
    a: "Да. MyFitCRM поддерживает multi-tenancy: каждый клуб полностью изолирован. На тарифе «Премиум» доступна панель суперадминистратора для управления всей сетью из одного интерфейса.",
  },
  {
    q: "Какие мобильные платформы поддерживаются?",
    a: "Мобильное приложение доступно на iOS (14+) и Android (8+). Приложение нативное, работает быстро и стабильно. Веб-панели адаптированы для любых браузеров и устройств.",
  },
  {
    q: "Есть ли API для кастомных интеграций?",
    a: "Да. REST API с полной OpenAPI 3.1 документацией, API-ключи с scoped доступом, 12 типов webhook-событий с HMAC-SHA256 подписью. Всё для интеграции с любыми внешними системами.",
  },
  {
    q: "Как обеспечивается безопасность данных?",
    a: "Данные каждого клуба изолированы через Row-Level Security в PostgreSQL. Все соединения зашифрованы (TLS/SRTP). 2FA обязательна для администраторов. Регулярные бэкапы и аудит-лог всех действий.",
  },
];

export default function FAQ() {
  const [openIdx, setOpenIdx] = useState<number | null>(0);

  return (
    <section id="faq" className="py-20 bg-surface">
      <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        <div className="text-center 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="space-y-3">
          {faqs.map((faq, idx) => (
            <div
              key={idx}
              className="rounded-xl bg-white border border-gray-100 overflow-hidden"
            >
              <button
                onClick={() => setOpenIdx(openIdx === idx ? null : idx)}
                className="w-full flex items-center justify-between px-6 py-4 text-left"
              >
                <span className="text-sm font-semibold text-gray-900 pr-4">
                  {faq.q}
                </span>
                <ChevronDown
                  size={18}
                  className={`text-gray-400 shrink-0 transition-transform ${
                    openIdx === idx ? "rotate-180" : ""
                  }`}
                />
              </button>
              {openIdx === idx && (
                <div className="px-6 pb-4">
                  <p className="text-sm text-gray-500 leading-relaxed">
                    {faq.a}
                  </p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
