import { e as createComponent, k as renderComponent, r as renderTemplate, h as createAstro, ak as defineScriptVars, g as addAttribute, m as maybeRenderHead } from '../chunks/astro/server_DePCulMI.mjs';
import 'piccolore';
import { $ as $$Layout } from '../chunks/Layout_DxAv3UTa.mjs';
import { $ as $$ProductCard } from '../chunks/ProductCard_7e_PI4fu.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { g as getProductsFromDB, f as getProductCount, d as getBrandsFromDB } from '../chunks/products_DQrRaeeW.mjs';
export { renderers } from '../renderers.mjs';

const EU_SIZES = ["36", "37", "37.5", "38", "38.5", "39", "40", "40.5", "41", "42", "42.5", "43", "44", "44.5", "45", "46", "47", "48", "49"];
function CatalogFilters({ brands, currentBrand, currentGender, currentSize, currentSort }) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [brandSearch, setBrandSearch] = useState("");
  function applyFilter(key, value) {
    const params = new URLSearchParams(window.location.search);
    if (value) {
      params.set(key, value);
    } else {
      params.delete(key);
    }
    params.delete("pagina");
    window.location.href = `/sneakers?${params.toString()}`;
  }
  const filteredBrands = brands.filter((b) => b.name.toLowerCase().includes(brandSearch.toLowerCase()));
  const genders = [
    { value: "", label: "Alle" },
    { value: "heren", label: "Heren" },
    { value: "dames", label: "Dames" },
    { value: "unisex", label: "Unisex" }
  ];
  const sortOptions = [
    { value: "popular", label: "Populair" },
    { value: "newest", label: "Nieuwste" },
    { value: "price_asc", label: "Prijs ↑" },
    { value: "price_desc", label: "Prijs ↓" },
    { value: "discount", label: "Korting" }
  ];
  const content = /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
    /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xs font-bold uppercase tracking-widest text-text-muted", children: "Sorteer" }),
      /* @__PURE__ */ jsx(
        "select",
        {
          value: currentSort,
          onChange: (e) => applyFilter("sort", e.target.value),
          className: "w-full rounded-lg bg-bg-elevated px-3 py-2 text-sm text-text outline-none",
          children: sortOptions.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xs font-bold uppercase tracking-widest text-text-muted", children: "Maat" }),
      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
        currentSize && /* @__PURE__ */ jsxs(
          "button",
          {
            onClick: () => applyFilter("maat", ""),
            className: "rounded-lg bg-accent/20 px-2.5 py-1.5 text-xs font-bold text-accent",
            children: [
              "✕ ",
              currentSize
            ]
          }
        ),
        EU_SIZES.map((s) => /* @__PURE__ */ jsx(
          "button",
          {
            onClick: () => applyFilter("maat", s),
            className: `rounded-lg px-2.5 py-1.5 text-xs font-bold transition-all ${currentSize === s ? "bg-accent text-bg" : "bg-bg-elevated text-text-muted hover:text-text hover:bg-bg-elevated/80"}`,
            children: s
          },
          s
        ))
      ] })
    ] }),
    /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xs font-bold uppercase tracking-widest text-text-muted", children: "Geslacht" }),
      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: genders.map((g) => /* @__PURE__ */ jsx(
        "button",
        {
          onClick: () => applyFilter("geslacht", g.value),
          className: `rounded-xl px-3 py-1.5 text-xs font-bold transition-all ${currentGender === g.value ? "bg-accent text-bg" : "bg-bg-elevated text-text-muted hover:text-text"}`,
          children: g.label
        },
        g.value
      )) })
    ] }),
    /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx("h3", { className: "mb-3 text-xs font-bold uppercase tracking-widest text-text-muted", children: "Merk" }),
      /* @__PURE__ */ jsx(
        "input",
        {
          type: "text",
          placeholder: "Zoek merk...",
          value: brandSearch,
          onChange: (e) => setBrandSearch(e.target.value),
          className: "mb-2 w-full rounded-lg bg-bg-elevated px-3 py-2 text-sm text-text outline-none placeholder:text-text-muted"
        }
      ),
      /* @__PURE__ */ jsxs("div", { className: "max-h-48 space-y-1 overflow-y-auto", children: [
        currentBrand && /* @__PURE__ */ jsxs(
          "button",
          {
            onClick: () => applyFilter("merk", ""),
            className: "flex w-full items-center gap-2 rounded-lg bg-accent/20 px-3 py-1.5 text-sm font-bold text-accent",
            children: [
              "✕ ",
              currentBrand
            ]
          }
        ),
        filteredBrands.map((b) => /* @__PURE__ */ jsxs(
          "button",
          {
            onClick: () => applyFilter("merk", b.slug),
            className: `flex w-full items-center justify-between rounded-lg px-3 py-1.5 text-sm transition-colors ${currentBrand === b.slug ? "bg-accent text-bg font-bold" : "text-text-secondary hover:bg-bg-elevated"}`,
            children: [
              /* @__PURE__ */ jsx("span", { children: b.name }),
              /* @__PURE__ */ jsx("span", { className: "text-xs text-text-muted", children: b.count })
            ]
          },
          b.slug
        ))
      ] })
    ] }),
    /* @__PURE__ */ jsx(
      "button",
      {
        onClick: () => {
          window.location.href = "/sneakers";
        },
        className: "w-full rounded-xl border border-border/50 py-2 text-xs font-bold text-text-muted transition-colors hover:border-accent/50 hover:text-accent",
        children: "Filters wissen"
      }
    )
  ] });
  return /* @__PURE__ */ jsxs("div", { children: [
    /* @__PURE__ */ jsxs(
      "button",
      {
        onClick: () => setMobileOpen(!mobileOpen),
        className: "mb-4 flex w-full items-center justify-center gap-2 rounded-xl border border-border/50 bg-bg-card py-3 text-sm font-bold text-text-secondary lg:hidden",
        children: [
          /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" }) }),
          "Filters ",
          mobileOpen ? "verbergen" : "tonen"
        ]
      }
    ),
    mobileOpen && /* @__PURE__ */ jsx("div", { className: "mb-6 rounded-2xl border border-border/50 bg-bg-card p-5 lg:hidden", children: content }),
    /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx("div", { className: "sticky top-24 rounded-2xl border border-border/50 bg-bg-card p-5", children: content }) })
  ] });
}

