import React from "react";
import { renderSpanHTML } from "@/service/AdvancedFieldService";

export default function AboutOverviewSection({ data }: { data: any }) {


  const overviewCards = [
    {
      title: data.sec_1_bottom_col_1_title,
      description:
        data.sec_1_bottom_col_1_description,
      iconBg: "bg-[#6b8e23]", // اللون الزيتي المطابق للصورة الجديدة
      // هذا المسار (Path) يمثل أيقونة الهدف (Target) كما في الصورة
      iconPath: data.sec_1_bottom_col_1_icon,
    },
    {
      title: data.sec_1_bottom_col_2_title,
      description:
        data.sec_1_bottom_col_2_description,
      iconBg: "bg-[#9FCD00]", 
      iconPath: data.sec_1_bottom_col_2_icon,
    },
  ];
  


  return (
    <section className="w-full bg-white py-10 md:py-14">
      <div className="mx-auto w-full max-w-[1400px] px-4 sm:px-6">
        <div className="mb-10 space-y-3 md:mb-12">
          {/* <h2 className="text-2xl font-bold text-slate-900 md:text-3xl">{data.sec_1_title}</h2> */}
          <h2 className="text-xl font-semibold text-slate-900 md:text-3xl">{data.sec_1_title}</h2>
          <p className="w-full max-w-4xl text-sm font-medium leading-relaxed text-slate-500 sm:text-base md:text-lg">
            {data.sec_1_description}
            </p>
        </div>

        <div className="grid w-full gap-8 md:grid-cols-2 md:gap-10">
          {overviewCards.map((card, index) => (
            <div
              key={index}
              className="flex flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-[#9FCD00]/50"
            >
              <div className="flex items-center gap-4 mb-3">
                <div
                  className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl ${card.iconBg} shadow-sm`}
                >
                  {/* {React.createElement(card.iconPath)} */}
                  {renderSpanHTML(card.iconPath)}
                </div>
                <h3 className="text-lg font-bold text-slate-900 md:text-xl">{card.title}</h3>
              </div>
              <p className="text-sm leading-relaxed text-slate-600 sm:text-base">
                {card.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}