// const reasons = [
//   "Extensive experience in agricultural, real estate, and industrial sectors",
//   "Commitment to the highest quality and safety standards",
//   "Competitive prices and distinguished services",
//   "Professional team of experts and specialists",
//   "Use of latest technologies and practices",
//   "Social and environmental responsibility",
// ];

export default function AboutWhyChooseSection({ data }: { data: any }) {
  return (
    <section className="bg-[#0B4B2A] py-10 text-white md:py-14">
      <div className="mx-auto w-full max-w-6xl px-4 sm:px-6">
        <h2 className="text-center text-3xl font-bold md:text-3xl">{data.sec_3_title}</h2>
        <div className="mt-7 grid gap-4 sm:gap-5 md:grid-cols-2">
          {data.sec_3_repeater.map((reason: any, index: number) => (
            <div
              key={index}
              className="flex items-start gap-3 text-lg font-semibold text-white/90 sm:text-xl"
            >
              <span className="mt-0.5 inline-flex h-7 w-7 items-center justify-center rounded-full border border-[#9FCD00] text-[#9FCD00]">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M16.704 5.29a1 1 0 010 1.415l-7.1 7.1a1 1 0 01-1.415 0l-3.594-3.593a1 1 0 111.414-1.414l2.887 2.887 6.392-6.392a1 1 0 011.415 0z"
                    clipRule="evenodd"
                  />
                </svg>
              </span>
              <span>{reason.value_text_1}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}