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

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.">
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "ItemList",
    name: "Alle Sneaker Merken",
    description: "Vergelijk sneaker prijzen van alle top merken bij Nederlandse webshops.",
    numberOfItems: brands.length,
    itemListElement: brands.map((b, i) => ({
      "@type": "ListItem",
      position: i + 1,
      url: `https://sneakerpicks.nl/merken/${b.slug}`,
      name: b.name,
    })),
  })} />
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home", item: "https://sneakerpicks.nl/" },
      { "@type": "ListItem", position: 2, name: "Merken" },
    ],
  })} />
  <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">
            {(() => {
              const inlineSvg = getBrandLogo(brand.slug);
              if (inlineSvg) return <div class="h-12 w-12 text-text transition-transform group-hover:scale-110 group-hover:text-accent" set:html={inlineSvg} />;
              if (brand.logo_url) return <img src={brand.logo_url} alt={brand.name} class="h-12 w-12 object-contain brand-logo-filter transition-transform group-hover:scale-110" width="48" height="48" loading="lazy" decoding="async" onerror="this.style.display='none'" />;
              return <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>