/**
 * About Page
 * 
 * Company information and mission
 */

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

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

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

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

export default async function AboutPage({ params }: AboutPageProps) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'about' });

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

        {/* Mission */}
        <section className="py-16 md:py-20">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto">
              <h2 className="text-3xl font-bold text-ink mb-6">{t('missionTitle')}</h2>
              <p className="text-lg text-muted mb-4">{t('missionText')}</p>
            </div>
          </div>
        </section>

        {/* Values */}
        <section className="py-16 md:py-20 bg-surface-soft">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <h2 className="text-3xl font-bold text-ink mb-12 text-center">{t('valuesTitle')}</h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div className="text-center">
                  <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-sage-soft flex items-center justify-center">
                    <svg className="w-8 h-8 text-sage" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <h3 className="text-lg font-semibold text-ink mb-2">{t('value1Title')}</h3>
                  <p className="text-muted">{t('value1Text')}</p>
                </div>
                <div className="text-center">
                  <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-peach-soft flex items-center justify-center">
                    <svg className="w-8 h-8 text-peach" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                  </div>
                  <h3 className="text-lg font-semibold text-ink mb-2">{t('value2Title')}</h3>
                  <p className="text-muted">{t('value2Text')}</p>
                </div>
                <div className="text-center">
                  <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-sage-soft flex items-center justify-center">
                    <svg className="w-8 h-8 text-sage" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                  </div>
                  <h3 className="text-lg font-semibold text-ink mb-2">{t('value3Title')}</h3>
                  <p className="text-muted">{t('value3Text')}</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* How it works */}
        <section className="py-16 md:py-20">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto">
              <h2 className="text-3xl font-bold text-ink mb-6">{t('howTitle')}</h2>
              <p className="text-lg text-muted mb-8">{t('howText')}</p>
              <ol className="space-y-4">
                <li className="flex gap-4">
                  <span className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-600 text-white flex items-center justify-center font-bold">1</span>
                  <div>
                    <h4 className="font-semibold text-ink mb-1">{t('step1Title')}</h4>
                    <p className="text-muted">{t('step1Text')}</p>
                  </div>
                </li>
                <li className="flex gap-4">
                  <span className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-600 text-white flex items-center justify-center font-bold">2</span>
                  <div>
                    <h4 className="font-semibold text-ink mb-1">{t('step2Title')}</h4>
                    <p className="text-muted">{t('step2Text')}</p>
                  </div>
                </li>
                <li className="flex gap-4">
                  <span className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-600 text-white flex items-center justify-center font-bold">3</span>
                  <div>
                    <h4 className="font-semibold text-ink mb-1">{t('step3Title')}</h4>
                    <p className="text-muted">{t('step3Text')}</p>
                  </div>
                </li>
              </ol>
            </div>
          </div>
        </section>
      </main>
      <Footer locale={locale} />
    </div>
  );
}