import Link from "next/link";
import Image from "next/image";
import BarrierIcon from "@/components/barrier-icon";
import {
  ArrowRight,
  Camera,
  Smartphone,
  CheckCircle2,
  BarChart3,
  Building2,
  ShieldCheck,
  Clock3,
  BadgeCheck,
  ChevronRight,
} from "lucide-react";

const trustFacts = [
  "Без замены всего въезда",
  "Интеграция с текущим шлагбаумом",
  "Подходит для ЖК, ТСЖ и УК",
];

const proofStats = [
  {
    value: "1 система",
    label: "вместо разрозненных сценариев въезда, звонков и ручного контроля",
  },
  {
    value: "3 шага",
    label: "до понятного сценария внедрения: аудит, настройка, запуск",
  },
  {
    value: "2 модели",
    label: "подключения: покупка оборудования или сервисный формат",
  },
];

const capabilities = [
  {
    icon: Camera,
    title: "Распознавание номера",
    text: "Камера считывает номер авто и автоматически открывает въезд или выезд по заданным правилам.",
  },
  {
    icon: BarrierIcon,
    title: "Интеграция со шлагбаумом",
    text: "Дорабатываем существующую точку контроля без ощущения, что нужно переделывать объект с нуля.",
  },
  {
    icon: Smartphone,
    title: "Приложение для жителей",
    text: "Жители и сотрудники получают понятный сценарий доступа со смартфона и без лишних звонков.",
  },
];

const rolloutSteps = [
  {
    number: "01",
    title: "Разбираем текущий въезд",
    text: "Смотрим, какой шлагбаум уже стоит, где нужна камера, что критично для охраны, диспетчера и жителей.",
  },
  {
    number: "02",
    title: "Собираем рабочую конфигурацию",
    text: "Предлагаем понятный сценарий: оборудование, логика доступа, история событий, приложение и тариф.",
  },
  {
    number: "03",
    title: "Запускаем и сопровождаем",
    text: "Настраиваем доступ, проверяем сценарии въезда и выезда, обучаем и оставляем систему в понятной эксплуатации.",
  },
];

const objectBenefits = [
  "Контроль въезда и выезда по номеру автомобиля",
  "История всех событий и удобный поиск по проездам",
  "Меньше ручной нагрузки на охрану и диспетчера",
  "Понятный доступ для жителей, гостей и служебного транспорта",
];

const trustCards = [
  {
    icon: ShieldCheck,
    title: "Надёжная логика доступа",
    text: "Система не выглядит экспериментом: сценарии доступа, история событий и контроль статусов собраны в одном контуре.",
  },
  {
    icon: Clock3,
    title: "Спокойное внедрение",
    text: "Мы не продаём хаос из интеграций. Сначала разбираем объект, затем предлагаем понятный путь запуска.",
  },
  {
    icon: Building2,
    title: "Фокус на реальных объектах",
    text: "Сайт и продукт говорят на языке дворов, ЖК, ТСЖ и управляющих компаний, а не абстрактного IT-сервиса.",
  },
  {
    icon: BadgeCheck,
    title: "Сервисная модель роста",
    text: "Можно начать с базового сценария доступа и расширять функции, когда объект к этому готов.",
  },
];

const audiences = [
  "Дворы многоквартирных домов",
  "Жилые комплексы с закрытым въездом",
  "ТСЖ, ТСН и управляющие компании",
  "Объекты, где нужен аккуратный старт без полной замены инфраструктуры",
];

