import Header from '../../components/Header.jsx';
import Footer from '../../components/Footer.jsx';
import Services from '../../components/sections/Services.jsx';
import { serverApi } from '../../lib/serverApi.js';
import { getOrganizationSchema } from '../../lib/schema.js';

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://top-sysops.ru';

export const metadata = {
  title: 'Услуги IT-аутсорсинга и техподдержки — прайс-лист',
  description:
    'IT-аутсорсинг, техподдержка, кибербезопасность, администрирование серверов и баз данных, сетевая инфраструктура, облачные решения, ИИ и автоматизация. Актуальные цены.',
  alternates: { canonical: '/uslugi' },
};

export default async function ServicesPage() {
  const [services, orgSchema] = await Promise.all([serverApi.getServices(), getOrganizationSchema()]);

  const itemListSchema = {
    '@context': 'https://schema.org',
    '@type': 'ItemList',
    itemListElement: services.map((cat, i) => ({
      '@type': 'ListItem',
      position: i + 1,
      name: cat.title,
      url: `${SITE_URL}/uslugi/${cat.slug}`,
    })),
  };

  return (
    <div>
      {/* eslint-disable-next-line react/no-danger */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(orgSchema) }} />
      {/* eslint-disable-next-line react/no-danger */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(itemListSchema) }} />
      <Header />
      <Services categories={services} headingLevel="h1" />
      <Footer />
    </div>
  );
}