"use client";

import { useRouter } from "next/navigation";
import { FaChevronRight } from "react-icons/fa6";

import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";

function FinalCTA({
  title = "Empower your research insights. Contact us today.",
  description = "Unlock the full potential of your research with our expert recruitment services. We provide a diverse range of participants, ensuring comprehensive insights.",
}: {
  title?: string;
  description?: string;
}) {
  const router = useRouter();

  const handleGetStartedClick = () => {
    router.push(INTERNAL_PAGES.client.contactUs.homepage);
  };

  return (
    <section className="bg-slate-900 relative overflow-hidden">
      <div className="absolute inset-0">
        <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-purple-500/20 rounded-full blur-3xl animate-pulse"></div>
        <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-blue-500/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
      </div>
      <div className="relative px-6 py-24 sm:px-12 lg:px-8">
        <div className="mx-auto max-w-4xl text-center">
          <h2 className="text-3xl font-black tracking-tight text-white sm:text-6xl font-inter">
            {title}
          </h2>
          <p className="mx-auto mt-6 max-w-xl text-lg font-noto text-white">
            {description}
          </p>
          <div className="mt-10 flex items-center justify-center gap-x-6">
            <Button
              btnLabel="Get started today"
              className="bg-white text-slate-900 hover:bg-gray-100 shadow-lg hover:shadow-xl transform hover:scale-105"
              customVariant="client"
              endContent={<FaChevronRight />}
              onClick={handleGetStartedClick}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

export default FinalCTA;