import { CheckCircle2, CircleAlert, Wrench, CreditCard } from "lucide-react";

export default function PricingPage() {
  return (
    <main className="bg-neutral-950">
      <section className="hero-bg">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-16 sm:py-20">
          <div className="max-w-4xl">
            <p className="text-emerald-300 text-sm mb-4">Тарифы и модель подключения</p>
            <h1 className="text-4xl sm:text-5xl font-bold leading-tight">
              Стоимость апгрейда
              <br />
              дворового шлагбаума
            </h1>
            <p className="mt-5 text-neutral-300 text-lg leading-relaxed">
              Можно купить оборудование в собственность или подключить модель с
              оборудованием от WorkParking по ежемесячной подписке.
            </p>
          </div>
        </div>
      </section>

      <section className="py-16 sm:py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="grid xl:grid-cols-2 gap-6">
            <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
              <div className="flex items-center gap-3 mb-5">
                <Wrench className="w-8 h-8 text-emerald-500" />
                <h2 className="text-2xl font-semibold">Покупка оборудования</h2>
              </div>

              <div className="rounded-2xl bg-black/30 border border-white/10 p-5 mb-6">
                <div className="text-neutral-400 text-sm mb-2">
                  Стартовые вложения
                </div>
                <div className="text-3xl sm:text-4xl font-bold">
                  от 150 000 ₽
                </div>
                <div className="text-neutral-400 mt-2">
                  Оборудование и установка. Оборудование принадлежит заказчику.
                </div>
              </div>

              <div className="space-y-4 text-neutral-300">
                <div className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
                  Базовая подписка — 10 000 ₽ / мес
                </div>
                <div className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
                  Расширенная подписка — 15 000 ₽ / мес
                </div>
                <div className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
                  Подходит тем, кто хочет владеть оборудованием
                </div>
              </div>
            </div>

            <div className="rounded-3xl border border-emerald-500/30 bg-emerald-500/5 p-6 sm:p-8">
              <div className="flex items-center gap-3 mb-5">
                <CreditCard className="w-8 h-8 text-emerald-400" />
                <h2 className="text-2xl font-semibold">
                  Оборудование от WorkParking
                </h2>
              </div>

              <div className="rounded-2xl bg-black/30 border border-white/10 p-5 mb-6">
                <div className="text-neutral-400 text-sm mb-2">
                  Без крупных стартовых вложений
                </div>
                <div className="text-3xl sm:text-4xl font-bold">
                  от 20 000 ₽ / мес
                </div>
                <div className="text-neutral-400 mt-2">
                  Оборудование остаётся в сервисной модели и входит в ежемесячный
                  платёж.
                </div>
              </div>

              <div className="space-y-4 text-neutral-200">
                <div className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
                  Базовый сервис — от 20 000 ₽ / мес
                </div>
                <div className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
                  Расширенный сервис — от 30 000 ₽ / мес
                </div>
                <div className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
                  Подходит, если не хочется покупать оборудование сразу
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="pb-16 sm:pb-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <h2 className="text-3xl sm:text-4xl font-bold mb-10">
            Подписка на сервис
          </h2>

          <div className="grid lg:grid-cols-2 gap-6">
            <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
              <div className="flex items-center justify-between gap-4 mb-6">
                <h3 className="text-2xl font-semibold">Базовая подписка</h3>
                <span className="rounded-full bg-emerald-500/10 border border-emerald-500/30 px-4 py-2 text-emerald-300 text-sm">
                  10 000 ₽ / мес
                </span>
              </div>

              <div className="space-y-4 text-neutral-300">
                {[
                  "Въезд по номеру автомобиля",
                  "Выезд по номеру автомобиля",
                  "Приложение для жителей",
                  "Базовые функции доступа",
                  "Базовая история проездов",
                ].map((item) => (
                  <div key={item} className="flex gap-3">
                    <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
                    {item}
                  </div>
                ))}
              </div>
            </div>

            <div className="rounded-3xl border border-emerald-500/30 bg-emerald-500/5 p-6 sm:p-8">
              <div className="flex items-center justify-between gap-4 mb-6">
                <h3 className="text-2xl font-semibold">Расширенная подписка</h3>
                <span className="rounded-full bg-emerald-500/10 border border-emerald-500/30 px-4 py-2 text-emerald-300 text-sm">
                  15 000 ₽ / мес
                </span>
              </div>

              <div className="space-y-4 text-neutral-200">
                {[
                  "Всё из базового тарифа",
                  "Фото автомобиля в истории проездов",
                  "Фильтры по событиям и номерам",
                  "Более подробная аналитика",
                  "Расширенный контроль и отчётность",
                ].map((item) => (
                  <div key={item} className="flex gap-3">
                    <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
                    {item}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="pb-16 sm:pb-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="rounded-[28px] border border-white/10 bg-neutral-900 p-6 sm:p-8">
            <div className="flex items-start gap-3 mb-6">
              <CircleAlert className="w-6 h-6 text-emerald-400 mt-1 shrink-0" />
              <div>
                <h2 className="text-2xl font-semibold mb-2">
                  Что происходит при остановке подписки
                </h2>
                <p className="text-neutral-400 leading-relaxed">
                  Мы рекомендуем описывать это мягко и прозрачно: базовая логика
                  въезда продолжает работать, а сервисные функции становятся
                  недоступны до возобновления обслуживания.
                </p>
              </div>
            </div>

            <div className="grid lg:grid-cols-2 gap-6">
              <div className="rounded-2xl border border-white/10 bg-black/30 p-5">
                <h3 className="text-xl font-semibold mb-4">
                  Остаётся доступно
                </h3>
                <div className="space-y-3 text-neutral-300">
                  <div>Въезд и выезд по уже сохранённым номерам</div>
                  <div>Работа текущей локальной конфигурации</div>
                </div>
              </div>

              <div className="rounded-2xl border border-white/10 bg-black/30 p-5">
                <h3 className="text-xl font-semibold mb-4">
                  Приостанавливается
                </h3>
                <div className="space-y-3 text-neutral-300">
                  <div>Приложение и удалённый доступ</div>
                  <div>Добавление новых номеров</div>
                  <div>Гостевые пропуска</div>
                  <div>Фото в истории, фильтры и аналитика</div>
                </div>
              </div>
            </div>

            <p className="text-neutral-500 text-sm mt-6 leading-relaxed">
              При длительной неоплате сервис может быть переведён в архивный
              режим. Повторное подключение, восстановление расширенных функций и
              сервисных данных может выполняться как отдельная платная услуга.
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}