Добавить форму заявок и серверную интеграцию лидов с EspoCRM

app/api/leads/route.ts

@@ -0,0 +1,94 @@
+import { NextResponse } from "next/server";
+
+type LeadRequestBody = {
+  name?: string;
+  phone?: string;
+  email?: string | null;
+  message?: string | null;
+};
+
+function normalizePhone(input: string) {
+  const digits = input.replace(/\D/g, "");
+
+  if (digits.length === 11 && (digits.startsWith("7") || digits.startsWith("8"))) {
+    return `+7${digits.slice(1)}`;
+  }
+
+  if (digits.length === 10) {
+    return `+7${digits}`;
+  }
+
+  return null;
+}
+
+export async function POST(request: Request) {
+  const apiUrl = process.env.ESPOCRM_API_URL;
+  const apiKey = process.env.ESPOCRM_API_KEY;
+  const leadSource = process.env.ESPOCRM_LEAD_SOURCE || "Web Site";
+
+  if (!apiUrl || !apiKey) {
+    console.error("EspoCRM env is not configured");
+    return NextResponse.json(
+      { error: "Интеграция CRM временно не настроена" },
+      { status: 500 },
+    );
+  }
+
+  try {
+    const body = (await request.json()) as LeadRequestBody;
+    const name = body.name?.trim() || "";
+    const email = body.email?.trim() || null;
+    const message = body.message?.trim() || null;
+    const phoneNumber = body.phone ? normalizePhone(body.phone) : null;
+
+    if (name.length < 2 || !phoneNumber) {
+      return NextResponse.json(
+        { error: "Проверьте название объекта и номер телефона" },
+        { status: 400 },
+      );
+    }
+
+    const descriptionParts = [message || "Заявка с сайта"];
+
+    if (email) {
+      descriptionParts.push(`Email: ${email}`);
+    }
+
+    const payload = {
+      name,
+      phoneNumber,
+      emailAddress: email,
+      description: descriptionParts.join("\n"),
+      source: leadSource,
+    };
+
+    const response = await fetch(apiUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "x-api-key": apiKey,
+      },
+      body: JSON.stringify(payload),
+      cache: "no-store",
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error("EspoCRM lead create failed:", response.status, errorText);
+
+      return NextResponse.json(
+        { error: "Не удалось отправить заявку в CRM" },
+        { status: 502 },
+      );
+    }
+
+    return NextResponse.json({ success: true }, { status: 201 });
+  } catch (error) {
+    console.error("POST /api/leads error:", error);
+    return NextResponse.json(
+      { error: "Не удалось обработать заявку" },
+      { status: 500 },
+    );
+  }
+}

app/contacts/page.tsx

@@ -1,3 +1,5 @@
+import LeadForm from "@/components/lead-form";
+
 export default function ContactsPage() {
   return (
     <main className="bg-neutral-950">
@@ -88,46 +90,11 @@ export default function ContactsPage() {
       <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>
+            <LeadForm
+              id="lead-form"
+              title="Оставить заявку"
+              description="Заполните короткую форму. Заявка будет отправлена напрямую в CRM, а мы свяжемся с вами для уточнения задачи."
+            />
           </div>
         </div>
       </section>

app/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import BarrierIcon from "@/components/barrier-icon";
+import LeadForm from "@/components/lead-form";
 import {
   ArrowRight,
   Camera,
@@ -134,7 +135,7 @@ export default function Home() {
 
               <div className="mt-7 flex flex-col gap-3 sm:mt-8 sm:flex-row sm:gap-4">
                 <Link
-                  href="/contacts#contact-request"
+                  href="/contacts#lead-form"
                   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"
                 >
                   Получить консультацию
@@ -410,35 +411,11 @@ export default function Home() {
               </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>
+                <LeadForm
+                  title="Оставить заявку"
+                  description="Заполните форму, и заявка уйдёт напрямую в CRM. Мы свяжемся с вами, чтобы обсудить объект и подходящий сценарий запуска."
+                  compact
+                />
               </div>
             </div>
           </div>