"use client";

import "keen-slider/keen-slider.min.css";
import { useKeenSlider } from "keen-slider/react";
import { FaCheckCircle, FaCogs, FaSlidersH, FaHistory } from "react-icons/fa";
import {
  FaLock,
  FaCertificate,
  FaGraduationCap,
  FaUsers,
  FaAward,
  FaUniversalAccess,
  FaCircleChevronLeft,
  FaCircleChevronRight,
} from "react-icons/fa6";

const REASONS_LIST = [
  {
    title: "Quality",
    description:
      "We are experts in providing a high-quality service, whether we are recruiting for a small focus group or a high-volume survey. In our experience, a quality service translates into valid and credible data for our clients.",
    icon: (
      <FaCheckCircle className="text-midnightBlue dark:text-pfrBasicBlue text-3xl" />
    ),
  },
  {
    title: "Fully compliant",
    description:
      "We are registered with the ICO, a Cyber Essentials certified organisation, MRS partner and Fair Data member, and work in a fully compliant manner.",
    icon: (
      <FaLock className="text-midnightBlue dark:text-pfrBasicBlue text-3xl" />
    ),
  },
  {
    title: "Accredited",
    description:
      "We are a Market Research Society RAS accredited recruitment company, the only professional accreditation for participant recruitment. All recruitment activities are conducted in-house by the PFR team, we do not outsource any tasks to a third-party to ensure we provide a consistent and reliable service.",
    icon: (
      <FaCertificate className="text-midnightBlue dark:text-pfrBasicBlue text-3xl" />
    ),
  },
  {
    title: "Qualified",
    description:
      "Our recruitment experts have attended training provided by the Market Research Society, allowing us to provide a high-quality questionnaire design and set up service.",
    icon: (
      <FaGraduationCap className="text-midnightBlue dark:text-pfrBasicBlue text-3xl" />
    ),
  },
  {
    title: "Rigorous methodology",
    description:
      "Our proposed methodology follows the same rigorous recruitment process that is carried out for every project we take on, offering three separate points for client sign-off. This puts the client firmly in control of who they include in their research.",
    icon: (
      <FaCogs className="text-midnightBlue dark:text-pfrBasicBlue text-3xl" />
    ),
  },
  {
    title: "Tailored and flexible options",
    description:
      "We tailor the service to your needs, offering different service packages that cover both UK-based and overseas audiences to make sure you get the best results out of your research.",
    icon: (
      <FaSlidersH className="text-midnightBlue dark:text-pfrBasicBlue text-3xl" />
    ),
  },
  {
    title: "Validity of participants",
    description:
      "We can ensure the validity and suitability of our participants via different methods, including phone number verification at the point of sign-up, a two-step screening process for moderated research and regular data checks that highlight potential issues in the system.",
    icon: (
      <FaUsers className="text-midnightBlue dark:text-pfrBasicBlue text-3xl" />
    ),
  },
  {
    title: "Award-winning recruitment",
    description:
      "Our work has won an award from the Market Research Society (MRS) for Best Support Services in 2019 and we were nominated in 2021 and 2022 in the same category.",
    icon: (
      <FaAward className="text-midnightBlue dark:text-pfrBasicBlue text-3xl" />
    ),
  },
  {
    title: "Focus on accessibility and inclusivity",
    description:
      "From working with our internal development team to ensure all our systems are fully accessible to advising clients on the wording used during the screening process, we are fully committed to ensure user recruitment is inclusive and welcoming to all.",
    icon: (
      <FaUniversalAccess className="text-midnightBlue dark:text-pfrBasicBlue text-3xl" />
    ),
  },
  {
    title: "Legacy",
    description:
      "People for Research are one of the original participant recruiters in the UK, with a rich history dating back to 1989.",
    icon: (
      <FaHistory className="text-midnightBlue dark:text-pfrBasicBlue text-3xl" />
    ),
  },
];

function ReasonsList() {
  const [sliderRef, instanceRef] = useKeenSlider({
    initial: 0,
    loop: false,
    mode: "snap",
    slides: {
      origin: "center",
      perView: 3.5,
      spacing: 20,
    },
    breakpoints: {
      "(min-width: 0px)": {
        slides: { perView: 1.5, spacing: 10 },
      },
      "(min-width: 1000px)": {
        slides: { perView: 3.5, spacing: 10 },
      },
    },
  });

  const chevronsClasses =
    "size-12 rounded-full border border-paleBlue p-3 text-black transition hover:bg-paleBlue hover:text-white cursor-pointer focus:outline-none focus:outline-pfrBasicBlue/30";

  return (
    <section>
      <h2 className="text-4xl md:text-5xl font-black font-inter text-center w-full mt-12 px-12 lg:px-0">
        10 reasons to work with us
      </h2>
      <p className="text-center font-noto text-lg mt-2 px-12">
        Why People for Research is the quality standard in the participant
        recruitment field.
      </p>
      <div className="flex flex-col lg:flex-row items-center gap-12 lg:px-24 mt-12">
        <div className="bg-paleBlue/30 dark:bg-paleBlue/30 rounded-xl p-4 flex flex-col w-72 min-h-64">
          <h2 className="text-xl font-black font-inter">Core values</h2>
          <p className="mt-4 text-gray-600 dark:text-white font-noto">
            We are committed to providing our clients with the best possible
            service. Discover what we are all about.
          </p>
          <div className="flex mt-4 space-x-3">
            <button
              aria-label="Previous slide"
              className={chevronsClasses}
              id="keen-slider-previous"
              tabIndex={0}
              onClick={(e: any) => {
                e.stopPropagation();
                instanceRef.current?.prev();
              }}
            >
              <FaCircleChevronLeft className="text-xl" />
            </button>
            <button
              aria-label="Next slide"
              className={chevronsClasses}
              id="keen-slider-next"
              tabIndex={0}
              onClick={(e: any) => {
                e.stopPropagation();
                instanceRef.current?.next();
              }}
            >
              <FaCircleChevronRight className="text-xl" />
            </button>
          </div>
        </div>
        <div ref={sliderRef} className="keen-slider">
          {REASONS_LIST.map(({ title, description, icon }, idx) => (
            <div
              key={idx}
              aria-label={`Slide ${idx + 1}`}
              className="bg-gray-400/10 dark:bg-white/5 keen-slider__slide mb-4 shadow-none rounded-lg flex flex-col p-4"
            >
              <div className="font-inter font-bold p-2 text-base lg:text-lg flex flex-col space-y-4">
                <span>{icon}</span>
                <span>{title}</span>
              </div>
              <div className="font-noto p-2 text-sm">{description}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default ReasonsList;