type ImpactItems = {
  itemTitle1?: string;
  itemTitle2?: string;
  itemTitle3?: string;
  itemTitle4?: string;
  itemTitle5?: string;
  itemTitle6?: string;
  itemTitle7?: string;
  itemTitle8?: string;
  itemTitle9?: string;
  itemTitle10?: string;
};

type TrustImpactProps = {
  data: {
    trustTitle: string;
    trustSubtitle: string;
    trustExpert: string;
    ourImpact: string;
    impactItems: ImpactItems;
  };
};

export default function TrustImpact({ data }: TrustImpactProps) {
  const impactList = [
    data.impactItems?.itemTitle1,
    data.impactItems?.itemTitle2,
    data.impactItems?.itemTitle3,
    data.impactItems?.itemTitle4,
    data.impactItems?.itemTitle5,
    data.impactItems?.itemTitle6,
    data.impactItems?.itemTitle7,
    data.impactItems?.itemTitle8,
    data.impactItems?.itemTitle9,
    data.impactItems?.itemTitle10,
  ].filter(
    (item): item is string =>
      typeof item === "string" && item.trim() !== ""
  );


  return (
    <section className="bg-[#F3F3F3] py-16">
      <div className="container mx-auto px-4">

        {/* Top Trust Section */}
        <div className="grid lg:grid-cols-2 gap-0 lg:gap-16 items-center mb-10 lg:mb-20">
          {/* Left */}
          <div>
            <span className="text-lg font-medium text-[#202020]/50 block mb-2">
              {data.trustSubtitle}
            </span>

            <h2 className="text-2xl md:text-4xl font-medium text-[#202020] font-mono mb-4 max-w-[350px]">
              {data.trustTitle}
            </h2>
          </div>

          {/* Right */}
          <div
            className="text-lg text-[#202020] font-medium leading-relaxed max-w-xl"
            dangerouslySetInnerHTML={{ __html: data.trustExpert }}
          />
        </div>

        {/* Impact Heading */}
        <h3 className="text-center text-xl lg:text-[32px] font-semibold text-[#202020] mb-9">
          {data.ourImpact}
        </h3>

        {/* Impact Pills */}
        <ul className="flex flex-wrap justify-center gap-1 lg:gap-4 max-w-6xl mx-auto">
          {impactList.map((item, index) => (
            <li
              key={index}
              className="bg-white border border-[#202020]/15 rounded px-6 py-3 text-md md:text-xl text-[#202020] hover:bg-[#101010] hover:text-white transition font-medium text-center"
            >
              {item}
            </li>
          ))}
        </ul>

      </div>
    </section>
  );
}