"use client";
import Link from "next/link";
import { UI, type Lang } from "@/lib/config";

export default function HealthcareCTA({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const isRTL = lang === "ar";

  return (
    <section className="relative py-32 px-6 bg-slate-900 text-white overflow-hidden">
      {/* Grid Background */}
      <div
        className="absolute inset-0 opacity-[0.03]"
        style={{
          backgroundImage:
            "linear-gradient(#0F9972 1px, transparent 1px), linear-gradient(90deg, #0F9972 1px, transparent 1px)",
          backgroundSize: "40px 40px",
        }}
      />

      <div className="max-w-4xl mx-auto text-center relative z-10">
        <div
          className={`inline-flex items-center gap-3 mb-8 ${isRTL ? "flex-row-reverse" : ""}`}
        >
          <span className="text-brand-green font-mono text-sm">10</span>
          <div className="w-8 h-px bg-brand-green" />
          <span className="text-slate-400 text-sm uppercase tracking-widest">
            {isRTL ? "ابدأ الآن" : "Get Started"}
          </span>
        </div>

        <h2 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
          {t.closingCTATitle}
        </h2>

        <p className="text-xl text-slate-400 mb-4">{t.closingCTAText}</p>

        <div className="inline-block px-6 py-3 bg-brand-green text-white font-semibold mb-10">
          {isRTL
            ? "تجربة مجانية 14 يوم + إعداد مجاني"
            : "14-Day Free Trial + Free Setup"}
        </div>

        <div
          className={`flex flex-wrap gap-4 justify-center mb-12 ${isRTL ? "flex-row-reverse" : ""}`}
        >
          <Link
            href={`/${lang}/signup`}
            className="group relative px-10 py-5 bg-white text-slate-900 font-bold overflow-hidden"
          >
            <span className="relative z-10 flex items-center gap-2">
              {t.getStarted}
              <span className="transition-transform group-hover:translate-x-1">
                {isRTL ? "←" : "→"}
              </span>
            </span>
            <div className="absolute inset-0 bg-brand-green translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
          </Link>
          <Link
            href={`/${lang}/demo`}
            className="px-10 py-5 border-2 border-white text-white font-bold hover:bg-white hover:text-slate-900 transition-colors"
          >
            {t.scheduleDemo}
          </Link>
        </div>

        <div
          className={`flex flex-wrap gap-8 justify-center text-sm text-slate-400 ${isRTL ? "flex-row-reverse" : ""}`}
        >
          <div
            className={`flex items-center gap-2 ${isRTL ? "flex-row-reverse" : ""}`}
          >
            <div className="w-1.5 h-1.5 bg-brand-green" />
            <span>
              {isRTL ? "بدون بطاقة ائتمان" : "No credit card required"}
            </span>
          </div>
          <div
            className={`flex items-center gap-2 ${isRTL ? "flex-row-reverse" : ""}`}
          >
            <div className="w-1.5 h-1.5 bg-brand-green" />
            <span>{isRTL ? "إعداد في 5 دقائق" : "Setup in 5 minutes"}</span>
          </div>
          <div
            className={`flex items-center gap-2 ${isRTL ? "flex-row-reverse" : ""}`}
          >
            <div className="w-1.5 h-1.5 bg-brand-green" />
            <span>{isRTL ? "إلغاء في أي وقت" : "Cancel anytime"}</span>
          </div>
        </div>
      </div>
    </section>
  );
}