type WhyItems = {
  title1?: string;
  description1?: string;
  title2?: string;
  description2?: string;
  title3?: string;
  description3?: string;
  title4?: string;
  description4?: string;
};

type WhyChooseBrandProps = {
  data: {
    whySubtitle?: string;
    whyTitle?: string;
    whyDescription?: string;
    whyItems?: WhyItems;
  };
};

export default function WhyBrandChooseSection({ data }: WhyChooseBrandProps) {
  const items = [
    { title: data.whyItems?.title1, desc: data.whyItems?.description1 },
    { title: data.whyItems?.title2, desc: data.whyItems?.description2 },
    { title: data.whyItems?.title3, desc: data.whyItems?.description3 },
    { title: data.whyItems?.title4, desc: data.whyItems?.description4 },
  ].filter((i) => i.title);

  if (!items.length) return null;

  return (
    <section className="relative pb-12">
        <div className="relative bg-[#f3f3f3] rounded-[24px] container mx-auto px-4 py-6 md:mt-[-80px] md:px-4 md:py-8 lg:px-4 lg:py-8">
            {/* Header */}
            <div className="max-w-4xl mx-auto text-center mb-16">
                {data.whySubtitle && (
                <span className="block text-base tracking-widest text-[#202020]/60 mb-3">
                    {data.whySubtitle}
                </span>
                )}
                <h2 className="font-mono font-medium text-2xl md:text-4xl lg:text-[40px] text-[#202020] leading-tight mb-3 max-w-2xl mx-auto">
                {data.whyTitle}
                </h2>
                {data.whyDescription && (
                <div
                    className="text-[#202020]/70 text-lg font-medium"
                    dangerouslySetInnerHTML={{ __html: data.whyDescription }}
                />
                )}
            </div>

            {/* Cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 lg:gap-[30px]">
                {items.map((item, index) => (
                <div
                    key={index}
                    className="relative bg-white text-[#202020] transition-all duration-300 hover:bg-[#101010] hover:text-white border border-[#202020]/15 group rounded-2xl p-8 lg:p-[30px]"
                >
                    <h4 className="font-mono font-medium text-lg lg:text-2xl text-[#202020] group-hover:text-white mb-[30px]">{item.title}</h4>
                    {item.desc && (
                    <div
                        className="text-sm lg:text-lg text-[#202020]/70 group-hover:text-white font-medium leading-relaxed"
                        dangerouslySetInnerHTML={{ __html: item.desc }}
                    />
                    )}
                </div>
                ))}
            </div>
        </div>
    </section>
  );
}