import Image from "next/image";
import Link from "next/link";

type BenefitsSectionProps = {
  data: {
    benefitsSubtitle?: string;
    benefitsTitle?: string;
    benefitsDescription?: string;
    benefitsButtonText?: string;
    benefitsLinks?: string | null;
    benefitsImage?: {
      node?: {
        sourceUrl?: string;
        altText?: string;
      };
    };
    benefitsItems: {
      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;
      itemTitle6?: string | null;
      itemDescription6?: string | null;
    };
  };
};
type BenefitItem = {
  title: string | null | undefined;
  description: string | null | undefined;
};

export default function BenefitsSection({ data }: BenefitsSectionProps) {
  const items: BenefitItem[] = [
    {
      title: data.benefitsItems.itemTitle1,
      description: data.benefitsItems.itemDescription1,
    },
    {
      title: data.benefitsItems.itemTitle2,
      description: data.benefitsItems.itemDescription2,
    },
    {
      title: data.benefitsItems.itemTitle3,
      description: data.benefitsItems.itemDescription3,
    },
    {
      title: data.benefitsItems.itemTitle4,
      description: data.benefitsItems.itemDescription4,
    },
    {
      title: data.benefitsItems.itemTitle5,
      description: data.benefitsItems.itemDescription5,
    },
    {
      title: data.benefitsItems.itemTitle6,
      description: data.benefitsItems.itemDescription6,
    },
  ].filter(
    (item): item is { title: string; description: string | null | undefined } =>
      typeof item.title === "string" && item.title.trim() !== ""
  );


  return (
    <section className="relative bg-[#101010] py-24 md:py-26 text-white overflow-hidden">
      {/* Background Image */}
      {/* <div className="absolute inset-0 -z-10">
        <Image
          src="/benefits-bg-single.webp"
          alt="Benefits of working with Togwe"
          fill
          className="object-cover"
          priority
        />
      </div> */}
      <div className="container mx-auto px-4">
          {/* HEADER */}
          <div className="max-w-3xl mx-auto text-center mb-16">
            {data.benefitsSubtitle && (
              <span className="block text-base tracking-widest text-[#ffffff]/50 mb-3">
                {data.benefitsSubtitle}
              </span>
            )}

            {data.benefitsTitle && (
              <h2 className="font-mono font-medium text-2xl md:text-4xl lg:text-[40px] text-[#ffffff] leading-tight">
                {data.benefitsTitle}
              </h2>
            )}
            {/* DESCRIPTION */}
            {data.benefitsDescription && (
              <div
                className="text-[16px] lg:text-lg font-medium text-[#ffffff]/70 group-hover:text-white/70"
                dangerouslySetInnerHTML={{
                  __html: data.benefitsDescription,
                }}
              />
            )}
          </div>

          {/* RIGHT CONTENT */}
          <div>
            <ul className="space-y-4 grid md:grid-cols-3 md:gap-x-[30px] md:gap-y-[30px] md:space-y-0">
              {items.map((item, i) => (
                <li key={i} className="flex gap-3 items-start">
                  {/* Text */}
                  <div 
                  className="h-full w-full
                    rounded-2xl p-6
                    bg-transparent text-[#ffffff]
                    border border-[#ffffff]/15 hover:border-[#ffffff]
                    transition-all duration-300
                    hover:bg-[#ffffff] hover:text-[#202020]
                    border border-[#202020]/15
                    group
                  ">
                    <h4 className="text-2xl lg:text-2xl font-mono font-medium mb-2 text-[#ffffff] group-hover:text-[#202020]">
                      {item.title}
                    </h4>
                    {item.description && (
                      <div
                        className="text-[16px] lg:text-lg font-medium text-[#ffffff]/70 group-hover:text-[#202020]/70"
                        dangerouslySetInnerHTML={{
                          __html: item.description,
                        }}
                      />
                    )} 
                    
                  </div>
                </li>
              ))}
            </ul>

            {data.benefitsButtonText && (
              <Link
                href={data.benefitsLinks || "#"}
                className="inline-flex items-center gap-2 border border-[#ffffff]/50 px-6 py-3 rounded text-[16px] font-medium text-[#fff] bg-transparent hover:bg-[#ffffff] hover:text-[#202020] transition"
              >
                {data.benefitsButtonText}
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.67188 0.5L17.3026 8.73842L8.67188 16.9768" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M17.2999 8.73828L0.5 8.73828" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path>
                </svg>
              </Link>
            )}
          </div>

      </div>
    </section>
  );
}