workparking/app/contacts/page.tsx

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>

      <section id="contact-request" className="pb-16 sm:pb-20">
        <div className="max-w-5xl 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-3xl">
              <h2 className="text-3xl font-bold tracking-[-0.04em] sm:text-4xl">
                Обсудим ваш объект
              </h2>
              <p className="mt-4 text-base leading-relaxed text-neutral-400 sm:text-lg">
                Мы убрали локальную CRM, базу заявок и админку из сайта. Дальше
                сюда можно спокойно подключить внешнюю форму из EspoCRM или
                любой другой системы, а пока используйте прямые контакты.
              </p>
            </div>

            <div className="mt-8 grid gap-4 md:grid-cols-2">
              <a
                href="tel:+79999698149"
                className="rounded-3xl border border-emerald-500/30 bg-emerald-500/10 px-5 py-5 transition-colors hover:bg-emerald-500/15"
              >
                <div className="text-sm uppercase tracking-[0.18em] text-emerald-300">
                  Телефон
                </div>
                <div className="mt-3 text-2xl font-semibold">
                  +7 (999) 969-81-49
                </div>
                <p className="mt-2 text-neutral-400">
                  Для обсуждения объекта, внедрения и тарифов
                </p>
              </a>

              <a
                href="mailto:sale@parkflow.ru"
                className="rounded-3xl border border-white/10 bg-black/25 px-5 py-5 transition-colors hover:border-white/20 hover:bg-white/[0.03]"
              >
                <div className="text-sm uppercase tracking-[0.18em] text-neutral-400">
                  Email
                </div>
                <div className="mt-3 text-2xl font-semibold">sale@parkflow.ru</div>
                <p className="mt-2 text-neutral-400">
                  Можно сразу прислать адрес объекта и краткое описание задачи
                </p>
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}