---
import Layout from '../../layouts/Layout.astro';
import ProductCard from '../../components/ProductCard.astro';
import FilterSidebar from '../../components/FilterSidebar.tsx';
import { sneakers } from '../../data/mock';

const analyticsItems = sneakers.map((s, i) => ({
  item_id: s.id, item_name: `${s.brand} ${s.name}`, item_brand: s.brand, price: s.lowestPrice, index: i
}));
---

<Layout title="Alle Sneakers — SneakerPicks" description="Bekijk en vergelijk alle sneakers. Filter op merk, prijs en maat.">
  <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
    <div class="mb-8">
      <h1 class="text-3xl font-black tracking-tight sm:text-4xl">Alle Sneakers</h1>
      <p class="mt-2 text-text-secondary">{sneakers.length} sneakers gevonden</p>
    </div>

    <div class="flex flex-col gap-8 lg:flex-row">
      <!-- Sidebar -->
      <div class="w-full shrink-0 lg:w-64">
        <FilterSidebar client:load />
      </div>

      <!-- Grid -->
      <div class="flex-1">
        <!-- Sort bar -->
        <div class="mb-6 flex items-center justify-between rounded-2xl border border-border/50 bg-bg-card px-4 py-3">
          <span class="text-sm text-text-muted">{sneakers.length} resultaten</span>
          <select class="rounded-lg bg-bg-elevated px-3 py-1.5 text-sm text-text outline-none" aria-label="Sorteer op">
            <option>Prijs: laag → hoog</option>
            <option>Prijs: hoog → laag</option>
            <option>Nieuwste</option>
            <option>Hoogste korting</option>
          </select>
        </div>

        <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3">
          {sneakers.map((sneaker, i) => (
            <ProductCard sneaker={sneaker} index={i} />
          ))}
        </div>

        <!-- Pagination -->
        <div class="mt-12 flex justify-center gap-2">
          <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-accent text-sm font-bold text-bg">1</span>
          <a href="#" class="flex h-10 w-10 items-center justify-center rounded-xl border border-border/50 text-sm font-bold text-text-muted transition-colors hover:border-accent/50 hover:text-accent">2</a>
          <a href="#" class="flex h-10 w-10 items-center justify-center rounded-xl border border-border/50 text-sm font-bold text-text-muted transition-colors hover:border-accent/50 hover:text-accent">3</a>
        </div>
      </div>
    </div>
  </section>

  <script is:inline define:vars={{ analyticsItems }}>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ ecommerce: null });
    window.dataLayer.push({
      event: 'view_item_list',
      ecommerce: {
        item_list_id: 'sneakers',
        item_list_name: 'Alle Sneakers',
        items: analyticsItems.map(function(item, i) {
          return Object.assign({}, item, { item_list_id: 'sneakers', item_list_name: 'Alle Sneakers' });
        })
      }
    });
  </script>
</Layout>