/* ---------- Types (NO any) ---------- */
type WhyItem = {
  itemTitle1?: string | null;
  itemDescription1?: string | null;
  itemTitle2?: string | null;
  itemDescription2?: string | null;
  itemTitle3?: string | null;
  itemDescription3?: string | null;
  itemTitle4?: string | null;
  itemDescription4?: string | null;
  itemTitle5?: string | null;
  itemDescription5?: string | null;
};

export type WhyPartnerData = {
  whyTitle: string;
  whySubtitle: string;
  whyExpert?: string | null;
  whyItems: WhyItem;
};

type WhyPartnerProps = {
  data: WhyPartnerData;
};

/* ---------- Component ---------- */
export default function WhyPartner({ data }: WhyPartnerProps) {
  const items = [
    { title: data.whyItems.itemTitle1, desc: data.whyItems.itemDescription1 },
    { title: data.whyItems.itemTitle2, desc: data.whyItems.itemDescription2 },
    { title: data.whyItems.itemTitle3, desc: data.whyItems.itemDescription3 },
    { title: data.whyItems.itemTitle4, desc: data.whyItems.itemDescription4 },
    { title: data.whyItems.itemTitle5, desc: data.whyItems.itemDescription5 },
  ].filter((item) => item.title || item.desc); // remove empty cards safely

  return (
    <section className="py-12 bg-[#F3F3F3] text-[#202020]">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          {/* Subtitle */}
          <span className="text-lg tracking-widest text-[#202020]/50 font-medium">
            {data.whySubtitle}
          </span>

          {/* Heading */}
          <h2 className="mt-4 mb-6 text-2xl md:text-[40px] leading-tight text-black font-mono font-medium max-w-[600px] mx-auto">
            {data.whyTitle}
          </h2>

          {/* Description */}
          {data.whyExpert && (
            <div
              className="max-w-3xl mx-auto text-[#202020]/70 text-md lg:text-lg space-y-4 font-medium"
              dangerouslySetInnerHTML={{ __html: data.whyExpert }}
            />
          )}
        </div>

        {/* Cards */}
        <div className="grid grid-cols-1 md:grid-cols-6 gap-[30px]">

          {/* First row – 2 wide cards */}
          {items.slice(0, 2).map((item, i) => (
            <div
              key={i}
              className="md:col-span-3 bg-white text-[#202020]
              transition-all duration-300
              hover:bg-[#101010] hover:text-white
              border border-[#202020]/15
              group rounded-lg p-4 text-center"
            >
              {item.title && (
                <h3 className="font-mono text-xl md:text-2xl text-[#202020] group-hover:text-white font-medium mb-3">
                  {item.title}
                </h3>
              )}
              {item.desc && (
                <div
                  className="text-[#202020]/70 group-hover:text-white font-medium text-md lg:text-lg"
                  dangerouslySetInnerHTML={{ __html: item.desc }}
                />
              )}
            </div>
          ))}

          {/* Second row – 3 cards */}
          {items.slice(2).map((item, i) => (
            <div
              key={i}
              className="md:col-span-2 bg-white text-[#202020] transition-all duration-300
              hover:bg-[#101010] hover:text-white
              border border-[#202020]/15
              group rounded-lg p-4 text-center"
            >
              {item.title && (
                <h3 className="font-mono text-xl md:text-2xl text-[#202020] group-hover:text-white font-medium mb-3">
                  {item.title}
                </h3>
              )}

              {item.desc && (
                <div
                  className="text-[#202020]/70 group-hover:text-white font-medium text-md lg:text-lg"
                  dangerouslySetInnerHTML={{ __html: item.desc }}
                />
              )}
            </div>
          ))}

        </div>
      </div>
    </section>
  );
}