import type { Metadata } from "next";
import Link from "next/link";
import { ArrowUpRight, Server, Activity, Wrench, MessageSquare, Check } from "lucide-react";
import PageHero from "@/components/PageHero";
import SectionEyebrow from "@/components/SectionEyebrow";
import CTASection from "@/components/CTASection";

export const metadata: Metadata = {
  title: "IT-поддержка и инфраструктура",
  description:
    "Обслуживание IT-инфраструктуры бизнеса: сборка серверов, мониторинг, устранение сбоев, консультации.",
};

const coverage = [
  {
    icon: Server,
    title: "Обслуживание серверов",
    description: "Настройка, обновление и сопровождение серверного оборудования.",
  },
  {
    icon: Activity,
    title: "Мониторинг и профилактика",
    description: "Отслеживаем состояние систем, чтобы предупредить сбои заранее.",
  },
  {
    icon: Wrench,
    title: "Сборка и настройка оборудования",
    description: "Подбираем и настраиваем технику под задачи вашей команды.",
  },
  {
    icon: MessageSquare,
    title: "Консультации",
    description: "Помогаем принимать решения по развитию IT-инфраструктуры.",
  },
];

const formats = [
  {
    title: "Разовая задача",
    description:
      "Точечная помощь: настройка сервера, устранение конкретной проблемы, консультация.",
    points: ["Без долгосрочных обязательств", "Оценка сроков после диагностики задачи"],
  },
  {
    title: "Постоянное обслуживание",
    description:
      "Регулярное сопровождение инфраструктуры: мониторинг, обновления, приоритетная поддержка.",
    points: ["Согласованный формат и время реакции", "Профилактика вместо экстренных починок"],
  },
];

export default function SupportPage() {
  return (
    <>
      <PageHero
        eyebrow="IT-поддержка"
        title="Поддержка вашей"
        highlight="IT-инфраструктуры"
        subtitle="Обслуживаем существующую инфраструктуру бизнеса: от сборки и настройки оборудования до мониторинга и устранения сбоев."
      >
        <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 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {coverage.map((c) => (
            <div key={c.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">
                <c.icon size={18} strokeWidth={1.75} />
              </div>
              <h3 className="font-medium text-ink-100">{c.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-ink-500">
                {c.description}
              </p>
            </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 lg:grid-cols-2">
            {formats.map((f) => (
              <div
                key={f.title}
                className="rounded-2xl border border-white/[0.06] bg-base-900/50 p-8"
              >
                <h3 className="font-display text-lg font-medium">{f.title}</h3>
                <p className="mt-3 text-ink-500">{f.description}</p>
                <ul className="mt-6 space-y-3">
                  {f.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>
        </div>
      </section>

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