// Block `certifications` (produit) — entête + grille de cards logo / nom /
// description, sur le pattern cards blanches du repo (RelatedProducts,
// PressSection pour le traitement des logos).

import ScrollReveal from "@/components/ScrollReveal";
import WpImage from "@/components/ui/WpImage";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { CertificationsBlock } from "@/lib/wp/types";
import { SectionHeading } from "./shared";

const Certifications = (props: CertificationsBlock & { position?: number }) => {
  const items = arr(props.itemsCertifications).filter((i) => i.nom || i.logo);
  if (!items.length) return null;

  return (
    <section className="py-16 lg:py-24 bg-cream">
      <div className="container mx-auto px-4 lg:px-8">
        <ScrollReveal>
          <SectionHeading entete={props.entete} />
        </ScrollReveal>

        <ScrollReveal stagger>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 max-w-4xl mx-auto">
            {items.map((item, i) => {
              const logo = mapImage(item.logo);
              return (
                <div
                  key={i}
                  className="flex flex-col items-center text-center rounded-2xl border border-border bg-white p-6 lg:p-8 shadow-[0_2px_20px_rgba(26,42,58,0.05)]"
                >
                  {logo && (
                    <WpImage
                      image={logo}
                      alt={logo.altText || item.nom || ""}
                      className="h-14 w-auto object-contain mb-4"
                    />
                  )}
                  {item.nom && (
                    <p className="font-satoshi font-bold text-foreground text-base mb-1.5">
                      {item.nom}
                    </p>
                  )}
                  {item.description && (
                    <p className="text-sm text-foreground/55 font-body leading-relaxed">
                      {item.description}
                    </p>
                  )}
                </div>
              );
            })}
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
};

export default Certifications;