Logos — Trusted By

---
/**
 * logos-01 — Nube de logos "Trusted by" con efecto grayscale al hover.
 * Bloque Astro puro: cero JS, cero dependencias. Sin imageUrl, el nombre se
 * renderiza como wordmark tipográfico.
 */
interface Logo {
  name: string;
  imageUrl?: string;
}
interface Props {
  title?: string;
  logos: Logo[];
  class?: string;
}
const { title = 'Trusted by leading companies', logos, class: className } = Astro.props;
---

<section class:list={['w-full px-6 py-16 md:py-24', className]}>
  <div class="mx-auto max-w-6xl">
    {title && (
      <p class="mb-10 text-center text-sm font-medium text-muted-foreground">{title}</p>
    )}
    <div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-8">
      {logos.map((logo) => (
        <div class="opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0">
          {logo.imageUrl ? (
            <img src={logo.imageUrl} alt={logo.name} class="h-8 w-auto object-contain" />
          ) : (
            <span class="text-lg font-semibold text-foreground">{logo.name}</span>
          )}
        </div>
      ))}
    </div>
  </div>
</section>