import Link from "next/link";
import { Metadata } from "next";
import classNames from "classnames";
import JsonLd from "@/components/JsonLd";
import { SITE, UI, type Lang } from "@/lib/config";

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";

  return {
    title: isAr ? `كيف نعمل | ${SITE.brand}` : `How It Works | ${SITE.brand}`,
    description: isAr
      ? "اكتشف كيف تمكن موعدي الأعمال من تقديم خدمة حجز المواعيد عبر واتساب لعملائها. خطوات بسيطة: الإعداد، التكامل، الحجز، الإدارة."
      : "Discover how Mawidi enables businesses to provide WhatsApp appointment booking services to their customers. Simple steps: Setup, Integration, Booking, Management.",
    alternates: {
      canonical: `/${lang}/how-it-works`,
      languages: {
        ar: "/ar/how-it-works",
        en: "/en/how-it-works",
      },
    },
    openGraph: {
      title: isAr ? `كيف نعمل | ${SITE.brand}` : `How It Works | ${SITE.brand}`,
      description: isAr
        ? "اكتشف كيف تمكن موعدي الأعمال من تقديم خدمة حجز المواعيد عبر واتساب لعملائها."
        : "Discover how Mawidi enables businesses to provide WhatsApp appointment booking services to their customers.",
      type: "website",
    },
  };
}

