import Link from "next/link";
import {
  ArrowRight,
  Camera,
  Fence,
  Smartphone,
  CheckCircle2,
  ShieldCheck,
  Server,
  Building2,
  CircleDollarSign,
  BarChart3,
} from "lucide-react";

export default function Home() {
  return (
    <main>
      <section className="hero-bg min-h-[calc(100vh-73px)] flex items-center">
        <div className="max-w-7xl mx-auto w-full px-4 sm:px-6 py-14 sm:py-20">
          <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
            <div>
              <div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-4 py-2 text-sm text-emerald-300 mb-6">
                <span className="h-2.5 w-2.5 rounded-full bg-emerald-400" />
                Апгрейд дворовых шлагбаумов в Москве
              </div>

              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight">
                Умный въезд
                <br />
                для двора, ЖК и УК
              </h1>

              <p className="mt-5 text-base sm:text-lg lg:text-xl text-neutral-300 max-w-2xl leading-relaxed">
                Распознавание номера автомобиля, автоматический въезд и выезд,
                приложение для жителей, история проездов, фото с камеры и
                аналитика по подписке.
              </p>

              <div className="mt-8 flex flex-col sm:flex-row gap-4">
                <Link
                  href="/pricing"
                  className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-6 py-4 text-base font-semibold hover:bg-emerald-500 transition-colors"
                >
                  Посмотреть тарифы
                  <ArrowRight className="w-5 h-5" />
                </Link>

                <Link
                  href="/for-uk"
                  className="inline-flex items-center justify-center gap-2 rounded-2xl border border-white/20 px-6 py-4 text-base font-semibold hover:border-white/40 hover:bg-white/5 transition-colors"
                >
                  Решение для УК
                </Link>
              </div>

              <div className="mt-8 grid sm:grid-cols-3 gap-3 text-sm">
                <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-neutral-300">
                  Въезд и выезд по номеру
                </div>
                <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-neutral-300">
                  Приложение для жителей
                </div>
                <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-neutral-300">
                  Подписка с аналитикой
                </div>
              </div>
            </div>

            <div className="relative">
              <div className="rounded-[28px] border border-white/10 bg-neutral-900/80 p-4 sm:p-6 shadow-2xl">
                <img
                  src="https://images.unsplash.com/photo-1506521781263-d8422e82f27a?auto=format&fit=crop&w=1400&q=80"
                  alt="Дворовой въезд со шлагбаумом"
                  className="h-[260px] sm:h-[360px] lg:h-[460px] w-full rounded-[22px] object-cover"
                />
              </div>

              <div className="hidden sm:block absolute -left-6 bottom-6 z-20 rounded-2xl border border-white/10 bg-black/85 backdrop-blur px-4 py-4 shadow-xl">
                <div className="flex items-start gap-3">
                  <Camera className="w-8 h-8 text-emerald-400 mt-1" />
                  <div>
                    <p className="text-sm text-neutral-400">Контроль доступа</p>
                    <p className="text-2xl font-bold">ANPR-камера</p>
                    <p className="text-sm text-neutral-400">
                      распознавание номера и фото проезда
                    </p>
                  </div>
                </div>
              </div>

              <div className="hidden lg:block absolute -right-6 top-10 z-20 rounded-2xl border border-white/10 bg-black/85 backdrop-blur px-4 py-4 shadow-xl">
                <div className="flex items-start gap-3">
                  <BarChart3 className="w-8 h-8 text-emerald-400 mt-1" />
                  <div>
                    <p className="text-sm text-neutral-400">Расширенный тариф</p>
                    <p className="text-2xl font-bold">Аналитика</p>
                    <p className="text-sm text-neutral-400">
                      история, фильтры и отчёты по проездам
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 sm:py-20 bg-neutral-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="max-w-3xl mb-10 sm:mb-14">
            <h2 className="text-3xl sm:text-4xl font-bold">
              Что входит в апгрейд
            </h2>
            <p className="mt-4 text-neutral-400 text-base sm:text-lg">
              Мы не просто ставим оборудование, а превращаем обычный шлагбаум в
              управляемую систему доступа для двора и управляющей компании.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            <div className="rounded-3xl bg-neutral-900 border border-white/10 p-6 sm:p-8">
              <Camera className="w-11 h-11 text-emerald-500 mb-5" />
              <h3 className="text-xl font-semibold mb-3">Распознавание номера</h3>
              <p className="text-neutral-400 leading-relaxed">
                Камера считывает номер авто и автоматически открывает въезд или
                выезд по правилам доступа.
              </p>
            </div>

            <div className="rounded-3xl bg-neutral-900 border border-white/10 p-6 sm:p-8">
              <Fence className="w-11 h-11 text-emerald-500 mb-5" />
              <h3 className="text-xl font-semibold mb-3">
                Управление шлагбаумом
              </h3>
              <p className="text-neutral-400 leading-relaxed">
                Сохраняется удобный сценарий для резидентов, гостей и служебного
                транспорта без ручного режима.
              </p>
            </div>

            <div className="rounded-3xl bg-neutral-900 border border-white/10 p-6 sm:p-8">
              <Smartphone className="w-11 h-11 text-emerald-500 mb-5" />
              <h3 className="text-xl font-semibold mb-3">
                Приложение и личный доступ
              </h3>
              <p className="text-neutral-400 leading-relaxed">
                Жители получают управление доступом со смартфона, а УК — единый
                инструмент контроля.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 sm:py-20 bg-neutral-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="max-w-3xl mb-10 sm:mb-14">
            <h2 className="text-3xl sm:text-4xl font-bold">
              Два формата подписки
            </h2>
            <p className="mt-4 text-neutral-400 text-base sm:text-lg">
              Можно начать с базового тарифа и перейти на расширенный, когда
              понадобится более глубокая история и аналитика.
            </p>
          </div>

          <div className="grid lg:grid-cols-2 gap-6">
            <div className="rounded-3xl border border-white/10 bg-black/30 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">
                <div className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
                  Въезд и выезд по номеру автомобиля
                </div>
                <div className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
                  Приложение и базовые функции для жителей
                </div>
                <div className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
                  Базовая история проездов
                </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 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">
                <div className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
                  Всё из базового тарифа
                </div>
                <div className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
                  Фото автомобиля в истории проездов
                </div>
                <div className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-400 mt-0.5 shrink-0" />
                  Фильтры по событиям и автомобилям
                </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="py-16 sm:py-20 bg-neutral-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="grid lg:grid-cols-2 gap-8 lg:gap-14 items-start">
            <div>
              <h2 className="text-3xl sm:text-4xl font-bold mb-6">
                Что получает объект
              </h2>

              <div className="space-y-4">
                {[
                  "Контроль въезда и выезда по номеру автомобиля",
                  "Историю всех событий проезда",
                  "Снижение ручной нагрузки на диспетчера и охрану",
                  "Удобный сценарий доступа для жителей и гостей",
                  "Основание для дальнейшей аналитики и масштабирования",
                ].map((item) => (
                  <div
                    key={item}
                    className="flex items-start gap-3 rounded-2xl border border-white/10 bg-neutral-900 px-4 py-4"
                  >
                    <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
                    <p className="text-neutral-200">{item}</p>
                  </div>
                ))}
              </div>
            </div>

            <div className="rounded-[28px] border border-white/10 bg-neutral-900 p-6 sm:p-8">
              <h3 className="text-2xl font-semibold mb-5">
                Для кого подходит решение
              </h3>

              <div className="space-y-4 text-neutral-300">
                <div className="rounded-2xl bg-black/30 border border-white/10 p-4">
                  Дворы многоквартирных домов
                </div>
                <div className="rounded-2xl bg-black/30 border border-white/10 p-4">
                  Жилые комплексы с закрытым въездом
                </div>
                <div className="rounded-2xl bg-black/30 border border-white/10 p-4">
                  Управляющие компании, ТСЖ и ТСН
                </div>
                <div className="rounded-2xl bg-black/30 border border-white/10 p-4">
                  Объекты, где нужен простой старт и платное расширение функций
                </div>
              </div>

              <div className="mt-8 flex flex-col sm:flex-row gap-4">
                <Link
                  href="/services"
                  className="inline-flex items-center justify-center rounded-2xl bg-white text-black px-6 py-4 font-semibold hover:bg-neutral-200 transition-colors"
                >
                  Посмотреть услуги
                </Link>
                <Link
                  href="/pricing"
                  className="inline-flex items-center justify-center rounded-2xl border border-white/20 px-6 py-4 font-semibold hover:border-white/40 hover:bg-white/5 transition-colors"
                >
                  Смотреть тарифы
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 sm:py-24 bg-gradient-to-b from-neutral-950 to-black">
        <div className="max-w-4xl mx-auto px-4 sm:px-6">
          <div className="rounded-[32px] border border-white/10 bg-neutral-900 p-6 sm:p-10">
            <div className="max-w-2xl mx-auto text-center">
              <h2 className="text-3xl sm:text-4xl font-bold">
                Обсудим апгрейд вашего шлагбаума
              </h2>
              <p className="mt-4 text-neutral-400 text-base sm:text-lg">
                На следующем этапе сюда можно подключить реальную форму и
                отправку заявки в backend.
              </p>
            </div>

            <form className="mt-8 grid gap-4 sm:gap-5">
              <input
                type="text"
                placeholder="Название ЖК, ТСЖ или УК"
                className="w-full rounded-2xl border border-white/10 bg-black/30 px-5 py-4 outline-none placeholder:text-neutral-500 focus:border-emerald-500"
              />
              <input
                type="tel"
                placeholder="+7 (___) ___-__-__"
                className="w-full rounded-2xl border border-white/10 bg-black/30 px-5 py-4 outline-none placeholder:text-neutral-500 focus:border-emerald-500"
              />
              <textarea
                placeholder="Опишите текущий шлагбаум и что хотите добавить: номерной доступ, приложение, история, аналитика"
                className="min-h-32 w-full rounded-2xl border border-white/10 bg-black/30 px-5 py-4 outline-none placeholder:text-neutral-500 focus:border-emerald-500"
              />
              <button
                type="submit"
                className="inline-flex items-center justify-center rounded-2xl bg-emerald-600 px-6 py-4 text-base font-semibold hover:bg-emerald-500 transition-colors"
              >
                Отправить заявку
              </button>
            </form>
          </div>
        </div>
      </section>
    </main>
  );
}