/**
 * Contact Page
 */

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

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

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

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

export default async function ContactPage({ params }: ContactPageProps) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'contact' });

  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-3xl mx-auto">
              <h1 className="text-4xl md:text-5xl font-bold text-ink mb-6">{t('title')}</h1>
              <p className="text-lg text-muted mb-12">{t('subtitle')}</p>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                <div className="bg-surface p-6 rounded-lg border border-border">
                  <div className="w-12 h-12 mb-4 rounded-full bg-brand-50 flex items-center justify-center">
                    <svg className="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                  </div>
                  <h3 className="text-lg font-semibold text-ink mb-2">{t('emailTitle')}</h3>
                  <a href="mailto:support@shinecode.ae" className="text-brand-600 hover:text-brand-700">
                    support@shinecode.ae
                  </a>
                </div>

                <div className="bg-surface p-6 rounded-lg border border-border">
                  <div className="w-12 h-12 mb-4 rounded-full bg-brand-50 flex items-center justify-center">
                    <svg className="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                    </svg>
                  </div>
                  <h3 className="text-lg font-semibold text-ink mb-2">{t('phoneTitle')}</h3>
                  <a href="tel:+971501234567" className="text-brand-600 hover:text-brand-700">
                    +971 50 123 4567
                  </a>
                </div>
              </div>

              <div className="bg-surface-soft p-8 rounded-lg">
                <h2 className="text-2xl font-bold text-ink mb-4">{t('supportTitle')}</h2>
                <p className="text-muted mb-6">{t('supportText')}</p>
                <div className="space-y-4">
                  <div>
                    <h4 className="font-semibold text-ink mb-2">{t('hoursTitle')}</h4>
                    <p className="text-muted">{t('hoursText')}</p>
                  </div>
                  <div>
                    <h4 className="font-semibold text-ink mb-2">{t('responseTitle')}</h4>
                    <p className="text-muted">{t('responseText')}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer locale={locale} />
    </div>
  );
}