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

export const metadata = {
  title: 'Частые вопросы об IT-аутсорсинге и услугах',
  description: 'Ответы на частые вопросы об IT-аутсорсинге, техподдержке, оплате услуг и конфиденциальности данных TopSysOps.',
};

export default async function FaqPage() {
  const faqs = await serverApi.getFaqs();

  const faqSchema =
    faqs.length > 0
      ? {
          '@context': 'https://schema.org',
          '@type': 'FAQPage',
          mainEntity: faqs.map((f) => ({
            '@type': 'Question',
            name: f.question,
            acceptedAnswer: { '@type': 'Answer', text: f.answer },
          })),
        }
      : null;

  return (
    <div>
      {faqSchema && (
        // eslint-disable-next-line react/no-danger
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }} />
      )}
      <Header />
      <Faq faqs={faqs} />
      <Footer />
    </div>
  );
}