// const values = [
//   {
//     title: "Quality",
//     description: "We are committed to delivering the highest quality standards in all our products and services.",
//   },
//   {
//     title: "Innovation",
//     description: "We strive for continuous development and adoption of the latest technologies and practices.",
//   },
//   {
//     title: "Sustainability",
//     description: "We care about protecting the environment and natural resources for future generations.",
//   },
//   {
//     title: "Integrity",
//     description: "We work with transparency and credibility in all our business dealings.",
//   },
//   {
//     title: "Excellence",
//     description: "We strive to achieve superiority and leadership in everything we do.",
//   },
//   {
//     title: "Partnership",
//     description: "We believe in building long-term relationships with our customers and partners.",
//   },
// ];


export default function AboutValuesSection({ data }: { data: any }) {
  return (
    <section className="bg-white py-10 md:py-14">
      <div className="mx-auto w-full max-w-[1400px] px-4 sm:px-6">
        {/* <h2 className="text-2xl font-bold text-slate-900 md:text-3xl">{data.sec_2_title}</h2> */}
        <h2 className="text-xl font-semibold text-slate-900 md:text-3xl">{data.sec_2_title}</h2>
        <div className="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {data.sec_2_repeater.map((value: any, index: number) => (
            <article
              key={index}
              className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-[#9FCD00]/50"
            >
              <h3 className="text-base font-semibold text-[#6B7B2B] md:text-lg">{value.value_text_1}</h3>
              <p className="mt-2 text-sm leading-relaxed text-slate-600 sm:text-base">{value.value_text_2}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}