"use client";

import { FaChevronRight } from "react-icons/fa6";
import { Card, CardBody, CardFooter, CardHeader } from "@nextui-org/react";
import { useRouter } from "next/navigation";

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

const RECRUITMENT_SERVICES = [
  {
    title: "Consumer recruitment",
    description:
      "Connecting you with a diverse range of everyday consumers for your research needs.",
    href: INTERNAL_PAGES.client.services.consumerRecruitment,
  },
  {
    title: "B2B recruitment",
    description:
      "Finding professionals and business owners tailored to your specific requirements.",
    href: INTERNAL_PAGES.client.services.b2bRecruitment,
  },
  {
    title: "International recruitment",
    description:
      "Accessing consumer and B2B participants from around the globe for cross-cultural insights.",
    href: INTERNAL_PAGES.client.services.internationalRecruitment,
  },
  {
    title: "Quantitative recruitment",
    description:
      "Providing participants for online surveys, unmoderated tasks, diary studies, in-home product testing and more.",
    href: INTERNAL_PAGES.client.services.quantitativeRecruitment,
  },
  {
    title: "Panel management",
    description:
      "Building and managing bespoke panels of participants for ongoing research.",
    href: INTERNAL_PAGES.client.services.panelManagement,
  },
  {
    title: "Low digital recruitment",
    description:
      "Engaging participants with limited digital access for inclusive research.",
    href: INTERNAL_PAGES.client.services.lowDigitalRecruitment,
  },
  {
    title: "Accessibility recruitment",
    description:
      "Recruiting individuals with disabilities to ensure accessible and inclusive research.",
    href: INTERNAL_PAGES.client.services.accessibilityRecruitment,
  },
  {
    title: "Accessibility collective",
    description:
      "A diverse panel of pre-screened participants with a range of impairments and long-term health conditions ready to take part in your research.",
    href: INTERNAL_PAGES.client.services.accessibilityCollective,
  },
  {
    title: "Customer list recruitment",
    description:
      "Utilising your own pool of customers to recruit participants for targeted research in a fully compliant and secure manner.",
    href: INTERNAL_PAGES.client.services.customerListRecruitment,
  },
  {
    title: "Incentive management",
    description:
      "Managing incentives to ensure participant engagement and satisfaction.",
    href: INTERNAL_PAGES.client.services.incentiveManagement,
  },
  {
    title: "Recruitment & studio",
    description:
      "Providing a full suite of recruitment and studio services for seamless research execution.",
    href: INTERNAL_PAGES.client.services.recruitmentAndStudio,
  },
];

function WhatWeDo() {
  const router = useRouter();

  const handleCardPress = (serviceHref: string) => {
    router.push(serviceHref);
  };

  const handleButtonClick = () => {
    router.push(INTERNAL_PAGES.client.services.homepage);
  };

  return (
    <section>
      <div className="flex flex-col items-center justify-center space-y-8 text-center">
        <span className="relative font-noto text-lg font-bold lg:text-xl">
          What we do
          <span className="absolute -bottom-1 left-0 w-full h-1 bg-pfrBasicBlue opacity-40 dark:opacity-100"></span>
        </span>
        <h2 className="font-inter font-black text-3xl lg:text-7xl relative max-w-7xl">
          The most trusted participant recruitment company
          <span
            aria-hidden
            className="inline text-pfrBasicBlue"
            role="presentation"
          >
            .
          </span>
        </h2>
        <p className="font-noto text-xl px-12 lg:px-96">
          Find out more about our services and discover why People for Research
          is the leader in user recruitment.
        </p>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mx-auto max-w-7xl gap-4 p-8">
        {RECRUITMENT_SERVICES.map((service, index) => (
          <Card
            key={index}
            disableAnimation
            isHoverable
            isPressable
            className="p-4 bg-gray-400/10 dark:bg-white/5 rounded-xl flex flex-col items-center justify-center shadow-none"
            onPress={() => handleCardPress(service.href)}
          >
            <CardHeader>
              <h3 className="font-inter text-lg font-bold mb-2 text-start">
                {service.title}
              </h3>
            </CardHeader>
            <CardBody>
              <p className="font-noto text-base text-gray-600 dark:text-white">
                {service.description}
              </p>
            </CardBody>
            <CardFooter className="flex justify-end">
              <div className="rounded-full bg-userViewingBlue outline-userViewingBlue size-8 text-white dark:text-black flex items-center justify-center p-1 outline-dashed outline-1 outline-offset-4 dark:outline-paleBlue dark:bg-paleBlue">
                <FaChevronRight />
              </div>
            </CardFooter>
          </Card>
        ))}
      </div>
      <div className="flex justify-center max-w-7xl mx-auto p-8">
        <Button
          btnLabel="Learn more about our services"
          customVariant="client"
          endContent={<FaChevronRight />}
          onClick={handleButtonClick}
        />
      </div>
    </section>
  );
}

export default WhatWeDo;