import Image from "next/image";
import Link from "next/link";
type MediaNode = {
  sourceUrl: string;
  altText?: string | null;
};
type BenefitsSectionProps = {
  data: {
    benefitsSubtitle?: string;
    benefitsTitle?: string;
    benefitsDescription?: string;
    benefitsButtonText?: string;
    benefitsLinks?: string | null;
    benefitsItemTitle?: string;
    benefitsImage?: {
      node?: MediaNode;
    };
    benefitsItems: {
      itemTitle1?: string | null;
      itemTitle2?: string | null;
      itemTitle3?: string | null;
      itemTitle4?: string | null;
      itemTitle5?: string | null;
      itemTitle6?: string | null;
      itemTitle7?: string | null;
      itemTitle8?: string | null;
      itemTitle9?: string | null;
      itemTitle10?: string | null;
    };
    benefitsCtaText?: string;
    benefitsCtaButtonText?: string;
    benefitsCtaButtonLink?: string | null;
  };
};

type BenefitItem = {
  title: string;
};

export default function BenefitsSection({ data }: BenefitsSectionProps) {
  const items: BenefitItem[] = [
    { title: data.benefitsItems.itemTitle1 },
    { title: data.benefitsItems.itemTitle2 },
    { title: data.benefitsItems.itemTitle3 },
    { title: data.benefitsItems.itemTitle4 },
    { title: data.benefitsItems.itemTitle5 },
    { title: data.benefitsItems.itemTitle6 },
    { title: data.benefitsItems.itemTitle7 },
    { title: data.benefitsItems.itemTitle8 },
    { title: data.benefitsItems.itemTitle9 },
    { title: data.benefitsItems.itemTitle10 },
  ].filter(
    (item): item is { title: string } =>
      typeof item.title === "string" && item.title.trim() !== ""
  );



  return (
    <>
      <section className="relative bg-[#101010] py-24 md:pt-28 md:pb-65 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 grid grid-cols-1 md:grid-cols-2 gap-[30px] items-center">
          {/* LEFT CONTENT */}
          <div className="max-w-xl">
            <h2 className="font-mono text-3xl md:text-4xl lg:text-[40px] leading-tight max-w-xl mb-2">
              {data.benefitsTitle}
            </h2>    
          </div>
          {/* RIGHT CONTENT */}
          <div>
            {data.benefitsSubtitle && (
              <span className="block text-lg md:text-2xl font-medium tracking-widest mb-3 text-white">
                {data.benefitsSubtitle}
              </span>
            )}
            {data.benefitsDescription && (
              <div
                className="space-y-4 text-lg font-medium text-[#fff]/70"
                dangerouslySetInnerHTML={{
                  __html: data.benefitsDescription,
                }}
              />
            )}   
          </div>
        </div>
      </section>
      {/* ================= FLOATING IMAGE ================= */}
      {data.benefitsImage?.node?.sourceUrl && (
        <div className="relative -mt-16 lg:-mt-56 z-10">
          <div className="container mx-auto px-4">
            <Image
              src={data.benefitsImage.node.sourceUrl}
              alt={data.benefitsImage.node.altText || "Benefits"}
              width={1200}
              height={600}
              className="w-full h-full object-cover mx-auto"
              priority
              unoptimized
            />
          </div>
        </div>
      )}
      <section className="relative pb-24 text-[#202020] bg-white">
        <div className="container mx-auto px-4">
          <h2 className="relative text-2xl font-medium leading-tight max-w-4xl mx-auto text-center mb-10 mt-10 md:mt-0">
            {data.benefitsItemTitle}
          </h2>
          <div>
            <ul className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {items.map((item, i) => (
                <li key={i} className="flex gap-3 items-start">
                  {/* Icon */}
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className="shrink-0">
                    <path d="M20.79 5.72003C20.4076 5.33516 19.9525 5.03004 19.4513 4.82233C18.9501 4.61463 18.4126 4.50847 17.87 4.51003H8.66001C8.1169 4.51088 7.57932 4.61911 7.0782 4.82849C6.57707 5.03786 6.12229 5.34425 5.74001 5.73003C5.7121 5.75231 5.68839 5.77941 5.67001 5.81003L2.59001 10.02C2.20357 10.6154 1.99859 11.3103 2.00001 12.02C2.00906 12.7311 2.22066 13.4249 2.61001 14.02L5.67001 18.19L5.74001 18.28C6.12245 18.6649 6.57748 18.97 7.07872 19.1777C7.57996 19.3854 8.11744 19.4916 8.66001 19.49H17.87C18.9654 19.49 20.0158 19.0549 20.7904 18.2804C21.5649 17.5059 22 16.4554 22 15.36V8.59003C21.9899 7.51144 21.5552 6.48028 20.79 5.72003ZM17.23 10.66L13.31 14.58C13.15 14.741 12.96 14.87 12.75 14.96C12.5388 15.0526 12.3106 15.1003 12.08 15.1003C11.8494 15.1003 11.6213 15.0526 11.41 14.96C11.1974 14.871 11.0039 14.742 10.84 14.58L8.90001 12.64C8.7117 12.4517 8.60592 12.1963 8.60592 11.93C8.60592 11.6637 8.7117 11.4083 8.90001 11.22C9.08831 11.0317 9.34371 10.9259 9.61001 10.9259C9.87631 10.9259 10.1317 11.0317 10.32 11.22L12.08 12.99L15.82 9.25003C15.9097 9.14534 16.02 9.06032 16.144 9.0003C16.2681 8.94028 16.4032 8.90655 16.541 8.90123C16.6787 8.89591 16.816 8.91911 16.9443 8.96939C17.0727 9.01966 17.1892 9.09592 17.2867 9.19338C17.3841 9.29083 17.4604 9.40738 17.5106 9.5357C17.5609 9.66403 17.5841 9.80136 17.5788 9.93908C17.5735 10.0768 17.5398 10.2119 17.4797 10.336C17.4197 10.4601 17.3347 10.5704 17.23 10.66Z" fill="currentColor"/>
                  </svg>

                  {/* Text */}
                  <div>
                    <h4 className="text-[16px] font-mono font-medium">
                      {item.title}
                    </h4>                      
                  </div>
                </li>
              ))}
            </ul>
            <hr className="my-20 border-t border-[#202020]/20" />
            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                {data.benefitsCtaText && (  
                  <p className="text-2xl font-medium text-[#202020] max-w-xl">
                    {data.benefitsCtaText}
                  </p>
                )}
                {data.benefitsCtaButtonText && (
                  <Link
                    href={data.benefitsCtaButtonLink || "#"}
                    className="flex items-center gap-2 justify-center border border-[#202020]/50 px-6 py-3 rounded text-[16px] font-medium text-[#202020] hover:bg-[#202020] hover:text-white transition"
                  >
                    {data.benefitsCtaButtonText}
                    <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>
        </div>
      </section>
    </>
  );
}