export default function ContactsPage() {
  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">
              Свяжитесь с нами
            </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-5xl 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">
            <h2 className="text-2xl font-semibold mb-5">Основные контакты</h2>
            <div className="space-y-4 text-neutral-300">
              <div>
                <div className="text-neutral-500 text-sm mb-1">Телефон</div>
                <a href="tel:+79999698149" className="hover:text-emerald-300">
                  +7 (999) 969-81-49
                </a>
              </div>

              <div>
                <div className="text-neutral-500 text-sm mb-1">Email для продаж</div>
                <a
                  href="mailto:sale@parkflow.ru"
                  className="hover:text-emerald-300"
                >
                  sale@parkflow.ru
                </a>
              </div>

              <div>
                <div className="text-neutral-500 text-sm mb-1">Общий Email</div>
                <a
                  href="mailto:info@parkflow.ru"
                  className="hover:text-emerald-300"
                >
                  info@parkflow.ru
                </a>
              </div>

              <div>
                <div className="text-neutral-500 text-sm mb-1">Компания</div>
                <div>ООО «Пракфлоу»</div>
              </div>

              <div>
                <div className="text-neutral-500 text-sm mb-1">ИНН</div>
                <div>7777773333</div>
              </div>
            </div>
          </div>

          <div className="rounded-3xl border border-white/10 bg-neutral-900 p-6 sm:p-8">
            <h2 className="text-2xl font-semibold mb-5">Соцсети и мессенджеры</h2>
            <div className="space-y-4 text-neutral-300">
              <a href="#" className="block hover:text-emerald-300">
                VK
              </a>
              <a href="#" className="block hover:text-emerald-300">
                Telegram
              </a>
              <a href="#" className="block hover:text-emerald-300">
                MAX
              </a>
            </div>

            <div className="mt-8 rounded-2xl border border-white/10 bg-black/30 p-5">
              <p className="text-neutral-400 leading-relaxed">
                Здесь позже можно добавить форму обратной связи, карту или
                отдельные контакты для отдела продаж и технической поддержки.
              </p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}