import type { Metadata } from "next";
import Link from "next/link";
import {
  ArrowUpRight,
  Check,
  MapPin,
  Globe,
  Gauge,
  Settings2,
  Cpu,
} from "lucide-react";
import PageHero from "@/components/PageHero";
import SectionEyebrow from "@/components/SectionEyebrow";
import CTASection from "@/components/CTASection";

export const metadata: Metadata = {
  title: "Хостинг и серверы",
  description:
    "VDS/VPS на собственных серверах в Астрахани и у партнёров по всему миру. NVMe, SLA 99.9%, защита от DDoS.",
};

const features = [
  {
    icon: MapPin,
    title: "Собственный дата-центр",
    description: "Современное оборудование в нашем дата-центре в Астрахани.",
  },
  {
    icon: Globe,
    title: "Локации по всему миру",
    description: "Европа, Азия, США и другие регионы у партнёров.",
  },
  {
    icon: Gauge,
    title: "Высокая производительность",
    description: "NVMe-диски и мощные процессоры для стабильной нагрузки.",
  },
  {
    icon: Settings2,
    title: "Гибкие конфигурации",
    description: "Соберём сервер под ваши задачи, а не по шаблону.",
  },
];

const specs = [
  "От 1 до 32 vCPU",
  "От 1 до 128 GB RAM",
  "NVMe SSD",
  "Linux / Windows",
  "SLA 99.9%",
  "Защита от DDoS",
  "Резервное копирование",
  "Панель управления и API",
];

export default function HostingPage() {
  return (
    <>
      <PageHero
        accent="green"
        eyebrow="Хостинг и серверы"
        title="Надёжные серверы"
        highlight="по всему миру"
        subtitle="Предоставляем мощные и стабильные VDS/VPS — на собственных серверах в Астрахани и в других локациях у проверенных партнёров."
      >
        <Link
          href="/contacts"
          className="inline-flex items-center gap-1.5 rounded-full bg-green-500 px-6 py-3.5 font-medium text-base-950 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">
          {features.map((f) => (
            <div key={f.title}>
              <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg border border-green-500/25 bg-green-500/10 text-green-400">
                <f.icon size={18} strokeWidth={1.75} />
              </div>
              <h3 className="font-medium text-ink-100">{f.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-ink-500">
                {f.description}
              </p>
            </div>
          ))}
        </div>
      </section>

      <section className="px-6 py-20">
        <div className="mx-auto max-w-4xl rounded-3xl border border-green-500/20 bg-green-500/[0.04] p-10">
          <div className="flex items-center gap-3">
            <div className="flex h-11 w-11 items-center justify-center rounded-xl border border-green-500/25 bg-green-500/10 text-green-400">
              <Cpu size={20} strokeWidth={1.75} />
            </div>
            <h2 className="font-display text-xl font-medium">
              VDS/VPS от LabNetHub
            </h2>
          </div>
          <div className="mt-8 grid gap-4 sm:grid-cols-2">
            {specs.map((spec) => (
              <div key={spec} className="flex items-start gap-2.5">
                <Check size={17} className="mt-0.5 shrink-0 text-green-400" />
                <span className="text-ink-300">{spec}</span>
              </div>
            ))}
          </div>
          <p className="mt-8 text-sm text-ink-500">
            Стоимость зависит от конфигурации и локации — рассчитаем тариф под
            вашу задачу.
          </p>
        </div>
      </section>

      <section className="px-6 pb-4">
        <div className="mx-auto max-w-6xl">
          <SectionEyebrow accent="green">Размещение проектов</SectionEyebrow>
          <p className="max-w-2xl text-ink-500">
            Размещаем сайты и боты, разработанные нашей командой, на
            собственных серверах или у партнёров — без необходимости искать
            хостинг отдельно и разбираться в настройке сервера самостоятельно.
          </p>
        </div>
      </section>

      <CTASection
        title="Нужен сервер под проект?"
        subtitle="Подберём конфигурацию и локацию, поможем с переносом и настройкой."
        accent="green"
      />
    </>
  );
}