import {
  Smartphone,
  Monitor,
  BarChart3,
  Phone,
} from "lucide-react";

export default function Hero() {
  return (
    <section className="relative overflow-hidden pt-28 pb-20 sm:pt-36 sm:pb-28 bg-gradient-to-b from-white to-surface">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div className="animate-fade-in-up">
            <div className="inline-flex items-center gap-2 rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary mb-6">
              <span className="relative flex h-2 w-2">
                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" />
                <span className="relative inline-flex h-2 w-2 rounded-full bg-primary" />
              </span>
              Новое поколение CRM для фитнеса
            </div>

            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900 leading-[1.1]">
              Управляйте клубом{" "}
              <span className="text-primary">эффективно</span>
            </h1>

            <p className="mt-6 text-lg sm:text-xl text-gray-600 leading-relaxed max-w-xl">
              CRM-система для фитнес-клубов: воронка продаж, расписание,
              SIP-телефония, мобильное приложение тренера и веб-панели —
              всё в одном решении.
            </p>

            <div className="mt-8 flex flex-col sm:flex-row gap-4">
              <a
                href="#demo"
                className="inline-flex items-center justify-center rounded-xl bg-primary px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-primary/25 hover:bg-primary-dark transition-all hover:shadow-xl hover:shadow-primary/30"
              >
                Попробовать бесплатно
              </a>
              <a
                href="#features"
                className="inline-flex items-center justify-center rounded-xl border-2 border-gray-200 px-8 py-3.5 text-base font-semibold text-gray-700 hover:border-primary hover:text-primary transition-colors"
              >
                Узнать больше
              </a>
            </div>

            <div className="mt-10 flex items-center gap-6 text-sm text-gray-500">
              <span className="flex items-center gap-1.5">
                <svg
                  className="h-4 w-4 text-success"
                  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>
                14 дней бесплатно
              </span>
              <span className="flex items-center gap-1.5">
                <svg
                  className="h-4 w-4 text-success"
                  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>
                Без привязки карты
              </span>
              <span className="flex items-center gap-1.5">
                <svg
                  className="h-4 w-4 text-success"
                  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>
                Поддержка 24/7
              </span>
            </div>
          </div>

          <div className="relative animate-fade-in-up animation-delay-200">
            <div className="relative mx-auto max-w-lg">
              {/* Phone mockup */}
              <div className="relative z-10 mx-auto w-64 rounded-[2.5rem] border-[8px] border-gray-900 bg-gray-900 p-1 shadow-2xl">
                <div className="rounded-[2rem] bg-white overflow-hidden">
                  <div className="bg-primary px-4 py-3 flex items-center justify-between">
                    <span className="text-white text-xs font-semibold">
                      MyFitCRM
                    </span>
                    <span className="text-white/80 text-xs">9:41</span>
                  </div>
                  <div className="p-4 space-y-3">
                    <div className="text-sm font-semibold text-gray-900">
                      Главная
                    </div>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="rounded-xl bg-primary/10 p-3 text-center">
                        <div className="text-xl font-bold text-primary">
                          24
                        </div>
                        <div className="text-[10px] text-gray-500 mt-0.5">
                          Тренировки
                        </div>
                      </div>
                      <div className="rounded-xl bg-success/10 p-3 text-center">
                        <div className="text-xl font-bold text-success">
                          87%
                        </div>
                        <div className="text-[10px] text-gray-500 mt-0.5">
                          Конверсия
                        </div>
                      </div>
                      <div className="rounded-xl bg-blue-50 p-3 text-center">
                        <div className="text-xl font-bold text-blue-600">
                          156
                        </div>
                        <div className="text-[10px] text-gray-500 mt-0.5">
                          Клиенты
                        </div>
                      </div>
                      <div className="rounded-xl bg-purple-50 p-3 text-center">
                        <div className="text-xl font-bold text-purple-600">
                          #3
                        </div>
                        <div className="text-[10px] text-gray-500 mt-0.5">
                          Рейтинг
                        </div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="text-xs font-semibold text-gray-700">
                        Ближайшие занятия
                      </div>
                      {[
                        { time: "10:00", name: "Иванова А.", type: "Персональная" },
                        { time: "11:30", name: "Петров К.", type: "Сплит" },
                        { time: "14:00", name: "Сидорова М.", type: "Растяжка" },
                      ].map((s) => (
                        <div
                          key={s.time}
                          className="flex items-center gap-3 rounded-lg bg-gray-50 px-3 py-2"
                        >
                          <div className="text-xs font-bold text-primary">
                            {s.time}
                          </div>
                          <div>
                            <div className="text-xs font-medium text-gray-900">
                              {s.name}
                            </div>
                            <div className="text-[10px] text-gray-400">
                              {s.type}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                    <div className="flex justify-around pt-2 border-t border-gray-100">
                      {[
                        { Icon: BarChart3, label: "Главная", active: true },
                        { Icon: Smartphone, label: "Клиенты", active: false },
                        { Icon: Monitor, label: "Расписание", active: false },
                        { Icon: Phone, label: "Звонки", active: false },
                      ].map((tab) => (
                        <div key={tab.label} className="flex flex-col items-center gap-0.5">
                          <tab.Icon
                            size={14}
                            className={tab.active ? "text-primary" : "text-gray-300"}
                          />
                          <span
                            className={`text-[8px] ${
                              tab.active
                                ? "text-primary font-semibold"
                                : "text-gray-300"
                            }`}
                          >
                            {tab.label}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>

              {/* Floating cards */}
              <div className="absolute -left-8 top-16 z-20 rounded-xl bg-white p-3 shadow-lg border border-gray-100 animate-fade-in animation-delay-400">
                <div className="flex items-center gap-2">
                  <div className="w-8 h-8 rounded-full bg-success/10 flex items-center justify-center">
                    <BarChart3 size={14} className="text-success" />
                  </div>
                  <div>
                    <div className="text-xs font-semibold text-gray-900">
                      +23% конверсия
                    </div>
                    <div className="text-[10px] text-gray-400">
                      За последний месяц
                    </div>
                  </div>
                </div>
              </div>

              <div className="absolute -right-4 bottom-24 z-20 rounded-xl bg-white p-3 shadow-lg border border-gray-100 animate-fade-in animation-delay-500">
                <div className="flex items-center gap-2">
                  <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                    <Phone size={14} className="text-primary" />
                  </div>
                  <div>
                    <div className="text-xs font-semibold text-gray-900">
                      SIP-звонок
                    </div>
                    <div className="text-[10px] text-gray-400">
                      CallerID клуба
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
