import {
  Camera,
  Fence,
  Smartphone,
  Server,
  CheckCircle2,
} from "lucide-react";

export default function ServicesPage() {
  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-3xl">
            <p className="text-emerald-300 text-sm mb-4">
              Услуги WorkParking
            </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">
              Мы модернизируем действующий въезд и добавляем распознавание
              номеров, приложение, историю проездов и подписочные функции.
            </p>
          </div>
        </div>
      </section>

      <section className="py-16 sm:py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 grid md:grid-cols-2 gap-6">
          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
            <Camera className="w-10 h-10 text-emerald-500 mb-5" />
            <h2 className="text-2xl font-semibold mb-3">
              Въезд и выезд по номеру
            </h2>
            <p className="text-neutral-400 leading-relaxed">
              Настраиваем ANPR-камеру для автоматического открытия шлагбаума по
              номеру автомобиля.
            </p>
          </div>

          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
            <Fence className="w-10 h-10 text-emerald-500 mb-5" />
            <h2 className="text-2xl font-semibold mb-3">
              Интеграция с действующим шлагбаумом
            </h2>
            <p className="text-neutral-400 leading-relaxed">
              Не обязательно менять весь въезд целиком — можно дооснастить
              текущую точку контроля.
            </p>
          </div>

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

          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
            <Server className="w-10 h-10 text-emerald-500 mb-5" />
            <h2 className="text-2xl font-semibold mb-3">
              История, фото и аналитика
            </h2>
            <p className="text-neutral-400 leading-relaxed">
              В расширенном тарифе доступны фото автомобиля, фильтры по событиям
              и более детальная аналитика.
            </p>
          </div>
        </div>
      </section>

      <section className="pb-16 sm:pb-20">
        <div className="max-w-5xl mx-auto px-4 sm:px-6">
          <div className="rounded-[28px] border border-white/10 bg-neutral-900 p-6 sm:p-8">
            <h2 className="text-3xl font-bold mb-6">Что можем сделать поэтапно</h2>
            <div className="space-y-4">
              {[
                "Подключить въезд и выезд по номеру автомобиля",
                "Добавить приложение и базовые сценарии доступа",
                "Включить хранение фото в истории проездов",
                "Подключить фильтры, отчёты и расширенную аналитику",
              ].map((item) => (
                <div key={item} className="flex gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-500 mt-0.5 shrink-0" />
                  <p className="text-neutral-300">{item}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}