// Block `logos` — source `clients` → marquee TrustLogos (fallback statique),
// `presse` → PressSection (fallback statique), `custom` → marquee construit
// depuis le repeater logosCustom, sur le pattern de TrustLogos.tsx.

import TrustLogos from "@/components/TrustLogos";
import PressSection from "@/components/PressSection";
import ScrollReveal from "@/components/ScrollReveal";
import WpImage from "@/components/ui/WpImage";
import { arr, mapImage } from "@/lib/wp/mappers";
import type { LogosBlock } from "@/lib/wp/types";

const Logos = (props: LogosBlock & { position?: number }) => {
  const source = props.source ?? "clients";

  if (source === "presse") return <PressSection />;

  const customLogos = arr(props.logosCustom)
    .map((l) => ({ image: mapImage(l.image), nom: l.nom ?? "", lien: l.lien }))
    .filter((l) => l.image);

  if (source === "clients" || !customLogos.length) return <TrustLogos />;

  return (
    <section className="py-12 bg-cream overflow-hidden">
      {(props.entete?.titre || props.entete?.badge) && (
        <div className="container mx-auto px-4 mb-8">
          <p className="text-center text-xs font-semibold text-muted-foreground uppercase tracking-widest font-body">
            {props.entete?.titre ?? props.entete?.badge}
          </p>
        </div>
      )}
      <ScrollReveal>
        <div className="relative">
          <div className="flex animate-marquee">
            {[...customLogos, ...customLogos].map((logo, i) => {
              const img = (
                <WpImage
                  image={logo.image}
                  alt={logo.image!.altText || logo.nom}
                  className="h-8 lg:h-10 w-auto opacity-50 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
                />
              );
              return (
                <div
                  key={i}
                  className="flex-shrink-0 mx-8 lg:mx-12 flex items-center justify-center h-12"
                >
                  {logo.lien ? (
                    <a href={logo.lien} target="_blank" rel="noopener noreferrer">
                      {img}
                    </a>
                  ) : (
                    img
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </ScrollReveal>
    </section>
  );
};

export default Logos;