"use client";

import Image from "next/image";
import { FaStar } from "react-icons/fa";
import { FaAward, FaShield } from "react-icons/fa6";

import MRSCompanyPartnerLogo from "@/public/client/services/certifications/mrs-company-partner.webp";
import RASAccreditedLogo from "@/public/client/services/certifications/mrs-ras-accredited.webp";
import FairDataLogo from "@/public/client/services/certifications/fair-data.webp";
import MRSAwardsWinnerLogo from "@/public/client/services/certifications/mrs-winner.webp";
import MRSAwardsFinalistLogo from "@/public/client/services/certifications/mrs-finalist.webp";
import CyberEssentialsLogo from "@/public/client/services/certifications/cyber-essentials.webp";
import ICOLogo from "@/public/client/services/certifications/ico-logo.webp";
import ITGovernanceLogo from "@/public/client/services/certifications/it-governance.webp";

function CredentialsAndCertifications() {
  const LIST_OF_CREDENTIALS = [
    {
      title: "Accredited",
      description:
        "Our team is accredited under the Recruiter Accreditation Scheme, provided by the Market Research Society (MRS). We are also MRS company partners and Fair Data partners.",
      icon: FaShield,
      color: "from-midnightBlue to-pfrBasicBlue",
      bgColor: "bg-gray-400/10 dark:bg-white/5",
      logos: [
        {
          source: MRSCompanyPartnerLogo,
          alt: "MRS Company Partner logo with a circular pattern of small squares",
        },
        {
          source: RASAccreditedLogo,
          alt: "RAS Accredited logo with 'MRS' and 'AQR' text in the center of a circular pattern of small squares",
        },
        {
          source: FairDataLogo,
          alt: "Fair Data logo with a large 'D' composed of small squares and 'Fair Data' text beside it",
        },
      ],
    },
    {
      title: "Awarded",
      description:
        "People for Research won the MRS Operations Award in 2019 for Best Support Services. We were also finalists for the Best Support Services award in 2021.",
      icon: FaAward,
      color: "from-midnightBlue to-pfrBasicBlue",
      bgColor: "bg-gray-400/10 dark:bg-white/5",
      logos: [
        {
          source: MRSAwardsWinnerLogo,
          alt: "MRS Operations Award Winner 2019 logo with circular pattern of small squares",
        },
        {
          source: MRSAwardsFinalistLogo,
          alt: "MRS Operations Award Finalist 2021 logo with circular pattern of small squares",
        },
      ],
    },
    {
      title: "Certified",
      description:
        "Our top priority is to keep both our community's and our clients' data secure. We are Cyber Essentials certified, registered with the ICO as data controllers and fully compliant with GDPR.",
      icon: FaStar,
      color: "from-midnightBlue to-pfrBasicBlue",
      bgColor: "bg-gray-400/10 dark:bg-white/5",
      logos: [
        {
          source: CyberEssentialsLogo,
          alt: "Cyber Essentials Certified logo with a blue and green checkmark on a blue background",
        },
        {
          source: ICOLogo,
          alt: "ICO logo with 'ico.' in blue text and 'Information Commissioner's Office' below it",
        },
        {
          source: ITGovernanceLogo,
          alt: "IT Governance logo with 'it' in green gradient and 'governance' below it, accompanied by a circular signal icon",
        },
      ],
    },
  ];

  return (
    <section className="mx-auto py-24 px-8 lg:px-0 dark:bg-gray-800">
      <h1 className="text-center font-inter font-black text-4xl sm:text-6xl">
        Recognised experts in research
        <span
          aria-hidden
          className="inline text-pfrBasicBlue"
          role="presentation"
        >
          .
        </span>
      </h1>
      <h2 className="text-center font-noto text-lg lg:text-xl mx-auto px-4 lg:px-0 lg:max-w-5xl mt-4">
        We pride ourselves on our commitment to excellence and our dedication to
        upholding the highest industry standards. Our team&apos;s credentials
        and certifications reflect our expertise, rigorous training, and
        adherence to best practices.
      </h2>
      <div className="grid gap-4 lg:grid-cols-3 pt-12 mx-auto px-12">
        {LIST_OF_CREDENTIALS.map((credential) => {
          const IconComponent = credential.icon;

          return (
            <article
              key={credential.title}
              aria-labelledby={`${credential.title.toLowerCase()}-title`}
              className={`group relative overflow-hidden rounded-2xl ${credential.bgColor} p-8 flex flex-col`}
              tabIndex={-1}
            >
              <div
                aria-hidden
                className={`absolute inset-0 ${credential.color} opacity-5 group-hover:opacity-10 transition-opacity duration-300 pointer-events-none rounded-2xl`}
              />
              <div className="relative z-10 mb-6 flex-grow">
                <div
                  className={`inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br ${credential.color} mb-4`}
                >
                  <IconComponent aria-hidden className="h-8 w-8 text-white" />
                </div>
                <h3
                  className="text-2xl font-extrabold pb-3 font-inter"
                  id={`${credential.title.toLowerCase()}-title`}
                >
                  {credential.title}
                </h3>
                <p>{credential.description}</p>
              </div>
              <div className="relative pt-6 mt-auto">
                <ul
                  aria-label={`${credential.title} logos`}
                  className="grid grid-cols-3 my-auto gap-4"
                >
                  {credential.logos.map(({ source, alt }) => (
                    <li key={alt}>
                      <div className="flex items-center justify-center p-6 bg-white rounded">
                        <Image
                          alt={alt}
                          className="h-12 w-auto object-contain"
                          height={80}
                          src={source}
                          width={160}
                        />
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
              {/* <div
                aria-hidden
                className={`absolute top-0 right-0 w-20 h-20 bg-gradient-to-br ${credential.color} opacity-10 rounded-bl-full pointer-events-none`}
              /> */}
            </article>
          );
        })}
      </div>
    </section>
  );
}

export default CredentialsAndCertifications;