"use client";

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

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

type AboutProps = {
  catchySentence: string;
  description: string;
  whyPFRSection: SectionContent;
  callout?: string;
};

function AboutTheService({
  description,
  catchySentence,
  whyPFRSection,
  callout,
}: AboutProps) {
  const router = useRouter();

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

  return (
    <section className="my-24 min-h-screen text-center">
      <h2 className="text-3xl md:text-7xl font-black font-inter mb-8 max-w-4xl mx-12 lg:mx-auto">
        {catchySentence}
      </h2>
      <p className="font-noto text-lg text-gray-700 dark:text-gray-200 mx-12 lg:mx-36 mt-1">
        {description}
      </p>
      <div className="flex flex-col items-center justify-center mt-12">
        <h3 className="text-xl md:text-3xl font-black font-inter mb-8 max-w-3xl mx-12 lg:mx-auto">
          {whyPFRSection.title}
        </h3>
        <div className="grid grid-cols-1 lg:grid-cols-3 w-full gap-4 px-12 lg:px-24 py-12 lg:py-0">
          {whyPFRSection.content.map((value, index) => {
            const Icon = value.icon;

            if (index === 4) {
              return [
                <div
                  key="extra-card"
                  className="bg-slate-800 flex flex-col items-center justify-center p-8 text-center space-y-4 rounded-lg h-full"
                >
                  <p className="font-noto text-white font-medium text-sm lg:text-base">
                    {callout ||
                      "25 years of experience in bespoke participant recruitment for market research and usability testing."}
                  </p>
                  <Button
                    btnLabel="Contact us today"
                    customVariant="client"
                    endContent={<FaChevronRight />}
                    onClick={handleContactUsClick}
                  />
                </div>,
                <div
                  key={index}
                  className="bg-gray-400/10 dark:bg-white/5 flex flex-col items-center justify-center p-8 text-center space-y-8 rounded-lg h-full"
                >
                  <div className="flex items-center justify-center size-12 rounded-full bg-userViewingBlue dark:bg-paleBlue text-white dark:text-black outline-dashed outline-1 outline-offset-4 outline-paleBlue">
                    <Icon className="text-base lg:text-xl" />
                  </div>
                  <p className="font-noto text-black dark:text-white font-medium text-base lg:text-lg">
                    {value.title}
                  </p>
                </div>,
              ];
            }

            return (
              <div
                key={index}
                className="bg-gray-400/10 dark:bg-white/5 flex flex-col items-center justify-center p-8 text-center space-y-8 rounded-lg h-full"
              >
                <div className="flex items-center justify-center size-12 rounded-full bg-userViewingBlue dark:bg-paleBlue text-white dark:text-black outline-dashed outline-1 outline-offset-4 outline-paleBlue">
                  <Icon className="text-base lg:text-xl" />
                </div>
                <p className="font-noto text-black dark:text-white font-medium text-base lg:text-lg">
                  {value.title}
                </p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

export default AboutTheService;