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;
      };
    };
  };
};


export default function BenefitsSection({ data }: BenefitsSectionProps) {


  return (
    <section className="relative py-24 md:pt-28 md:pb-40 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-sm">
            <h2 className="font-mono text-3xl md:text-4xl lg:text-[40px] leading-tight max-w-lg mb-2">
              {data.benefitsTitle}
            </h2>

                       
          </div>

          {/* RIGHT CONTENT */}
          <div>
            {data.benefitsDescription && (
              <div
                className="space-y-4 text-lg font-medium text-[#fff]/70"
                dangerouslySetInnerHTML={{
                  __html: data.benefitsDescription,
                }}
              />
            )} 
          </div>

      </div>
    </section>
  );
}