export default function HowItWorksPage({ params }: { params: { lang: Lang } }) {
  const { lang } = params;
  const t = UI[lang].t;
  const dir = UI[lang].dir;
  const isAr = lang === "ar";

  const processSteps = [
    {
      step: "1",
      icon: "🚀",
      title: t.step1Title,
      desc: t.step1Desc,
      color: "from-blue-500 to-cyan-500",
    },
    {
      step: "2",
      icon: "🔗",
      title: t.step2Title,
      desc: t.step2Desc,
      color: "from-purple-500 to-pink-500",
    },
    {
      step: "3",
      icon: "💬",
      title: t.step3Title,
      desc: t.step3Desc,
      color: "from-orange-500 to-red-500",
    },
    {
      step: "4",
      icon: "📊",
      title: t.step4Title,
      desc: t.step4Desc,
      color: "from-green-500 to-emerald-500",
    },
  ];

  const benefits = [
    {
      icon: "⏰",
      title: t.benefit1Title,
      desc: t.benefit1Desc,
    },
    {
      icon: "✓",
      title: t.benefit2Title,
      desc: t.benefit2Desc,
    },
    {
      icon: "🔄",
      title: t.benefit3Title,
      desc: t.benefit3Desc,
    },
    {
      icon: "🌐",
      title: t.benefit4Title,
      desc: t.benefit4Desc,
    },
    {
      icon: "📈",
      title: t.benefit5Title,
      desc: t.benefit5Desc,
    },
    {
      icon: "🔒",
      title: t.benefit6Title,
      desc: t.benefit6Desc,
    },
  ];

  const customerJourney = [
    {
      number: "1",
      icon: "📱",
      title: t.journey1Title,
      desc: t.journey1Desc,
    },
    {
      number: "2",
      icon: "⚡",
      title: t.journey2Title,
      desc: t.journey2Desc,
    },
    {
      number: "3",
      icon: "📅",
      title: t.journey3Title,
      desc: t.journey3Desc,
    },
    {
      number: "4",
      icon: "✅",
      title: t.journey4Title,
      desc: t.journey4Desc,
    },
    {
      number: "5",
      icon: "🔔",
      title: t.journey5Title,
      desc: t.journey5Desc,
    },
    {
      number: "6",
      icon: "💚",
      title: t.journey6Title,
      desc: t.journey6Desc,
    },
  ];

  return (
    <main
      className={classNames(
        "relative mx-auto max-w-7xl px-5 py-16 space-y-20 md:px-8 md:py-24 lg:space-y-32",
        isAr ? "text-right" : "text-left",
      )}
      dir={dir}
    >
      {/* Hero Section */}
      <section className="relative overflow-hidden rounded-[40px] bg-gradient-to-br from-emerald-500 via-brand-green to-teal-900 text-white shadow-2xl">
        <div className="absolute inset-0 overflow-hidden">
          <div
            className="pointer-events-none absolute -top-24 right-12 h-64 w-64 rounded-full bg-emerald-300/30 blur-3xl animate-pulse"
            aria-hidden="true"
          />
          <div
            className="pointer-events-none absolute -bottom-16 left-10 h-56 w-56 rounded-full bg-teal-400/20 blur-3xl animate-pulse animation-delay-2000"
            aria-hidden="true"
          />
        </div>
        <div className="relative p-8 md:p-12 lg:p-16 text-center space-y-6">
          <span className="inline-flex items-center gap-2 rounded-full border border-white/25 bg-gradient-to-r from-white/15 to-white/5 backdrop-blur-md px-5 py-2.5 text-xs font-bold uppercase tracking-[0.5em] text-white/95 shadow-lg">
            <span className="inline-block w-2 h-2 rounded-full bg-emerald-300 animate-pulse" />
            {t.howItWorksTag}
          </span>
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-black leading-tight bg-gradient-to-r from-white to-emerald-100 bg-clip-text text-transparent">
            {t.howItWorksTitle}
          </h1>
          <p className="max-w-3xl mx-auto text-lg md:text-xl text-white/90 leading-relaxed">
            {t.howItWorksSubtitle}
          </p>
        </div>
      </section>

      {/* Process Overview */}
      <section className="space-y-12">
        <div className="text-center space-y-4">
          <span className="inline-flex items-center gap-2 rounded-full bg-brand-green/10 px-4 py-2 text-xs font-bold uppercase tracking-wider text-brand-green">
            <span className="inline-block w-2 h-2 rounded-full bg-brand-green animate-pulse" />
            {t.processOverviewTag}
          </span>
          <h2 className="text-3xl font-black text-brand-ink dark:text-white md:text-4xl">
            {t.processOverviewTitle}
          </h2>
          <p className="text-lg text-gray-600 dark:text-gray-300 md:text-xl max-w-3xl mx-auto">
            {t.processOverviewDesc}
          </p>
        </div>

        {/* Main Process Steps */}
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          {processSteps.map((item, index) => (
            <article
              key={index}
              className="group relative overflow-hidden rounded-[28px] bg-gradient-to-br from-white to-gray-50 p-8 shadow-xl ring-2 ring-gray-200/50 transition-all hover:-translate-y-2 hover:shadow-2xl dark:from-slate-900 dark:to-slate-800 dark:ring-emerald-400/20"
            >
              <div
                className={classNames(
                  "absolute top-4 flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-r from-brand-green/20 to-emerald-400/10 text-xl font-black text-brand-green",
                  isAr ? "left-4" : "right-4",
                )}
              >
                {item.step}
              </div>
              <div
                className={`inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-r ${item.color} text-3xl shadow-lg group-hover:scale-110 transition-transform`}
              >
                {item.icon}
              </div>
              <h3 className="mt-6 text-xl font-bold text-brand-ink dark:text-white">
                {item.title}
              </h3>
              <p className="mt-3 text-base text-gray-600 leading-relaxed dark:text-gray-300">
                {item.desc}
              </p>
            </article>
          ))}
        </div>
      </section>

      {/* Benefits Section */}
      <section className="space-y-12 bg-slate-50 dark:bg-slate-900 rounded-[40px] p-8 md:p-12 lg:p-16">
        <div className="text-center space-y-4">
          <h2 className="text-3xl font-black text-brand-ink dark:text-white md:text-4xl">
            {t.benefitsTitle}
          </h2>
          <p className="text-lg text-gray-600 dark:text-gray-300 md:text-xl max-w-3xl mx-auto">
            {t.benefitsSubtitle}
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {benefits.map((benefit, index) => (
            <div
              key={index}
              className="group rounded-2xl bg-white dark:bg-slate-800 p-6 shadow-lg hover:shadow-xl transition-all border border-slate-100 dark:border-slate-700"
            >
              <div className="flex items-start gap-4">
                <div className="flex-shrink-0 text-4xl">{benefit.icon}</div>
                <div className="flex-1">
                  <h3 className="text-xl font-bold text-brand-ink dark:text-white mb-2">
                    {benefit.title}
                  </h3>
                  <p className="text-base text-gray-600 dark:text-gray-300 leading-relaxed">
                    {benefit.desc}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Customer Journey Section */}
      <section className="space-y-12">
        <div className="text-center space-y-4">
          <h2 className="text-3xl font-black text-brand-ink dark:text-white md:text-4xl">
            {t.customerJourneyTitle}
          </h2>
          <p className="text-lg text-gray-600 dark:text-gray-300 md:text-xl max-w-3xl mx-auto">
            {t.customerJourneySubtitle}
          </p>
        </div>

        <div className="relative">
          {/* Connection Line */}
          <div
            className="absolute top-0 bottom-0 left-1/2 w-1 bg-gradient-to-b from-brand-green via-emerald-400 to-teal-500 -translate-x-1/2 hidden lg:block"
            aria-hidden="true"
          />

          {/* Journey Steps */}
          <div className="space-y-12">
            {customerJourney.map((step, index) => (
              <div
                key={index}
                className={classNames(
                  "relative flex flex-col lg:flex-row gap-6 items-center",
                  index % 2 === 0 ? "lg:flex-row" : "lg:flex-row-reverse",
                )}
              >
                {/* Content */}
                <div className="flex-1 w-full">
                  <div
                    className={classNames(
                      "rounded-2xl bg-white dark:bg-slate-800 p-6 shadow-lg border border-slate-100 dark:border-slate-700",
                      index % 2 === 0 && !isAr ? "lg:mr-8" : "",
                      index % 2 !== 0 && !isAr ? "lg:ml-8" : "",
                      index % 2 === 0 && isAr ? "lg:ml-8" : "",
                      index % 2 !== 0 && isAr ? "lg:mr-8" : "",
                    )}
                  >
                    <div className="flex items-start gap-4">
                      <div className="flex-shrink-0 text-4xl">{step.icon}</div>
                      <div className="flex-1">
                        <h3 className="text-xl font-bold text-brand-ink dark:text-white mb-2">
                          {step.title}
                        </h3>
                        <p className="text-base text-gray-600 dark:text-gray-300 leading-relaxed">
                          {step.desc}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Number Circle */}
                <div className="relative flex-shrink-0 z-10">
                  <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-brand-green to-emerald-500 text-2xl font-black text-white shadow-xl">
                    {step.number}
                  </div>
                </div>

                {/* Spacer for alignment */}
                <div className="flex-1 hidden lg:block" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="relative overflow-hidden rounded-[40px] bg-gradient-to-br from-emerald-500 via-brand-green to-teal-900 p-12 text-white shadow-2xl">
        <div className="absolute inset-0 overflow-hidden">
          <div className="pointer-events-none absolute -top-24 right-20 h-64 w-64 rounded-full bg-emerald-300/30 blur-3xl animate-pulse" />
          <div className="pointer-events-none absolute -bottom-16 left-20 h-56 w-56 rounded-full bg-teal-400/20 blur-3xl animate-pulse animation-delay-2000" />
        </div>
        <div className="relative text-center space-y-8">
          <h2 className="text-3xl font-black md:text-5xl">{t.ctaTitle}</h2>
          <p className="text-lg md:text-xl text-white/90 max-w-2xl mx-auto">
            {t.ctaDesc}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href={`/${lang}/signup`}
              className="group inline-flex items-center justify-center rounded-xl bg-white px-8 py-4 text-base font-bold text-brand-green shadow-xl transition-all hover:bg-emerald-50 hover:shadow-2xl hover:scale-105"
            >
              {t.ctaButton1}
              <span
                className={classNames(
                  "transition-transform group-hover:translate-x-1",
                  isAr ? "mr-2" : "ml-2",
                )}
              >
                →
              </span>
            </Link>
            <Link
              href={`/${lang}/contact`}
              className="group inline-flex items-center justify-center rounded-xl border-2 border-white/40 backdrop-blur-sm px-8 py-4 text-base font-bold text-white transition-all hover:bg-white/20 hover:border-white/60 hover:scale-105"
            >
              {t.ctaButton2}
              <span
                className={classNames(
                  "opacity-70 group-hover:opacity-100",
                  isAr ? "mr-2" : "ml-2",
                )}
              >
                ↗
              </span>
            </Link>
          </div>
        </div>
      </section>

      {/* JSON-LD Schema */}
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "HowTo",
          name: t.howItWorksTitle,
          description: t.howItWorksSubtitle,
          step: processSteps.map((step, index) => ({
            "@type": "HowToStep",
            position: index + 1,
            name: step.title,
            text: step.desc,
          })),
        }}
      />
    </main>
  );
}