import Link from 'next/link';
import { ArrowRight, Users, CalendarDays, MapPin, ShieldCheck, Clock, Bot } from 'lucide-react';
import Header from '../../components/Header.jsx';
import Footer from '../../components/Footer.jsx';
import Reveal from '../../components/Reveal.jsx';
import SectionHeading from '../../components/SectionHeading.jsx';
import { getOrganizationSchema } from '../../lib/schema.js';

export const metadata = {
  title: 'О компании',
  description:
    'TopSysOps — IT-аутсорсинг и техподдержка с 2023 года. Команда 20+ специалистов, штаб-квартира в Санкт-Петербурге, работаем с клиентами по всей России.',
  alternates: { canonical: '/o-kompanii' },
};

const FACTS = [
  { icon: CalendarDays, label: 'На рынке с', value: '2023 года' },
  { icon: Users, label: 'В команде', value: '20+ специалистов' },
  { icon: MapPin, label: 'Штаб-квартира', value: 'Санкт-Петербург' },
];

const DIFFERENTIATORS = [
  {
    icon: Clock,
    title: 'Быстрый отклик',
    text: 'На тарифе «Премиум» среднее время реакции на заявку — около 15 минут, поддержка доступна 24/7.',
  },
  {
    icon: ShieldCheck,
    title: 'Конфиденциальность',
    text: 'Перед началом работ подписываем NDA и используем защищённые каналы доступа к инфраструктуре клиента.',
  },
  {
    icon: Bot,
    title: 'Личный кабинет с ИИ',
    text: 'Клиенты получают личный кабинет с перепиской с командой и ИИ-ассистентом, отвечающим на вопросы 24/7.',
  },
  {
    icon: MapPin,
    title: 'Вся Россия удалённо',
    text: 'Большинство работ выполняем удалённо для клиентов по всей стране, выезд специалиста — по Санкт-Петербургу.',
  },
];

export default async function AboutPage() {
  const orgSchema = await getOrganizationSchema();

  return (
    <div>
      {/* eslint-disable-next-line react/no-danger */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(orgSchema) }} />
      <Header />
      <section className="max-w-4xl mx-auto px-5 sm:px-8 pt-16 pb-10">
        <Reveal>
          <p className="text-xs uppercase tracking-widest text-emerald-500 mb-4 font-mono">&gt; top-sysops.ru --about-company</p>
          <h1 className="text-2xl sm:text-3xl font-bold mb-6 font-display">
            TopSysOps — IT-аутсорсинг и техподдержка для бизнеса
          </h1>
          <p className="text-base text-slate-600 dark:text-slate-400 max-w-2xl">
            Мы занимаемся IT-аутсорсингом, техподдержкой инфраструктуры, кибербезопасностью, администрированием
            серверов и баз данных, а также автоматизацией процессов с помощью ИИ. Наша цель — чтобы за IT-инфраструктуру
            бизнеса отвечала команда, а не один перегруженный сисадмин.
          </p>
        </Reveal>
      </section>

      <section className="max-w-4xl mx-auto px-5 sm:px-8 pb-16">
        <div className="grid sm:grid-cols-3 gap-5">
          {FACTS.map((f, i) => {
            const Icon = f.icon;
            return (
              <Reveal key={f.label} delay={i * 60}>
                <div className="h-full rounded-lg border p-5 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
                  <Icon className="h-5 w-5 text-emerald-500 mb-3" />
                  <div className="text-xs text-slate-400 dark:text-slate-500 mb-1">{f.label}</div>
                  <div className="font-bold font-display">{f.value}</div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </section>

      <section className="max-w-4xl mx-auto px-5 sm:px-8 pb-20">
        <SectionHeading eyebrow="why --us" title="Почему выбирают нас" />
        <div className="grid sm:grid-cols-2 gap-5">
          {DIFFERENTIATORS.map((d, i) => {
            const Icon = d.icon;
            return (
              <Reveal key={d.title} delay={i * 60}>
                <div className="h-full rounded-lg border p-5 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
                  <Icon className="h-5 w-5 text-emerald-500 mb-3" />
                  <h3 className="font-bold mb-1 font-display text-[15px]">{d.title}</h3>
                  <p className="text-xs text-slate-500 dark:text-slate-400">{d.text}</p>
                </div>
              </Reveal>
            );
          })}
        </div>
      </section>

      <section className="max-w-4xl mx-auto px-5 sm:px-8 pb-20">
        <Reveal>
          <div className="rounded-lg border p-6 sm:p-8 flex flex-col sm:flex-row items-start sm:items-center gap-6 justify-between bg-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-900">
            <div>
              <h3 className="font-bold text-lg mb-2 font-display">Готовы обсудить вашу задачу?</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400">
                Посмотрите услуги и цены или сразу оставьте заявку — свяжемся в течение рабочего дня.
              </p>
            </div>
            <div className="flex gap-3 flex-shrink-0">
              <Link
                href="/uslugi"
                className="inline-flex items-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium border border-slate-300 dark:border-slate-700 hover:bg-white dark:hover:bg-slate-900 transition-colors whitespace-nowrap"
              >
                Услуги
              </Link>
              <Link
                href="/kontakty"
                className="inline-flex items-center gap-2 px-4 py-2.5 rounded-md bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 transition-colors whitespace-nowrap"
              >
                Оставить заявку <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
          </div>
        </Reveal>
      </section>
      <Footer />
    </div>
  );
}