import ServiceCard, { Service } from "./CustomCard";
import ServiceCtaCard from "./CustomCtaCard";
import Image from "next/image";

type ServiceCta = {
  serviceTitle?: string;
  serviceCtaLink?: string | null;
  serviceBoxBg?: {
    node?: {
      sourceUrl?: string;
      altText?: string | null;
    };
  };
}; 
type CustomGridProps = {
  data: {
    customGridSubtitle?: string;
    customGridTitle?: string;
    customGridDescription?: string;
    customServices1?: Service | null;
    customServices2?: Service | null;
    customServices3?: Service | null;
    customServices4?: Service | null;
    customServices5?: Service | null;
    customServices6?: ServiceCta | null;
  };
};

export default function CustomGrid({ data }: CustomGridProps) {
  const services: Service[] = [
    data.customServices1,
    data.customServices2,
    data.customServices3,
    data.customServices4,
    data.customServices5,
  ].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-40 text-white overflow-hidden">
      {/* <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-5xl mx-auto text-center mb-16">
          {data.customGridSubtitle && (
            <span className="block text-base tracking-widest text-[#FFFFFF]/50 mb-3">
              {data.customGridSubtitle}
            </span>
          )}

          {data.customGridTitle && (
            <h2 className="font-mono font-medium text-2xl md:text-4xl lg:text-[40px] leading-tight mb-6">
              {data.customGridTitle}
            </h2>
          )}
          {data.customGridDescription && (
            <div
              className="text-[#ffffff]/70 text-lg font-medium"
              dangerouslySetInnerHTML={{
                __html: data.customGridDescription,
              }}
            />
          )}
        </div>

        {/* GRID */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[30px]">
          {services.map((service, index) => (
            <ServiceCard key={index} service={service} />
          ))}

          {/* CTA CARD (always last) */}
          {data.customServices6 && (
          <ServiceCtaCard
            title={data.customServices6.serviceTitle}
            link={data.customServices6.serviceCtaLink}
            bgImage={data.customServices6.serviceBoxBg?.node}
          />
        )}
        </div>
      </div>
    </section>
  );
}