import Link from "next/link";
import Image from "next/image";
import LeadForm from "@/components/lead-form";
import BarrierIcon from "@/components/barrier-icon";
import {
  ArrowRight,
  Camera,
  Smartphone,
  CheckCircle2,
  BarChart3,
} from "lucide-react";

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

              <h1 className="text-4xl font-bold leading-[0.98] tracking-[-0.05em] sm:text-5xl lg:text-6xl">
                Умный въезд
                <br />
                для двора
              </h1>

              <p className="mt-4 max-w-2xl text-[15px] leading-relaxed text-neutral-300 sm:mt-5 sm:text-lg lg:text-xl">
                Распознавание номера автомобиля, автоматический въезд и выезд,
                приложение для жителей, история проездов и удобный контроль
                доступа для двора, ЖК, ТСЖ и управляющей компании.
              </p>

              <div className="mt-7 flex flex-col gap-3 sm:mt-8 sm:flex-row sm:gap-4">
                <Link
                  href="/pricing"
                  className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-5 py-3.5 text-sm font-semibold transition-colors hover:bg-emerald-500 sm:px-6 sm:py-4 sm:text-base"
                >
                  Посмотреть тарифы
                  <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-5 py-3.5 text-sm font-semibold transition-colors hover:border-white/40 hover:bg-white/5 sm:px-6 sm:py-4 sm:text-base"
                >
                  Решение для УК
                </Link>
              </div>

              <div className="mt-6 grid gap-3 text-sm sm:mt-8 sm:grid-cols-3">
                <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-3 shadow-2xl sm:p-6">
                <div className="relative h-[250px] w-full overflow-hidden rounded-[22px] sm:h-[360px] lg:h-[460px]">
                  <Image
                    src="/images/barrier.jpg"
                    alt="Дворовой въезд со шлагбаумом"
                    fill
                    priority
                    className="object-cover"
                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 700px"
                  />
                </div>
              </div>

              <div className="absolute inset-x-3 bottom-3 z-20 rounded-2xl border border-white/10 bg-black/85 px-4 py-3 shadow-xl backdrop-blur sm:inset-x-auto sm:-left-6 sm:bottom-6 sm:block">
                <div className="flex items-start gap-3">
                  <Camera className="mt-1 h-7 w-7 text-emerald-400 sm:h-8 sm:w-8" />
                  <div>
                    <p className="text-xs text-neutral-400 sm:text-sm">Контроль доступа</p>
                    <p className="text-lg font-bold sm:text-2xl">ANPR-камера</p>
                    <p className="text-xs text-neutral-400 sm:text-sm">
                      распознавание номера и фото проезда
                    </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="bg-neutral-950 py-12 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          <div className="mb-8 max-w-3xl sm:mb-14">
            <h2 className="text-3xl sm:text-4xl font-bold">
              Что входит в апгрейд
            </h2>
            <p className="mt-3 text-base text-neutral-400 sm:mt-4 sm:text-lg">
              Мы не просто ставим оборудование, а превращаем обычный шлагбаум в
              управляемую систему доступа для двора и управляющей компании.
            </p>
          </div>

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

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

          <div className="grid gap-4 lg:grid-cols-2 lg:gap-6">
            <div className="rounded-3xl border border-white/10 bg-black/30 p-5 sm:p-8">
              <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <h3 className="text-2xl font-semibold">Базовая подписка</h3>
                <span className="w-fit rounded-full border border-emerald-500/30 bg-emerald-500/10 px-4 py-2 text-sm text-emerald-300">
                  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-5 sm:p-8">
              <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <h3 className="text-2xl font-semibold">Расширенная подписка</h3>
                <span className="w-fit rounded-full border border-emerald-500/30 bg-emerald-500/10 px-4 py-2 text-sm text-emerald-300">
                  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="bg-neutral-950 py-12 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          <div className="grid items-start gap-6 lg:grid-cols-2 lg:gap-14">
            <div>
              <h2 className="text-3xl sm:text-4xl font-bold mb-6">
                Что получает объект
              </h2>

              <div className="space-y-3 sm: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-3.5 sm: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-5 sm:p-8">
              <h3 className="text-2xl font-semibold mb-5">
                Для кого подходит решение
              </h3>

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

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

      <section className="bg-gradient-to-b from-neutral-950 to-black py-12 sm:py-24">
        <div className="mx-auto max-w-4xl px-4 sm:px-6">
          <div className="rounded-[32px] border border-white/10 bg-neutral-900 p-5 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-3 text-base text-neutral-400 sm:mt-4 sm:text-lg">
                Оставьте контакты и коротко опишите объект. Мы предложим
                подходящий сценарий внедрения и тариф.
              </p>
            </div>

            <LeadForm />
          </div>
        </div>
      </section>
    </main>
  );
}
