"use client";

import { useRouter } from "next/navigation";
import {
  FaDatabase,
  FaUsers,
  FaBullhorn,
  FaExternalLinkAlt,
  FaHandsHelping,
  FaHandshake,
} from "react-icons/fa";
import { FaChevronRight } from "react-icons/fa6";

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

export const COMMUNITY_DATA = [
  {
    title: "Extensive database",
    description:
      "Access a robust internal database of over 250,000 individuals who have volunteered to participate in your research projects.",
    icon: FaDatabase,
  },
  {
    title: "Inclusive engagement",
    description:
      "Specialised panels focused on accessibility and digital inclusion, and leveraging our engaged network for referrals to enhance our reach.",
    icon: FaUsers,
  },
  {
    title: "Social media advertising",
    description:
      "Utilising social media platforms and advanced screening techniques to effectively target and select appropriate participants for each project.",
    icon: FaBullhorn,
  },
  {
    title: "External resources",
    description:
      "Collaborating with external organisations to access additional participant pools on a project-by-project basis.",
    icon: FaExternalLinkAlt,
  },
  {
    title: "Custom engagement",
    description:
      "Employing unique research methodologies to identify bespoke ways to engage your target audience.",
    icon: FaHandsHelping,
  },
  {
    title: "Community partnerships",
    description:
      "Building strong partnerships with charities and community groups to source participants with accessibility needs, lower digital literacy and more.",
    icon: FaHandshake,
  },
];

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

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

  return (
    <section className="text-center p-6 lg:p-12 my-24">
      <div className="flex flex-col items-center justify-center space-y-4 text-center">
        <span className="relative font-noto text-lg font-bold lg:text-xl">
          Our participant network
          <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">
          Our community
        </h2>
        <p className="font-noto text-base lg:text-2xl mt-4 mx-4 lg:mx-24">
          We excel in connecting you with the right participants. Explore our
          diverse range of services to see how we can support your research
          needs.
        </p>
      </div>
      <div className="mt-8 lg:mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 px-8 xl:px-36 xxxl:px-96 gap-4">
        {COMMUNITY_DATA.map((item, index) => {
          const Icon = item.icon;

          return (
            <div
              key={index}
              className="p-8 bg-gray-400/10 dark:bg-white/5 rounded-xl flex flex-col items-center justify-center space-y-4"
            >
              <div className="flex items-center justify-center size-8 rounded-full bg-userViewingBlue dark:bg-paleBlue text-white dark:text-black outline-dashed outline-1 outline-offset-4 outline-paleBlue">
                <Icon />
              </div>
              <h3 className="font-inter text-lg lg:text-xl font-bold mb-2">
                {item.title}
              </h3>
              <p className="font-noto text-base text-gray-600 dark:text-white">
                {item.description}
              </p>
            </div>
          );
        })}
      </div>
      <Button
        btnLabel="Discover more"
        className="w-48 mt-8 lg:mt-12"
        customVariant="client"
        endContent={<FaChevronRight />}
        onClick={handleButtonClick}
      />
    </section>
  );
}

export default OurCommunity;