import Link from "next/link";
import type { Metadata } from "next";
import { SITE, type Lang } from "@/lib/config";
import { fetchOpenJobs } from "@/lib/careers";
import { careersEn } from "@/lib/config/translations/modules/pages/careers.en";
import { careersAr } from "@/lib/config/translations/modules/pages/careers.ar";
import { CareersClient } from "./CareersClient";

export const revalidate = SITE.revalidateSeconds;

export async function generateStaticParams() {
  return [{ lang: "ar" }, { lang: "en" }];
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const { lang } = params;
  const isAr = lang === "ar";
  const copy = isAr ? careersAr : careersEn;

  const title = `${copy.careersHeroTitle} | ${SITE.brand}`;
  const description = copy.careersHeroDescription;

  return {
    title,
    description,
    alternates: {
      canonical: `${`https://${SITE.domain}`}/${lang}/careers`,
      languages: {
        ar: `${`https://${SITE.domain}`}/ar/careers`,
        en: `${`https://${SITE.domain}`}/en/careers`,
      },
    },
  };
}

export default async function CareersPage({
  params,
}: {
  params: { lang: Lang };
}) {
  const { lang } = params;
  const isAr = lang === "ar";
  const copy = isAr ? careersAr : careersEn;
  const jobs = await fetchOpenJobs();

  const cultureValues = [
    {
      title: copy.cultureInnovationTitle,
      desc: copy.cultureInnovationDesc,
      icon: "💡",
    },
    {
      title: copy.cultureCollaborationTitle,
      desc: copy.cultureCollaborationDesc,
      icon: "🤝",
    },
    {
      title: copy.cultureGrowthTitle,
      desc: copy.cultureGrowthDesc,
      icon: "📈",
    },
    {
      title: copy.cultureImpactTitle,
      desc: copy.cultureImpactDesc,
      icon: "🎯",
    },
  ];

  const benefits = [
    {
      title: copy.benefitsCompensationTitle,
      desc: copy.benefitsCompensationDesc,
      icon: "💰",
    },
    {
      title: copy.benefitsFlexibleTitle,
      desc: copy.benefitsFlexibleDesc,
      icon: "🏠",
    },
    {
      title: copy.benefitsHealthTitle,
      desc: copy.benefitsHealthDesc,
      icon: "🏥",
    },
    {
      title: copy.benefitsLearningTitle,
      desc: copy.benefitsLearningDesc,
      icon: "📚",
    },
    { title: copy.benefitsTeamTitle, desc: copy.benefitsTeamDesc, icon: "🎉" },
    { title: copy.benefitsTechTitle, desc: copy.benefitsTechDesc, icon: "💻" },
  ];

  const processSteps = [
    { title: copy.processStep1Title, desc: copy.processStep1Desc },
    { title: copy.processStep2Title, desc: copy.processStep2Desc },
    { title: copy.processStep3Title, desc: copy.processStep3Desc },
    { title: copy.processStep4Title, desc: copy.processStep4Desc },
    { title: copy.processStep5Title, desc: copy.processStep5Desc },
  ];

  return (
    <main className="min-h-screen" dir={isAr ? "rtl" : "ltr"}>
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white py-20 md:py-28">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(16,185,129,0.1),transparent_50%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,rgba(20,184,166,0.1),transparent_50%)]" />

        <div className="container mx-auto px-6 relative z-10">
          <div className="max-w-4xl mx-auto text-center space-y-6">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-black leading-tight bg-clip-text text-transparent bg-gradient-to-r from-brand-green via-emerald-400 to-teal-400 animate-fade-slide">
              {copy.careersHeroTitle}
            </h1>
            <p
              className="text-xl md:text-2xl text-emerald-100 font-semibold animate-fade-slide"
              style={{ animationDelay: "0.1s" }}
            >
              {copy.careersHeroLead}
            </p>
            <p
              className="text-base md:text-lg text-neutral-300 leading-relaxed max-w-3xl mx-auto animate-fade-slide"
              style={{ animationDelay: "0.2s" }}
            >
              {copy.careersHeroDescription}
            </p>
            <div
              className="pt-4 animate-fade-slide"
              style={{ animationDelay: "0.3s" }}
            >
              <a
                href="#open-positions"
                className="inline-flex items-center justify-center px-8 py-4 bg-brand-green text-white text-lg font-semibold rounded-xl hover:bg-green-600 transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-brand-green/50"
              >
                {copy.careersCtaButton}
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Culture Section */}
      <section className="py-20 bg-white dark:bg-slate-900">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-black text-slate-900 dark:text-white mb-4">
              {copy.cultureTitle}
            </h2>
            <p className="text-lg text-neutral-600 dark:text-neutral-400">
              {copy.cultureSubtitle}
            </p>
          </div>

          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-2 max-w-5xl mx-auto">
            {cultureValues.map((value, idx) => (
              <div
                key={idx}
                className="group relative bg-gradient-to-br from-slate-50 to-white dark:from-slate-800 dark:to-slate-900 rounded-2xl p-8 border border-slate-200 dark:border-slate-700 hover:border-brand-green/50 dark:hover:border-brand-green/50 transition-all duration-300 hover:shadow-xl hover:shadow-brand-green/10 transform hover:-translate-y-1"
                style={{ animationDelay: `${idx * 0.1}s` }}
              >
                <div className="text-5xl mb-4 transform group-hover:scale-110 transition-transform duration-300">
                  {value.icon}
                </div>
                <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-3">
                  {value.title}
                </h3>
                <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
                  {value.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-20 bg-gradient-to-b from-slate-50 to-white dark:from-slate-950 dark:to-slate-900">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-black text-slate-900 dark:text-white mb-4">
              {copy.benefitsTitle}
            </h2>
            <p className="text-lg text-neutral-600 dark:text-neutral-400">
              {copy.benefitsSubtitle}
            </p>
          </div>

          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto">
            {benefits.map((benefit, idx) => (
              <div
                key={idx}
                className="group relative bg-white dark:bg-slate-800 rounded-2xl p-8 border border-slate-200 dark:border-slate-700 hover:border-brand-green dark:hover:border-brand-green transition-all duration-300 hover:shadow-xl hover:shadow-brand-green/10 transform hover:-translate-y-1"
                style={{ animationDelay: `${idx * 0.1}s` }}
              >
                <div className="text-4xl mb-4 transform group-hover:scale-110 group-hover:rotate-6 transition-all duration-300">
                  {benefit.icon}
                </div>
                <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-3">
                  {benefit.title}
                </h3>
                <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
                  {benefit.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Open Positions Section */}
      <section id="open-positions" className="py-20 bg-white dark:bg-slate-900">
        <div className="container mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-black text-slate-900 dark:text-white mb-4">
              {copy.openPositionsTitle}
            </h2>
            <p className="text-lg text-neutral-600 dark:text-neutral-400">
              {copy.openPositionsSubtitle}
            </p>
          </div>

          {/* Job Listings */}
          <div className="max-w-6xl mx-auto">
            <CareersClient lang={lang} copy={copy} jobs={jobs} />
          </div>
        </div>
      </section>

      {/* Hiring Process Section */}
      <section className="py-20 bg-gradient-to-b from-slate-50 to-white dark:from-slate-950 dark:to-slate-900">
        <div className="container mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-black text-slate-900 dark:text-white mb-4">
              {copy.processTitle}
            </h2>
            <p className="text-lg text-neutral-600 dark:text-neutral-400">
              {copy.processSubtitle}
            </p>
          </div>

          <div className="max-w-4xl mx-auto">
            <div className="relative">
              {/* Center line */}
              <div
                className={`absolute top-0 bottom-0 w-1 bg-gradient-to-b from-brand-green via-emerald-400 to-teal-400 ${isAr ? "right-1/2" : "left-1/2"} transform -translate-x-1/2 hidden md:block`}
              />

              {/* Steps */}
              <div className="space-y-12">
                {processSteps.map((step, idx) => (
                  <div
                    key={idx}
                    className={`relative flex items-center gap-8 ${isAr ? "md:flex-row-reverse" : ""} ${idx % 2 === 0 ? "md:flex-row-reverse" : ""}`}
                  >
                    {/* Step number badge */}
                    <div
                      className={`flex-shrink-0 w-16 h-16 rounded-full bg-gradient-to-br from-brand-green to-emerald-600 flex items-center justify-center text-white font-black text-2xl shadow-lg z-10 ${idx % 2 === 0 ? (isAr ? "md:ml-auto" : "md:mr-auto") : isAr ? "md:mr-auto" : "md:ml-auto"}`}
                    >
                      {idx + 1}
                    </div>

                    {/* Step content */}
                    <div
                      className={`flex-1 bg-white dark:bg-slate-800 rounded-2xl p-6 md:p-8 border border-slate-200 dark:border-slate-700 hover:border-brand-green dark:hover:border-brand-green transition-all duration-300 hover:shadow-xl hover:shadow-brand-green/10 transform hover:-translate-y-1 ${idx % 2 === 0 ? "md:pr-12 rtl:md:pr-0 rtl:md:pl-12" : "md:pl-12 rtl:md:pl-0 rtl:md:pr-12"}`}
                    >
                      <h3 className="text-xl md:text-2xl font-bold text-slate-900 dark:text-white mb-3">
                        {step.title}
                      </h3>
                      <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
                        {step.desc}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA Section */}
      <section className="py-20 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(16,185,129,0.15),transparent_50%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,rgba(20,184,166,0.15),transparent_50%)]" />

        <div className="container mx-auto px-6 relative z-10">
          <div className="max-w-4xl mx-auto text-center space-y-6">
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-black leading-tight bg-clip-text text-transparent bg-gradient-to-r from-brand-green via-emerald-400 to-teal-400">
              {copy.ctaTitle}
            </h2>
            <p className="text-xl md:text-2xl text-emerald-100 font-semibold">
              {copy.ctaSubtitle}
            </p>
            <p className="text-base md:text-lg text-neutral-300 leading-relaxed max-w-2xl mx-auto">
              {copy.ctaDescription}
            </p>

            <div className="pt-6 space-y-4">
              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                <Link
                  href={`/${lang}/contact`}
                  className="inline-flex items-center justify-center px-8 py-4 bg-brand-green text-white text-lg font-semibold rounded-xl hover:bg-green-600 transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-brand-green/50"
                >
                  {copy.ctaButton}
                </Link>
                <a
                  href={`mailto:${copy.ctaEmail}`}
                  className="inline-flex items-center justify-center px-8 py-4 border-2 border-brand-green/30 text-brand-green text-lg font-semibold rounded-xl hover:bg-brand-green/10 hover:border-brand-green/50 transition-all duration-200"
                >
                  {copy.ctaEmail}
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}