import React from "react";
import { PartnersSectionProps } from "./types";
import ImageWithFallback from "@/shared/ImageWithFallback";

export default function PartnersSection({
  heading,
  description,
  partners,
}: PartnersSectionProps) {
  // Chunk into rows of 3
  const rows: (typeof partners)[] = [];
  for (let i = 0; i < partners.length; i += 3) {
    rows.push(partners.slice(i, i + 3));
  }

  return (
    <section className="py-14 bg-white">
      <div className="container lg:px-16 px-4">
        {/* Heading — right-aligned */}
        <h2
          data-aos="fade-down"
          className="text-2xl lg:text-4xl font-bold text-start text-primary mb-4"
        >
          {heading}
        </h2>

        {description && (
          <p
            data-aos="fade-up"
            className="text-textgrey text-base text-start mb-10 leading-relaxed"
          >
            {description}
          </p>
        )}

        {/* Logo grid */}
        <div className="mt-6">
          {rows.map((row, rowIndex) => (
            <React.Fragment key={rowIndex}>
              {/* Horizontal divider between rows — plain gray */}
              {/* {rowIndex > 0 && <div className="w-full h-px bg-border my-0" />} */}

              {/* Row */}
              <div className="flex space-y-4">
                {row.map((partner, colIndex) => (
                  <React.Fragment key={partner.id}>
                    {/* Vertical divider with primary dot in the middle */}
                    {colIndex > 0 && (
                      <div className="relative flex-shrink-0 w-px self-stretch bg-primary/30 mx-0">
                        {/* Diamond dot at vertical center */}
                        <span
                          aria-hidden="true"
                          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
                                     w-2 h-2 bg-primary rotate-45 block"
                        />
                      </div>
                    )}

                    {/* Logo cell */}
                    <div
                      data-aos="zoom-in"
                      data-aos-delay={String(colIndex * 100)}
                      className="flex-1 flex items-center justify-center py-10 px-6 min-h-[160px]"
                    >
                      <ImageWithFallback
                        src={partner.logo ?? ""}
                        alt={partner.name}
                        width={160}
                        height={80}
                        className="object-contain max-h-[80px] w-auto"
                      />
                    </div>
                  </React.Fragment>
                ))}
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}