import React from "react";
import Image from "next/image";
import Conductone3 from "@/public/assest/conductone3.png";
import Arrow from "@/public/assest/gis_north-arrow.svg";

type HeroAccreditationBodyProps = {
  main: any[];
  table: any[];
};
function HeroAccreditationBody({ main, table }: HeroAccreditationBodyProps) {
  return (
    <div className="container m-auto overflow-hidden">
      <div className="mx-auto max-w-4xl px-4 text-center">
        <h1 className="mb-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
          Accreditation Body
        </h1>
        <p className="mb-12 text-lg ">
          Accreditation bodies are established in many countries and regions
          with the purpose of ensuring compliance with the requirements of
          standards as per the applicable sectors.
        </p>
      </div>
      <div className="">
        {/* Hero Section */}
        <div className="container mx-auto px-4 py-16 md:py-16">
          <div className="flex flex-col md:pl-[100px] md:flex-row items-start justify-between">
            {/* Text Content */}
            <div className="w-full md:w-1/2">
              <div className="w-full space-y-4">
                <p className="mb-12 text-gray-800 text-lg ">
                  The function of an accreditation body is to assess and
                  evaluate organizations that provide validation/verification
                  bodies and/or bodies for the certification of management
                  systems, products, services, personnel and other programmes of
                  conformity assessment (known as certification body) against
                  internationally agreed standards, ensuring their competence,
                  impartiality, and performance capability thereby demonstrating
                  their credibility to the market by granting accreditation.
                </p>

                <ul className="space-y-4 flex flex-col gap-3 text-left text-xl">
                  <li className="flex items-start space-x-3 rtl:space-x-reverse">
                    <Image src={Arrow} alt="Technology" unoptimized={true} />
                    <span>
                      IAAB will recognise the accreditation body after the
                      assessment in order to the function are in line with IAAB
                      requirements and applicable international standards.
                    </span>
                  </li>
                  <li className="flex items-start space-x-3 rtl:space-x-reverse">
                    <Image src={Arrow} alt="Technology" unoptimized={true} />
                    <span>
                      IAAB accepts the application from accreditation body
                      across the globe, to become member.
                    </span>
                  </li>
                  <li className="flex items-start space-x-3 rtl:space-x-reverse">
                    <Image src={Arrow} alt="Technology" unoptimized={true} />
                    <span>
                      Accreditation Body must sign IAAB’s Global Level Agreement
                      (GLA) to be member.
                    </span>
                  </li>
                </ul>
              </div>
            </div>

            {/* Image Grid */}
            <div className="w-full md:w-1/2 md:relative md:left-[55px]">
              <div className="bg-btn p-8 rounded-3xl">
                <div className="grid grid-cols-3 gap-4 p-6 bg-white">
                  <Image
                    src={Conductone3}
                    alt="Technology"
                    className="w-[100%] md:w-[100%] hover:transform hover:scale-105 transition-transform duration-300"
                    width={50}
                    height={30}
                    unoptimized={true}
                  />
                  <Image
                    src={Conductone3}
                    alt="Technology"
                    className="w-[100%] md:w-[100%] hover:transform hover:scale-105 transition-transform duration-300"
                    width={50}
                    height={30}
                    unoptimized={true}
                  />
                  <Image
                    src={Conductone3}
                    alt="Technology"
                    className="w-[100%] md:w-[100%] hover:transform hover:scale-105 transition-transform duration-300"
                    width={50}
                    height={30}
                    unoptimized={true}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default HeroAccreditationBody;