/**
 * Terms of Service Page
 */

import { type Metadata } from 'next';
import { getTranslations } from 'next-intl/server';
import { Footer } from '@/components/layout/Footer';
import { type Locale } from '@/i18n';

interface TermsPageProps {
  params: Promise<{ locale: Locale }>;
}

export async function generateMetadata({ params }: TermsPageProps): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'terms' });

  return {
    title: t('metaTitle'),
    description: t('metaDescription'),
    alternates: {
      canonical: `https://shinecode.ae/${locale}/terms`,
      languages: {
        en: `https://shinecode.ae/en/terms`,
        ar: `https://shinecode.ae/ar/terms`,
        'x-default': `https://shinecode.ae/en/terms`,
      },
    },
    openGraph: {
      title: t('metaTitle'),
      description: t('metaDescription'),
      url: `https://shinecode.ae/${locale}/terms`,
      siteName: 'ShineCode',
      images: ['https://shinecode.ae/images/frontend/socialP.webp'],
      locale: locale === 'ar' ? 'ar_AE' : 'en_AE',
    },
  };
}

export default async function TermsPage({ params }: TermsPageProps) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'terms' });

  return (
    <div className="min-h-screen bg-background flex flex-col">
      <main id="main-content" className="flex-1">
        <section className="py-16 md:py-20">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto prose prose-lg">
              <h1 className="text-4xl md:text-5xl font-bold text-ink mb-4">{t('title')}</h1>
              <p className="text-muted mb-8">{t('lastUpdated')}</p>

              <div className="space-y-8 text-muted">
                <section>
                  <h2 className="text-2xl font-bold text-ink mb-4">{t('section1Title')}</h2>
                  <p>{t('section1Text')}</p>
                </section>

                <section>
                  <h2 className="text-2xl font-bold text-ink mb-4">{t('section2Title')}</h2>
                  <p>{t('section2Text')}</p>
                </section>

                <section>
                  <h2 className="text-2xl font-bold text-ink mb-4">{t('section3Title')}</h2>
                  <p>{t('section3Text')}</p>
                </section>

                <section>
                  <h2 className="text-2xl font-bold text-ink mb-4">{t('section4Title')}</h2>
                  <p>{t('section4Text')}</p>
                </section>

                <section>
                  <h2 className="text-2xl font-bold text-ink mb-4">{t('section5Title')}</h2>
                  <p>{t('section5Text')}</p>
                </section>

                <section>
                  <h2 className="text-2xl font-bold text-ink mb-4">{t('section6Title')}</h2>
                  <p>{t('section6Text')}</p>
                </section>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer locale={locale} />
    </div>
  );
}