import ServiceCard, { Service } from "./BenefitsCard";
import Image from "next/image";

type BenefitsSectionProps = {
  data: {
    benefitsItem1?: Service | null;
    benefitsItem2?: Service | null;
  };
};

export default function BenefitsSection({ data }: BenefitsSectionProps) {
  const services: Service[] = [
    data.benefitsItem1,
    data.benefitsItem2,
  ].filter((s): s is Service => Boolean(s));

  if (!services.length) return null;

  return (
    <>
    <section className="relative bg-[#101010] py-24 md:pt-28 md:pb-45 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 */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-[30px]">
          {services.map((service, index) => (
            <ServiceCard key={index} service={service} />
          ))}
        </div>
      </div>
    </section>
    {/* ================= FLOATING IMAGE ================= */}
    <div className="relative -mt-16 lg:-mt-[90px] z-10">
      <div className="max-w-5xl mx-auto p-6 bg-[#f3f3f3] rounded-2xl overflow-hidden text-center">
        <div className="bg-white rounded-2xl border border-[#202020]/15 p-8 text-center">
          <h2 className="font-mono font-medium text-2xl md:text-4xl lg:text-[40px] text-[#202020] leading-tight mb-6">
            Let’s Work Together
          </h2>
          <div className="max-w-2xl mx-auto space-y-4">
            <p className="text-[#202020]/70 text-md md:text-lg font-medium">If you are planning a sports event, managing a league, or looking to associate your brand with sports, Togwe can support you end to end.</p>
            <p className="text-[#202020]/70 text-md md:text-lg font-medium">Get in touch with us to discuss your sponsorship management requirements and explore how we can help.</p>
          </div>
        </div>
      </div>
    </div>
    </>
  );
}