var __freeze = Object.freeze;
var __defProp = Object.defineProperty;
var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(cooked.slice()) }));
var _a;
const $$Astro = createAstro();
const $$Index = createComponent(async ($$result, $$props, $$slots) => {
  const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
  Astro2.self = $$Index;
  const url = Astro2.url;
  const brand = url.searchParams.get("merk") || void 0;
  const gender = url.searchParams.get("geslacht") || void 0;
  const size = url.searchParams.get("maat") || void 0;
  const sort = url.searchParams.get("sort") || "popular";
  const page = Math.max(1, parseInt(url.searchParams.get("pagina") || "1"));
  const perPage = 36;
  const products = await getProductsFromDB({
    limit: perPage,
    offset: (page - 1) * perPage,
    orderBy: sort,
    brand,
    gender,
    size
  });
  const totalCount = await getProductCount();
  const brands = await getBrandsFromDB();
  const totalPages = Math.ceil(totalCount / perPage);
  const title = brand ? `${brand} Sneakers \u2014 SneakerPicks` : "Alle Sneakers \u2014 Vergelijk Prijzen | SneakerPicks";
  const description = brand ? `Vergelijk ${brand} sneaker prijzen bij alle Nederlandse shops.` : "Bekijk en vergelijk alle sneakers. Filter op merk, prijs, maat en geslacht.";
  const analyticsItems = products.map((s, i) => ({
    item_id: s.id,
    item_name: `${s.brand} ${s.name}`,
    item_brand: s.brand,
    price: s.lowestPrice,
    index: i
  }));
  return renderTemplate`${renderComponent($$result, "Layout", $$Layout, { "title": title, "description": description }, { "default": async ($$result2) => renderTemplate(_a || (_a = __template([" ", '<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 gevonden</p> </div> <div class="flex flex-col gap-8 lg:flex-row"> <!-- Sidebar --> <div class="w-full shrink-0 lg:w-64"> ', ' </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">', " resultaten</span> </div> ", " <!-- Pagination --> ", " </div> </div> </section> <script>(function(){", "\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({ ecommerce: null });\n    window.dataLayer.push({\n      event: 'view_item_list',\n      ecommerce: {\n        item_list_id: 'sneakers',\n        item_list_name: 'Alle Sneakers',\n        items: analyticsItems.map(function(item, i) {\n          return Object.assign({}, item, { item_list_id: 'sneakers', item_list_name: 'Alle Sneakers' });\n        })\n      }\n    });\n  })();<\/script> "])), maybeRenderHead(), totalCount, renderComponent($$result2, "CatalogFilters", CatalogFilters, { "client:load": true, "brands": brands.slice(0, 30).map((b) => ({ name: b.name, slug: b.slug, count: b.count })), "currentBrand": brand || "", "currentGender": gender || "", "currentSize": size || "", "currentSort": sort, "client:component-hydration": "load", "client:component-path": "C:/Users/Roel/clawd/sneakerpicks/src/components/CatalogFilters.tsx", "client:component-export": "default" }), products.length, products.length > 0 ? renderTemplate`<div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3"> ${products.map((sneaker, i) => renderTemplate`${renderComponent($$result2, "ProductCard", $$ProductCard, { "sneaker": sneaker, "index": i })}`)} </div>` : renderTemplate`<div class="py-16 text-center"> <p class="text-lg text-text-secondary">Geen sneakers gevonden met deze filters.</p> </div>`, totalPages > 1 && renderTemplate`<div class="mt-12 flex justify-center gap-2"> ${Array.from({ length: Math.min(totalPages, 10) }, (_, i) => i + 1).map((p) => {
    const params = new URLSearchParams(url.searchParams);
    params.set("pagina", String(p));
    return renderTemplate`<a${addAttribute(`/sneakers?${params.toString()}`, "href")}${addAttribute([
      "flex h-10 w-10 items-center justify-center rounded-xl text-sm font-bold transition-colors",
      p === page ? "bg-accent text-bg" : "border border-border/50 text-text-muted hover:border-accent/50 hover:text-accent"
    ], "class:list")}> ${p} </a>`;
  })} </div>`, defineScriptVars({ analyticsItems })) })}`;
}, "C:/Users/Roel/clawd/sneakerpicks/src/pages/sneakers/index.astro", void 0);

const $$file = "C:/Users/Roel/clawd/sneakerpicks/src/pages/sneakers/index.astro";
const $$url = "/sneakers";

const _page = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
  __proto__: null,
  default: $$Index,
  file: $$file,
  url: $$url
}, Symbol.toStringTag, { value: 'Module' }));

const page = () => _page;

export { page };
