import type { Metadata } from "next";
import Link from "next/link";
import {
  Send,
  MessageCircle,
  ArrowUpRight,
  Check,
  Bell,
  ShoppingBag,
  Headphones,
  Workflow,
  Mail,
  FileText,
} from "lucide-react";
import PageHero from "@/components/PageHero";
import SectionEyebrow from "@/components/SectionEyebrow";
import CTASection from "@/components/CTASection";

export const metadata: Metadata = {
  title: "Боты для Telegram и VK",
  description:
    "Разработка Telegram- и VK-ботов любой сложности: автоматизация заявок, уведомления, интеграция с CRM.",
};

const platforms = [
  {
    icon: Send,
    title: "Telegram-боты",
    description:
      "Боты любой сложности: приём заявок, уведомления, интеграция с CRM и сервисами.",
    points: ["Диалоговые сценарии и кнопки", "Оплата и интеграции", "Уведомления в реальном времени"],
  },
  {
    icon: MessageCircle,
    title: "Боты для ВКонтакте",
    description:
      "Боты для сообществ VK: рассылки, магазины в чате, поддержка подписчиков.",
    points: ["Автоответы и сценарии диалога", "Магазин прямо в сообществе", "Рассылки по базе подписчиков"],
  },
];

const useCases = [
  {
    icon: FileText,
    title: "Приём заявок",
    description: "Клиент оставляет заявку в чате — она сразу попадает в CRM или менеджеру.",
  },
  {
    icon: Bell,
    title: "Уведомления",
    description: "Автоматические напоминания клиентам и сотрудникам о статусе заказа.",
  },
  {
    icon: ShoppingBag,
    title: "Магазин в чате",
    description: "Каталог, корзина и оформление заказа без перехода на сайт.",
  },
  {
    icon: Headphones,
    title: "Поддержка клиентов",
    description: "Ответы на частые вопросы и передача сложных случаев менеджеру.",
  },
  {
    icon: Workflow,
    title: "Интеграция с CRM",
    description: "Бот пишет и читает данные напрямую из вашей CRM-системы.",
  },
  {
    icon: Mail,
    title: "Рассылки",
    description: "Массовые и сегментированные рассылки по базе клиентов.",
  },
];

export default function BotsPage() {
  return (
    <>
      <PageHero
        eyebrow="Боты для соцсетей"
        title="Боты, которые"
        highlight="работают без выходных"
        subtitle="Создаём Telegram- и VK-ботов любой сложности: автоматизация заявок, уведомления, интеграция с 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 grid max-w-6xl gap-5 lg:grid-cols-2">
          {platforms.map((platform) => (
            <div
              key={platform.title}
              className="rounded-2xl border border-white/[0.06] bg-base-900/50 p-8"
            >
              <div className="mb-5 flex h-11 w-11 items-center justify-center rounded-xl border border-blue-500/25 bg-blue-500/10 text-blue-400">
                <platform.icon size={20} strokeWidth={1.75} />
              </div>
              <h3 className="font-display text-xl font-medium">{platform.title}</h3>
              <p className="mt-3 text-ink-500">{platform.description}</p>
              <ul className="mt-6 space-y-3">
                {platform.points.map((point) => (
                  <li key={point} className="flex items-start gap-2.5 text-sm text-ink-300">
                    <Check size={17} className="mt-0.5 shrink-0 text-blue-400" />
                    {point}
                  </li>
                ))}
              </ul>
            </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">
            Что умеют наши боты
          </h2>

          <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {useCases.map((item) => (
              <div
                key={item.title}
                className="rounded-2xl border border-white/[0.06] bg-base-900/40 p-6"
              >
                <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">
                  <item.icon size={18} strokeWidth={1.75} />
                </div>
                <h3 className="font-medium text-ink-100">{item.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-ink-500">
                  {item.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTASection
        title="Готовы автоматизировать общение с клиентами?"
        subtitle="Опишите задачу — предложим сценарий бота и сроки разработки."
      />
    </>
  );
}