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

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

const offers = [
  {
    title: "Сайт-визитка",
    description:
      "Компактный сайт на 1–5 страниц: рассказать о компании, показать услуги и получить первые заявки.",
    points: [
      "Адаптивная вёрстка под любые экраны",
      "Форма заявки и контакты на видном месте",
      "Быстрый запуск — от нескольких дней",
    ],
  },
  {
    title: "Корпоративный сайт под ключ",
    description:
      "Полноценный сайт для компании: каталог, блог, личный кабинет, интеграции с CRM и сервисами.",
    points: [
      "Структура под задачи бизнеса, а не шаблон",
      "SEO-оптимизация и подготовка к продвижению",
      "Интеграция с CRM, ботами и аналитикой",
    ],
  },
];

const steps = [
  {
    n: "01",
    title: "Бриф",
    description: "Обсуждаем задачи бизнеса, аудиторию и нужный результат.",
  },
  {
    n: "02",
    title: "Прототип и дизайн",
    description: "Собираем структуру страниц и визуальный стиль сайта.",
  },
  {
    n: "03",
    title: "Разработка",
    description: "Вёрстка и программирование с адаптацией под все устройства.",
  },
  {
    n: "04",
    title: "Тестирование",
    description: "Проверяем работу форм, скорость и корректность на разных устройствах.",
  },
  {
    n: "05",
    title: "Запуск и поддержка",
    description: "Публикуем сайт и остаёмся на связи для доработок.",
  },
];

const included = [
  "Адаптивная вёрстка под мобильные, планшеты и десктоп",
  "SEO-оптимизация: метатеги, семантическая разметка, скорость загрузки",
  "Интеграция форм обратной связи с Telegram, email или CRM",
  "Подключение аналитики (Яндекс.Метрика, Google Analytics)",
  "Настройка домена, SSL-сертификата и хостинга",
  "Инструкция по управлению сайтом после запуска",
];

export default function WebsitesPage() {
  return (
    <>
      <PageHero
        eyebrow="Разработка сайтов"
        title="Сайты, которые"
        highlight="работают на бизнес"
        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>
        <Link
          href="#process"
          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>
      </PageHero>

      <section className="px-6 py-20">
        <div className="mx-auto grid max-w-6xl gap-5 lg:grid-cols-2">
          {offers.map((offer) => (
            <div
              key={offer.title}
              className="rounded-2xl border border-white/[0.06] bg-base-900/50 p-8"
            >
              <h3 className="font-display text-xl font-medium">{offer.title}</h3>
              <p className="mt-3 text-ink-500">{offer.description}</p>
              <ul className="mt-6 space-y-3">
                {offer.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 id="process" className="scroll-mt-24 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-8 sm:grid-cols-2 lg:grid-cols-5">
            {steps.map((step) => (
              <div key={step.n}>
                <p className="font-mono text-sm text-blue-400">{step.n}</p>
                <h3 className="mt-2 font-display text-lg font-medium">
                  {step.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-ink-500">
                  {step.description}
                </p>
              </div>
            ))}
          </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-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 />
    </>
  );
}