"use client";

import {
  FaUserShield,
  FaRegClipboard,
  FaClipboardCheck,
  FaLock,
  FaRegComments,
} from "react-icons/fa6";

function GDPRCompliance() {
  const GDPR_LIST = [
    {
      title: "Dedicated data protection specialist",
      description:
        "PFR have an in-house dedicated data protection specialist who is responsible for all our policies and GDPR compliance.",
      icon: <FaUserShield />,
    },
    {
      title: "ICO registration",
      description:
        "We are registered with the Information Commissioner's Office (ICO) as data controllers.",
      icon: <FaRegClipboard />,
    },
    {
      title: "Successful GDPR audits",
      description:
        "PFR have successfully passed GDPR audits with Visa, Monzo, NatWest, BBC, and many other large organisations to be appointed on their agency roster.",
      icon: <FaClipboardCheck />,
    },
    {
      title: "Robust privacy policies",
      description:
        "We have robust privacy policies in place, designed to specifically cater to and protect the rights of the different groups of people we work with, from clients to participants.",
      icon: <FaLock />,
    },
    {
      title: "Consultation and advice",
      description:
        "Our data protection specialist is available to consult with clients and provide advice on compliance in user research or answer questions about our terms.",
      icon: <FaRegComments />,
    },
  ];

  return (
    <section>
      <h3 className="text-4xl md:text-5xl font-black font-inter text-center w-full mt-12 px-12 lg:px-0">
        GDPR compliance
      </h3>
      <p className="text-center font-noto text-lg mt-2 px-12">
        Discover our quality checking process
      </p>
      <div className="relative overflow-hidden">
        <div className="mt-2 md:mt-0 py-12 pb-6 sm:py-16 lg:pb-24 overflow-hidden">
          <div className="mx-auto max-w-7xl relative">
            <div className="relative mt-12 lg:mt-20">
              <div className="absolute inset-x-0 -top-2 hidden md:block">
                <svg
                  className="w-full h-20"
                  preserveAspectRatio="none"
                  viewBox="0 0 1000 100"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M0,50 Q100,30 200,50 T400,50 T600,50 T800,50 T1000,50"
                    fill="none"
                    opacity={0.5}
                    stroke="#327BA8"
                    strokeDasharray="10,10"
                    strokeWidth="4"
                  />
                </svg>
              </div>
              <div className="relative flex flex-col md:flex-row justify-between gap-x-12 text-center px-12">
                {GDPR_LIST.map((item, index) => (
                  <div key={index} className="mb-8 md:mb-0 md:w-1/5">
                    <div className="flex items-center justify-center w-16 h-16 mx-auto bg-midnightBlue outline-dashed outline-1 outline-offset-4 outline-midnightBlue rounded-full">
                      <span className="text-xl font-semibold text-white">
                        {item.icon}
                      </span>
                    </div>
                    <h3 className="mt-4 sm:mt-6 text-xl font-bold leading-tight text-gray-900 dark:text-white md:mt-10 font-inter">
                      {item.title}
                    </h3>
                    <p className="mt-3 sm:mt-4 text-base font-noto text-gray-600 dark:text-white">
                      {item.description}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default GDPRCompliance;