export default function Home() {
  return (
    <main>
      <section className="hero-bg relative overflow-hidden">
        <div className="relative mx-auto flex min-h-[calc(100vh-65px)] w-full max-w-7xl items-center px-4 py-6 sm:px-6 sm:py-12">
          <div className="grid w-full items-center gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16">
            <div>
              <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-emerald-500/25 bg-emerald-500/10 px-3 py-1.5 text-xs text-emerald-300 shadow-[0_0_0_1px_rgba(16,185,129,0.05)] 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="max-w-4xl text-4xl font-bold leading-[0.98] tracking-[-0.06em] sm:text-5xl lg:text-7xl">
                Умный въезд
                <br />
                для двора
              </h1>

              <p className="mt-5 max-w-2xl text-[15px] leading-relaxed text-neutral-300 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="/contacts#contact-request"
                  className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-5 py-3.5 text-sm font-semibold text-white transition-colors hover:bg-emerald-500 sm:px-6 sm:py-4 sm:text-base"
                >
                  Получить консультацию
                  <ArrowRight className="h-5 w-5" />
                </Link>

                <Link
                  href="/pricing"
                  className="inline-flex items-center justify-center gap-2 rounded-2xl border border-white/15 bg-white/[0.02] px-5 py-3.5 text-sm font-semibold transition-colors hover:border-white/30 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">
                {trustFacts.map((fact) => (
                  <div
                    key={fact}
                    className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-neutral-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
                  >
                    {fact}
                  </div>
                ))}
              </div>
            </div>

            <div className="relative">
              <div className="rounded-[30px] border border-white/10 bg-neutral-900/75 p-3 shadow-[0_36px_120px_rgba(0,0,0,0.4)] sm:p-6">
                <div className="relative h-[270px] w-full overflow-hidden rounded-[24px] sm:h-[380px] lg:h-[500px]">
                  <Image
                    src="/images/barrier.jpg"
                    alt="Дворовой въезд со шлагбаумом"
                    fill
                    priority
                    className="object-cover"
                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 700px"
                  />

                  <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent" />
                </div>
              </div>

              <div className="absolute inset-x-3 bottom-3 z-20 rounded-2xl border border-white/10 bg-black/80 px-4 py-3 shadow-xl backdrop-blur sm:inset-x-auto sm:-left-6 sm:bottom-6">
                <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="absolute -right-4 top-8 hidden rounded-2xl border border-white/10 bg-black/80 px-4 py-4 shadow-xl backdrop-blur lg:block">
                <div className="flex items-start gap-3">
                  <BarChart3 className="mt-1 h-8 w-8 text-emerald-400" />
                  <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-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          <div className="grid gap-4 lg:grid-cols-3">
            {proofStats.map((item) => (
              <div
                key={item.value}
                className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] px-5 py-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] sm:px-6 sm:py-6"
              >
                <div className="text-2xl font-semibold tracking-[-0.05em] sm:text-3xl">
                  {item.value}
                </div>
                <p className="mt-3 max-w-sm text-sm leading-relaxed text-neutral-400 sm:text-base">
                  {item.label}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-[linear-gradient(180deg,#0a0a0a_0%,#0d1411_100%)] py-14 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          <div className="mb-8 max-w-3xl sm:mb-12">
            <h2 className="text-3xl font-bold tracking-[-0.05em] sm:text-4xl">
              Технологичная система доступа,
              <br />
              а не просто камера на въезде
            </h2>
            <p className="mt-4 text-base leading-relaxed text-neutral-400 sm:text-lg">
              Мы превращаем обычный въезд в аккуратный цифровой сервис с понятной
              логикой для объекта, жителей и управляющей компании.
            </p>
          </div>

          <div className="grid gap-4 md:grid-cols-3 md:gap-6">
            {capabilities.map((item) => {
              const Icon = item.icon;

              return (
                <div
                  key={item.title}
                  className="rounded-[30px] border border-white/10 bg-black/30 p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] transition-transform duration-200 hover:-translate-y-0.5 sm:p-8"
                >
                  <Icon className="mb-5 h-11 w-11 text-emerald-500" />
                  <h3 className="text-xl font-semibold tracking-[-0.03em]">
                    {item.title}
                  </h3>
                  <p className="mt-3 leading-relaxed text-neutral-400">
                    {item.text}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="bg-neutral-950 py-14 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          <div className="grid items-start gap-8 lg:grid-cols-[0.95fr_1.05fr] lg:gap-10">
            <div className="rounded-[32px] border border-white/10 bg-neutral-900/80 p-6 shadow-[0_32px_90px_rgba(0,0,0,0.28)] sm:p-8">
              <h2 className="text-3xl font-bold tracking-[-0.05em] sm:text-4xl">
                Внедрение, которое выглядит спокойно и профессионально
              </h2>
              <p className="mt-4 text-base leading-relaxed text-neutral-400 sm:text-lg">
                Мы не перегружаем объект сложной терминологией и хаотичными
                интеграциями. Сначала понимаем сценарий въезда, затем собираем
                понятную систему под реальную эксплуатацию.
              </p>

              <div className="mt-8 space-y-3">
                {rolloutSteps.map((step) => (
                  <div
                    key={step.number}
                    className="rounded-2xl border border-white/10 bg-black/25 px-4 py-4"
                  >
                    <div className="text-xs uppercase tracking-[0.2em] text-emerald-300/80">
                      Этап {step.number}
                    </div>
                    <div className="mt-2 text-lg font-semibold">{step.title}</div>
                    <p className="mt-2 text-sm leading-relaxed text-neutral-400 sm:text-base">
                      {step.text}
                    </p>
                  </div>
                ))}
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              {trustCards.map((item) => {
                const Icon = item.icon;

                return (
                  <div
                    key={item.title}
                    className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(13,20,17,0.95),rgba(10,10,10,0.95))] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] sm:p-6"
                  >
                    <Icon className="h-10 w-10 text-emerald-400" />
                    <h3 className="mt-5 text-xl font-semibold tracking-[-0.03em]">
                      {item.title}
                    </h3>
                    <p className="mt-3 leading-relaxed text-neutral-400">
                      {item.text}
                    </p>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      <section className="bg-[linear-gradient(180deg,#0c1310_0%,#090909_100%)] py-14 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          <div className="grid items-start gap-8 lg:grid-cols-[1.02fr_0.98fr] lg:gap-12">
            <div>
              <h2 className="text-3xl font-bold tracking-[-0.05em] sm:text-4xl">
                Не просто шлагбаум,
                <br />
                а понятный сервис доступа
              </h2>

              <div className="mt-8 space-y-3 sm:space-y-4">
                {objectBenefits.map((item) => (
                  <div
                    key={item}
                    className="flex items-start gap-3 rounded-2xl border border-white/10 bg-neutral-900/65 px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
                  >
                    <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" />
                    <p className="text-neutral-200">{item}</p>
                  </div>
                ))}
              </div>
            </div>

            <div className="rounded-[32px] border border-white/10 bg-black/25 p-5 shadow-[0_28px_80px_rgba(0,0,0,0.26)] sm:p-8">
              <h3 className="text-2xl font-semibold tracking-[-0.03em]">
                Для кого подходит решение
              </h3>

              <div className="mt-5 space-y-3 text-neutral-300">
                {audiences.map((item) => (
                  <div
                    key={item}
                    className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-4"
                  >
                    <span>{item}</span>
                    <ChevronRight className="h-5 w-5 shrink-0 text-neutral-500" />
                  </div>
                ))}
              </div>

              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <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"
                >
                  Посмотреть услуги
                </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"
                >
                  Смотреть тарифы
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="bg-gradient-to-b from-neutral-950 to-black py-14 sm:py-24">
        <div className="mx-auto max-w-6xl px-4 sm:px-6">
          <div className="rounded-[34px] border border-white/10 bg-[linear-gradient(135deg,rgba(16,185,129,0.09),rgba(10,10,10,0.96)_38%,rgba(10,10,10,0.98)_100%)] p-5 shadow-[0_36px_120px_rgba(0,0,0,0.42)] sm:p-10">
            <div className="grid gap-8 lg:grid-cols-[0.86fr_1.14fr] lg:gap-12">
              <div>
                <h2 className="text-3xl font-bold tracking-[-0.05em] sm:text-4xl">
                  Обсудим ваш объект и предложим аккуратный сценарий запуска
                </h2>
                <p className="mt-4 text-base leading-relaxed text-neutral-400 sm:text-lg">
                  Оставьте контакты, и мы поможем понять, как модернизировать
                  существующий въезд без лишней сложности и с понятной экономикой.
                </p>

                <div className="mt-8 space-y-4">
                  {[
                    "Поймём, можно ли дооснастить текущий шлагбаум",
                    "Подскажем, какой формат подключения подойдёт объекту",
                    "Объясним, что получит управляющая компания и жители",
                  ].map((item) => (
                    <div key={item} className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-400" />
                      <p className="text-neutral-300">{item}</p>
                    </div>
                  ))}
                </div>
              </div>

              <div className="rounded-[28px] border border-white/10 bg-black/25 p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] sm:p-6">
                <h3 className="text-3xl font-bold tracking-[-0.05em]">
                  Свяжитесь с нами
                </h3>
                <p className="mt-4 text-base leading-relaxed text-neutral-400 sm:text-lg">
                  Дальше вы сможете подключить сюда форму из EspoCRM или другой
                  внешней CRM. Пока сайт остаётся чистым фронтом без своей базы
                  заявок и админки.
                </p>

                <div className="mt-8 grid gap-3">
                  <a
                    href="tel:+79999698149"
                    className="inline-flex items-center justify-center rounded-2xl bg-emerald-600 px-5 py-4 text-base font-semibold text-white transition-colors hover:bg-emerald-500"
                  >
                    Позвонить: +7 (999) 969-81-49
                  </a>
                  <a
                    href="mailto:sale@parkflow.ru"
                    className="inline-flex items-center justify-center rounded-2xl border border-white/15 bg-white/[0.02] px-5 py-4 text-base font-semibold transition-colors hover:border-white/30 hover:bg-white/5"
                  >
                    Написать: sale@parkflow.ru
                  </a>
                  <Link
                    href="/contacts#contact-request"
                    className="inline-flex items-center justify-center rounded-2xl border border-white/15 bg-white/[0.02] px-5 py-4 text-base font-semibold transition-colors hover:border-white/30 hover:bg-white/5"
                  >
                    Открыть страницу контактов
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}