---
import { getBrandsFromDB } from '../lib/products';

const allBrands = await getBrandsFromDB();
const brands = allBrands.slice(0, 20);
---

<section class="overflow-hidden py-16">
  <div class="mx-auto max-w-7xl px-4 sm:px-6">
    <h2 class="mb-8 text-xs font-bold uppercase tracking-[0.2em] text-text-muted">Populaire merken</h2>
  </div>
  <div class="flex gap-4 overflow-x-auto px-4 pb-4 scrollbar-hide sm:px-6">
    {brands.map(brand => (
      <a
        href={`/merken/${brand.slug}`}
        class="flex min-w-[140px] flex-col items-center gap-3 rounded-2xl border border-border/50 bg-bg-card px-6 py-6 transition-all duration-300 hover:-translate-y-1 hover:border-accent/30 hover:shadow-lg hover:shadow-accent/5"
      >
        {brand.logo_url ? (
          <img src={brand.logo_url} alt={brand.name} class="h-10 w-auto object-contain" loading="lazy" />
        ) : (
          <span class="text-3xl font-black text-text">{brand.name.charAt(0)}</span>
        )}
        <span class="text-sm font-bold tracking-wide text-text">{brand.name}</span>
      </a>
    ))}
  </div>
</section>