const testimonials = [
  {
    quote:
      "MyFitCRM полностью изменил наш подход к работе с клиентами. Конверсия из новых в постоянных выросла на 34% за первые три месяца.",
    author: "Алексей Петров",
    role: "Владелец, Фитнес-клуб «Олимп»",
    initials: "АП",
  },
  {
    quote:
      "SIP-телефония — это находка. Тренеры больше не звонят с личных номеров, а клиенты видят номер клуба и берут трубку.",
    author: "Мария Иванова",
    role: "Фитнес-менеджер, «Энергия»",
    initials: "МИ",
  },
  {
    quote:
      "Наконец-то мы видим реальную воронку продаж. Раньше координатор вёл всё в Excel — сейчас всё в одном приложении.",
    author: "Дмитрий Козлов",
    role: "Координатор, «GymPro»",
    initials: "ДК",
  },
  {
    quote:
      "Интеграция с 1С работает как часы. Изменения в расписании синхронизируются моментально, никаких расхождений.",
    author: "Елена Смирнова",
    role: "Администратор, «FitLife»",
    initials: "ЕС",
  },
  {
    quote:
      "Мы управляем сетью из 5 клубов через одну панель суперадмина. Мониторинг, лицензии, аудит — всё централизовано.",
    author: "Сергей Волков",
    role: "CEO, сеть «Атлант»",
    initials: "СВ",
  },
  {
    quote:
      "Push-уведомления возвращают спящих клиентов. За месяц мы реактивировали 23% клиентов, которые не приходили больше месяца.",
    author: "Ольга Новикова",
    role: "Менеджер, студия «Баланс»",
    initials: "ОН",
  },
];

export default function Testimonials() {
  return (
    <section 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">
            Отзывы руководителей и сотрудников фитнес-клубов, которые уже
            работают с MyFitCRM.
          </p>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {testimonials.map((t) => (
            <div
              key={t.author}
              className="rounded-2xl border border-gray-100 p-6 hover:shadow-md transition-shadow"
            >
              <div className="flex gap-1 mb-4">
                {[...Array(5)].map((_, i) => (
                  <svg
                    key={i}
                    className="w-4 h-4 text-warning"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                  </svg>
                ))}
              </div>
              <p className="text-sm text-gray-600 leading-relaxed mb-6">
                &laquo;{t.quote}&raquo;
              </p>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-semibold text-sm">
                  {t.initials}
                </div>
                <div>
                  <div className="text-sm font-semibold text-gray-900">
                    {t.author}
                  </div>
                  <div className="text-xs text-gray-400">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
