import { type Metadata } from 'next';
import Link from 'next/link';
import { Footer } from '@/components/layout/Footer';
import { type Locale } from '@/i18n';
import { Sparkles, Briefcase, HeartHandshake, Award, ArrowRight } from 'lucide-react';

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

export async function generateMetadata({ params }: CareersPageProps): Promise<Metadata> {
  const { locale } = await params;
  const isAr = locale === 'ar';

  return {
    title: isAr ? 'الوظائف والفرص المهنية | ShineCode' : 'Careers & Opportunities | ShineCode',
    description: isAr
      ? 'انضم إلى فريق ShineCode، منصة خدمات التجميل والعناية الفاخرة الرائدة في الإمارات.'
      : 'Join the ShineCode team, the leading on-demand luxury beauty and wellness platform in the UAE.',
    alternates: {
      canonical: `https://shinecode.ae/${locale}/careers`,
      languages: {
        en: `https://shinecode.ae/en/careers`,
        ar: `https://shinecode.ae/ar/careers`,
        'x-default': `https://shinecode.ae/en/careers`,
      },
    },
    openGraph: {
      title: isAr ? 'الوظائف والفرص المهنية | ShineCode' : 'Careers & Opportunities | ShineCode',
      description: isAr
        ? 'انضم إلى فريق ShineCode، منصة خدمات التجميل والعناية الفاخرة الرائدة في الإمارات.'
        : 'Join the ShineCode team, the leading on-demand luxury beauty and wellness platform in the UAE.',
      url: `https://shinecode.ae/${locale}/careers`,
      siteName: 'ShineCode',
      images: ['https://shinecode.ae/images/frontend/socialP.webp'],
      locale: isAr ? 'ar_AE' : 'en_AE',
    },
  };
}

export default async function CareersPage({ params }: CareersPageProps) {
  const { locale } = await params;
  const isAr = locale === 'ar';

  return (
    <div className="min-h-screen bg-background flex flex-col">
      <main id="main-content" className="flex-1 py-16 md:py-20">
        <div className="container mx-auto px-4 max-w-4xl space-y-12">
          {/* Header */}
          <div className="text-center space-y-4 max-w-2xl mx-auto">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-50 dark:bg-brand-950/50 border border-brand-200 dark:border-brand-800 text-brand-600 dark:text-brand-400 text-xs font-semibold">
              <Sparkles className="w-3.5 h-3.5" />
              <span>{isAr ? 'انضم إلى فريقنا' : 'We Are Hiring'}</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-ink tracking-tight">
              {isAr ? 'اصنع مستقبلك مع ShineCode' : 'Build the Future of Beauty with ShineCode'}
            </h1>
            <p className="text-muted text-base md:text-lg leading-relaxed">
              {isAr
                ? 'نحن نبحث دائماً عن المبدعين والشغوفين في مجالات التكنولوجيا، العمليات، والتجميل لإعادة تعريف تجربة العناية الشخصية في الشرق الأوسط.'
                : 'We are always looking for passionate innovators across technology, operations, and beauty to redefine personal care in the Middle East.'}
            </p>
          </div>

          {/* Pillars Grid */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="p-6 rounded-2xl bg-surface border border-subtle space-y-3">
              <div className="w-10 h-10 rounded-xl bg-brand-500/10 flex items-center justify-center text-brand-500">
                <Briefcase className="w-5 h-5" />
              </div>
              <h3 className="font-bold text-lg text-ink">
                {isAr ? 'بيئة عمل مرنة ومحفزة' : 'Flexible & Inspiring'}
              </h3>
              <p className="text-sm text-muted leading-relaxed">
                {isAr
                  ? 'ثقافة عمل تقدر الابتكار، التعلم المستمر، والتوازن بين الحياة والعمل.'
                  : 'A collaborative culture that values innovation, continuous growth, and high impact.'}
              </p>
            </div>

            <div className="p-6 rounded-2xl bg-surface border border-subtle space-y-3">
              <div className="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-500">
                <HeartHandshake className="w-5 h-5" />
              </div>
              <h3 className="font-bold text-lg text-ink">
                {isAr ? 'تأثير حقيقي' : 'Real Impact'}
              </h3>
              <p className="text-sm text-muted leading-relaxed">
                {isAr
                  ? 'تمكين مئات الخبراء والآلاف من العملاء يومياً من خلال التكنولوجيا الحديثة.'
                  : 'Empowering hundreds of professionals and delighting thousands of clients daily.'}
              </p>
            </div>

            <div className="p-6 rounded-2xl bg-surface border border-subtle space-y-3">
              <div className="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center text-amber-500">
                <Award className="w-5 h-5" />
              </div>
              <h3 className="font-bold text-lg text-ink">
                {isAr ? 'مكافآت تنافسية' : 'Competitive Rewards'}
              </h3>
              <p className="text-sm text-muted leading-relaxed">
                {isAr
                  ? 'حزم تعويضات مجزية ومسارات تطور مهني سريعة تناسب طموحاتك.'
                  : 'Top-tier compensation packages and rapid career progression opportunities.'}
              </p>
            </div>
          </div>

          {/* CTA Box */}
          <div className="p-8 md:p-10 rounded-3xl bg-zinc-900 text-white text-center space-y-6 shadow-xl">
            <h2 className="text-2xl md:text-3xl font-bold">
              {isAr ? 'هل أنت خبير تجميل أو معالج محترف؟' : 'Are You a Beauty Expert or Therapist?'}
            </h2>
            <p className="text-zinc-300 max-w-xl mx-auto text-sm md:text-base leading-relaxed">
              {isAr
                ? 'انضم إلى شبكة نخبة الخبراء المعتمدين في ShineCode وزد دخلك بمرونة كاملة وحرية في اختيار مواعيد عملك.'
                : 'Join our elite verified beauty pro network across Dubai, Sharjah, and Ajman and grow your revenue with total schedule flexibility.'}
            </p>
            <div className="flex flex-wrap items-center justify-center gap-4 pt-2">
              <Link
                href={`/${locale}/partner`}
                className="inline-flex items-center gap-2 bg-brand-500 hover:bg-brand-600 text-white font-bold px-6 py-3 rounded-xl transition-colors shadow-md"
              >
                <span>{isAr ? 'انضم كشريك نجاح' : 'Apply as a Pro Partner'}</span>
                <ArrowRight className="w-4 h-4 rtl:rotate-180" />
              </Link>
              <a
                href="mailto:contact@shinecode.ae?subject=Career Opportunity Inquiry"
                className="inline-flex items-center gap-2 bg-zinc-800 hover:bg-zinc-700 text-white font-medium px-6 py-3 rounded-xl transition-colors"
              >
                <span>{isAr ? 'أرسل سيرتك الذاتية' : 'Email Your Resume'}</span>
              </a>
            </div>
          </div>
        </div>
      </main>
      <Footer locale={locale} />
    </div>
  );
}