import type { Metadata } from "next";
import Link from "next/link";
import { ArrowUpRight, Check, Lock, Wallet, Settings2, Database } from "lucide-react";
import PageHero from "@/components/PageHero";
import SectionEyebrow from "@/components/SectionEyebrow";
import CTASection from "@/components/CTASection";

export const metadata: Metadata = {
  title: "Настройка и интеграция CRM",
  description:
    "Установка, настройка и интеграция CRM-систем с открытым исходным кодом под процессы вашего бизнеса.",
};

const benefits = [
  {
    icon: Wallet,
    title: "Без лицензионных платежей",
    description: "Открытый исходный код — платите за настройку, а не за подписку на каждого пользователя.",
  },
  {
    icon: Lock,
    title: "Данные остаются у вас",
    description: "CRM разворачивается на вашем сервере — полный контроль над данными клиентов.",
  },
  {
    icon: Settings2,
    title: "Гибкая настройка",
    description: "Дорабатываем систему под ваши процессы, а не подстраиваем бизнес под шаблон.",
  },
  {
    icon: Database,
    title: "Свобода интеграций",
    description: "Подключаем сайт, боты, почту и другие сервисы без ограничений вендора.",
  },
];

const systems = [
  {
    name: "EspoCRM",
    description: "Гибкая CRM с удобным конструктором сущностей и процессов под любые отрасли.",
  },
  {
    name: "SuiteCRM",
    description: "Развитая система с модулями продаж, поддержки и маркетинга из коробки.",
  },
  {
    name: "Odoo CRM",
    description: "Часть экосистемы Odoo — легко расширяется складом, документами и бухгалтерией.",
  },
];

const included = [
  "Установка и настройка CRM на сервере",
  "Настройка воронок продаж и полей под ваши процессы",
  "Интеграция с сайтом, ботами и почтой",
  "Перенос текущей базы клиентов",
  "Обучение сотрудников работе с системой",
  "Техническая поддержка после запуска",
];

export default function CrmPage() {
  return (
    <>
      <PageHero
        eyebrow="CRM-системы"
        title="Настройка и"
        highlight="интеграция CRM"
        subtitle="Устанавливаем, настраиваем и интегрируем CRM с открытым исходным кодом — под процессы именно вашего бизнеса."
      >
        <Link
          href="/contacts"
          className="inline-flex items-center gap-1.5 rounded-full bg-blue-500 px-6 py-3.5 font-medium text-white transition-transform hover:scale-[1.03]"
        >
          Обсудить внедрение
          <ArrowUpRight size={18} />
        </Link>
      </PageHero>

      <section className="px-6 py-20">
        <div className="mx-auto max-w-6xl">
          <SectionEyebrow>Почему open source</SectionEyebrow>
          <div className="mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
            {benefits.map((b) => (
              <div key={b.title}>
                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg border border-white/[0.08] bg-white/[0.03] text-blue-400">
                  <b.icon size={18} strokeWidth={1.75} />
                </div>
                <h3 className="font-medium text-ink-100">{b.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-ink-500">
                  {b.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="px-6 py-20">
        <div className="mx-auto max-w-6xl">
          <SectionEyebrow>С какими системами работаем</SectionEyebrow>
          <h2 className="font-display text-3xl font-medium sm:text-4xl">
            Примеры CRM с открытым кодом
          </h2>
          <div className="mt-12 grid gap-5 lg:grid-cols-3">
            {systems.map((s) => (
              <div
                key={s.name}
                className="rounded-2xl border border-white/[0.06] bg-base-900/50 p-7"
              >
                <h3 className="font-display text-lg font-medium">{s.name}</h3>
                <p className="mt-3 text-sm leading-relaxed text-ink-500">
                  {s.description}
                </p>
              </div>
            ))}
          </div>
          <p className="mt-6 text-sm text-ink-700">
            Также работаем с другими open-source CRM — подберём систему под ваши задачи и бюджет.
          </p>
        </div>
      </section>

      <section className="px-6 py-20">
        <div className="mx-auto max-w-6xl rounded-3xl border border-white/[0.06] bg-base-900/40 p-10">
          <SectionEyebrow>Что входит в услугу</SectionEyebrow>
          <div className="mt-6 grid gap-4 sm:grid-cols-2">
            {included.map((item) => (
              <div key={item} className="flex items-start gap-2.5">
                <Check size={17} className="mt-0.5 shrink-0 text-blue-400" />
                <span className="text-ink-300">{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTASection
        title="Хотите навести порядок в клиентской базе?"
        subtitle="Расскажем, какая CRM подойдёт именно вашим процессам."
      />
    </>
  );
}