import ServiceCard, { Service } from "./ServiceCard";

type ServicesGridProps = {
  data: {
    servicesGridSubtitle?: string;
    solutionsGridTitle?: string;
    services1?: Service | null;
    services2?: Service | null;
    services3?: Service | null;
    services4?: Service | null;
    services5?: Service | null;
    services6?: Service | null;
  };
};

export default function ServicesGrid({ data }: ServicesGridProps) {
  const services: Service[] = [
    data.services1,
    data.services2,
    data.services3,
    data.services4,
    data.services5,
    data.services6,
  ].filter((s): s is Service => Boolean(s));

  if (!services.length) return null;

  return (
    <section className="py-24 bg-white">
      <div className="container mx-auto px-4">

        {/* HEADER */}
        <div className="max-w-4xl mx-auto text-center mb-16">
          {data.servicesGridSubtitle && (
            <span className="block text-base tracking-widest text-[#202020]/60 mb-3">
              {data.servicesGridSubtitle}
            </span>
          )}

          {data.solutionsGridTitle && (
            <h2 className="font-mono font-medium text-2xl md:text-4xl lg:text-[40px] text-[#202020] leading-tight mb-6">
              {data.solutionsGridTitle}
            </h2>
          )}
        </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} />
          ))}
        </div>
      </div>
    </section>
  );
}