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

const allBrands = await getBrandsFromDB();
const brands = allBrands.filter(b => b.count >= 5);
---

<Layout title="Alle Merken — SneakerPicks" description="Bekijk alle sneaker merken op SneakerPicks. Vergelijk prijzen van Nike, Adidas, New Balance en meer.">
  <section class="relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-b from-accent/5 via-transparent to-transparent"></div>
    <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 text-center">
      <h1 class="text-4xl font-black tracking-tight sm:text-5xl">Alle Merken</h1>
      <p class="mt-3 text-text-secondary text-lg">{brands.length} merken · Vergelijk prijzen van alle top sneaker brands</p>
    </div>
  </section>

  <section class="mx-auto max-w-7xl px-4 pb-16 sm:px-6">
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
      {brands.map(brand => (
        <a href={`/merken/${brand.slug}`}
           class="group flex flex-col items-center gap-3 rounded-2xl border border-border/50 bg-bg-elevated/50 p-6 transition-all hover:border-accent/40 hover:bg-bg-elevated hover:shadow-lg hover:shadow-accent/5">
          <div class="flex h-16 w-16 items-center justify-center">
            {brand.logo_url ? (
              <img src={brand.logo_url} alt={brand.name} class="h-12 w-12 object-contain brand-logo-filter transition-transform group-hover:scale-110" />
            ) : (
              <span class="text-3xl font-black text-accent">{brand.name.charAt(0)}</span>
            )}
          </div>
          <div class="text-center">
            <h2 class="font-heading text-sm font-bold uppercase tracking-widest text-text group-hover:text-accent transition-colors">{brand.name}</h2>
            <p class="mt-1 text-xs text-text-muted">{brand.count} sneakers</p>
          </div>
        </a>
      ))}
    </div>
  </section>
</Layout>

<style>
  .brand-logo-filter {
    filter: brightness(0) invert(0.85);
  }
  .group:hover .brand-logo-filter {
    filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(340deg) brightness(0.85);
  }
</style>