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

// Curated list of aspirational/hype brands for the homepage carousel
const POPULAR_BRAND_SLUGS = [
  'adidas', 'nike', 'new-balance', 'jordan', 'asics', 'puma', 'hoka', 'on',
  'vans', 'converse', 'reebok', 'salomon', 'diadora', 'karhu',
];

const allBrands = await getBrandsFromDB();
const brandMap = new Map(allBrands.map(b => [b.slug, b]));
// Show curated brands in order, only if they exist in DB
const brands = POPULAR_BRAND_SLUGS
  .map(slug => brandMap.get(slug))
  .filter((b): b is NonNullable<typeof b> => !!b);
---

<section class="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 class="flex flex-wrap justify-center gap-4">
      {brands.map(brand => {
        const inlineSvg = getBrandLogo(brand.slug);
        return (
          <a
            href={`/merken/${brand.slug}`}
            class="flex w-[120px] flex-col items-center gap-3 rounded-2xl border border-border/50 bg-bg-card px-4 py-5 transition-all duration-300 hover:-translate-y-1 hover:border-accent/30 hover:shadow-lg hover:shadow-accent/5"
          >
            {inlineSvg ? (
              <div class="h-10 w-10 text-text" set:html={inlineSvg} />
            ) : brand.logo_url ? (
              <img src={brand.logo_url} alt={brand.name} class="brand-logo-filter h-10 w-auto max-w-[80px] object-contain" width="80" height="40" loading="lazy" decoding="async" onerror="this.style.display='none'" />
            ) : (
              <span class="text-3xl font-black text-text">{brand.name.charAt(0)}</span>
            )}
            <span class="text-xs font-bold tracking-wide text-text">{brand.name}</span>
          </a>
        );
      })}
    </div>
  </div>
</section>

<style>
  .brand-logo-filter {
    filter: brightness(0) invert(0.9);
  }
</style>