import Link from "next/link";
import { ArrowUpRight, ShieldCheck, Rocket, SlidersHorizontal, Headphones } from "lucide-react";
import SectionEyebrow from "@/components/SectionEyebrow";
import ServiceCard from "@/components/ServiceCard";
import FeatureBadge from "@/components/FeatureBadge";
import NetworkGraphic from "@/components/NetworkGraphic";
import CTASection from "@/components/CTASection";
import { services } from "@/config/services";

export default function HomePage() {
  return (
    <>
      <section className="relative overflow-hidden px-6 pb-20 pt-32 sm:pb-28 sm:pt-40">
        <div className="pointer-events-none absolute right-[-40px] top-10 w-[480px] max-w-[65%] opacity-60 sm:opacity-100">
          <NetworkGraphic accent="blue" className="w-full" />
        </div>

        <div className="mx-auto max-w-3xl">
          <SectionEyebrow>Технологии · Решения · Поддержка</SectionEyebrow>
          <h1 className="text-balance font-display text-4xl font-medium leading-[1.08] sm:text-6xl">
            Комплексные IT-решения{" "}
            <span className="text-gradient-blue">для вашего бизнеса</span>
          </h1>
          <p className="mt-6 max-w-xl text-lg leading-relaxed text-ink-500">
            От идеи до стабильной работы инфраструктуры: сайты, боты для
            соцсетей, CRM, серверы и техническая поддержка — в одной команде.
          </p>

          <div className="mt-9 flex flex-wrap gap-3">
            <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>
            <Link
              href="#services"
              className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.12] px-6 py-3.5 font-medium text-ink-100 transition-colors hover:bg-white/[0.05]"
            >
              Смотреть услуги
            </Link>
          </div>
        </div>

        <div className="mx-auto mt-16 grid max-w-3xl grid-cols-2 gap-6 border-t border-white/[0.06] pt-8 sm:grid-cols-4">
          {[
            ["5", "направлений услуг"],
            ["24/7", "техподдержка"],
            ["99.9%", "SLA на серверах"],
            ["1", "команда на весь проект"],
          ].map(([value, label]) => (
            <div key={label}>
              <p className="font-display text-2xl text-ink-100">{value}</p>
              <p className="mt-1 text-sm text-ink-500">{label}</p>
            </div>
          ))}
        </div>
      </section>

      <section id="services" className="scroll-mt-24 px-6 py-20">
        <div className="mx-auto max-w-6xl">
          <div className="max-w-2xl">
            <SectionEyebrow>Что мы делаем</SectionEyebrow>
            <h2 className="font-display text-3xl font-medium sm:text-4xl">
              Всё для роста вашего бизнеса — в одном месте
            </h2>
            <p className="mt-4 text-ink-500">
              Каждое направление можно заказать отдельно или как часть общего
              решения — от первого сайта до полноценной IT-инфраструктуры.
            </p>
          </div>

          <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {services.map((service) => (
              <ServiceCard key={service.key} service={service} />
            ))}
          </div>
        </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-8 sm:grid-cols-2 lg:grid-cols-4">
            <FeatureBadge
              icon={ShieldCheck}
              title="Надёжность"
              description="Гарантия качества и стабильной работы решений"
            />
            <FeatureBadge
              icon={Rocket}
              title="Скорость"
              description="Быстрое выполнение задач и запуск проектов"
            />
            <FeatureBadge
              icon={SlidersHorizontal}
              title="Индивидуальный подход"
              description="Решения под конкретные задачи вашего бизнеса"
            />
            <FeatureBadge
              icon={Headphones}
              title="Поддержка 24/7"
              description="Мы всегда на связи и готовы помочь"
            />
          </div>
        </div>
      </section>

      <CTASection />
    </>
  );
}