import { UI, type Lang } from "@/lib/config";

export default function SubscriptionCancelled({
  params,
}: {
  params: { lang: Lang };
}) {
  const isAr = params.lang === "ar";
  const dict = UI[params.lang];

  return (
    <main
      dir={dict.dir}
      className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-800 flex items-center justify-center p-4"
    >
      <div className="max-w-2xl w-full bg-white dark:bg-slate-900 rounded-2xl shadow-xl p-8 md:p-12 text-center border border-slate-200 dark:border-slate-700">
        {/* Info Icon */}
        <div className="w-20 h-20 bg-slate-200 dark:bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-6">
          <svg
            className="w-12 h-12 text-slate-600 dark:text-slate-300"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
        </div>

        {/* Cancellation Message */}
        <h1 className="text-3xl md:text-4xl font-bold text-brand-ink dark:text-white mb-4">
          {isAr ? "تم إلغاء عملية الدفع" : "Payment Cancelled"}
        </h1>

        <p className="text-lg text-neutral-600 dark:text-neutral-300 mb-8">
          {isAr
            ? "تم إلغاء عملية الاشتراك. لم يتم خصم أي مبلغ من بطاقتك."
            : "Your subscription process was cancelled. No charges were made to your card."}
        </p>

        {/* Reassurance */}
        <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6 mb-8">
          <p className="text-sm text-neutral-700 dark:text-neutral-300">
            {isAr
              ? "هل واجهت مشكلة أثناء عملية الدفع؟ فريق الدعم لدينا مستعد للمساعدة!"
              : "Had trouble during checkout? Our support team is ready to help!"}
          </p>
        </div>

        {/* CTA Buttons */}
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <a
            href={`/${params.lang}/pricing`}
            className="px-8 py-3 bg-brand-green text-white rounded-lg font-semibold hover:bg-brand-greenHover transition-all shadow-md"
          >
            {isAr ? "العودة إلى الباقات" : "Back to Pricing"}
          </a>
          <a
            href={`/${params.lang}/contact`}
            className="px-8 py-3 bg-slate-100 text-brand-ink rounded-lg font-semibold hover:bg-slate-200 dark:bg-slate-800 dark:text-white dark:hover:bg-slate-700 transition-all"
          >
            {isAr ? "تواصل مع الدعم" : "Contact Support"}
          </a>
        </div>
      </div>
    </main>
  );
}