"use client";

import { ArrowRight, ArrowLeft } from "lucide-react";
import Link from "next/link";
import { useLanguage } from "@/components/language-provider";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function Cta() {
  const { t, lang } = useLanguage();
  const Arrow = lang === "fa" ? ArrowLeft : ArrowRight;
  return (
    <section className="relative overflow-hidden bg-white py-24 dark:bg-transparent">
      <div className="pointer-events-none absolute inset-0 bg-grid-faint opacity-[0.03] dark:opacity-100 [mask-image:radial-gradient(ellipse_at_center,black,transparent_70%)]" />
      <div className="pointer-events-none absolute left-1/2 top-1/2 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-brand-600/10 blur-3xl dark:bg-brand-600/20" />

      <div className="container-x relative text-center">
        <h2 className="mx-auto max-w-2xl text-3xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-4xl">
          {t.cta.title}
        </h2>
        <p className="mx-auto mt-4 max-w-xl text-base leading-relaxed text-slate-600 dark:text-slate-400">
          {t.cta.subtitle}
        </p>
        <div className="mt-9 flex justify-center">
          <Link href="/login" className={cn(buttonVariants({ size: "lg" }))}>
            {t.cta.button}
            <Arrow className="h-5 w-5 rtl:rotate-180" />
          </Link>
        </div>
      </div>
    </section>
  );
}