import { e as createComponent, k as renderComponent, r as renderTemplate, h as createAstro, m as maybeRenderHead, g as addAttribute } from '../chunks/astro/server_DePCulMI.mjs';
import 'piccolore';
import { $ as $$Layout } from '../chunks/Layout_DxAv3UTa.mjs';
import { b as getBlogPosts, c as getBlogCategories } from '../chunks/blog_DtV0Ytrn.mjs';
export { renderers } from '../renderers.mjs';

const $$Astro = createAstro();
const $$Index = createComponent(async ($$result, $$props, $$slots) => {
  const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
  Astro2.self = $$Index;
  const url = new URL(Astro2.request.url);
  const category = url.searchParams.get("category") || "";
  const page = Math.max(1, parseInt(url.searchParams.get("page") || "1"));
  const perPage = 12;
  const categoryMap = {
    guides: "Koopgidsen",
    deals: "Deals",
    comparisons: "Vergelijkingen",
    trends: "Trends"
  };
  const { posts, total } = await getBlogPosts({
    limit: perPage,
    offset: (page - 1) * perPage,
    category: category || void 0
  });
  await getBlogCategories();
  const totalPages = Math.ceil(total / perPage);
  function formatDate(d) {
    if (!d) return "";
    return new Date(d).toLocaleDateString("nl-NL", { day: "numeric", month: "long", year: "numeric" });
  }
  return renderTemplate`${renderComponent($$result, "Layout", $$Layout, { "title": "Blog \u2014 Sneaker Guides, Deals & Nieuws | SneakerPicks", "description": "Lees onze sneaker guides, kooptips, deals en trends. Alles wat je moet weten om de beste sneakers voor de laagste prijs te vinden." }, { "default": async ($$result2) => renderTemplate` ${maybeRenderHead()}<main class="mx-auto max-w-7xl px-4 py-12 sm:px-6"> <!-- Header --> <div class="mb-10 text-center"> <h1 class="text-4xl font-black tracking-tight sm:text-5xl">
SneakerPicks <span class="text-accent">Blog</span> </h1> <p class="mx-auto mt-4 max-w-2xl text-lg text-text-secondary">
Sneaker guides, deals & nieuws — alles om de beste sneakers voor de laagste prijs te scoren.
</p> </div> <!-- Category tabs --> <div class="mb-8 flex flex-wrap justify-center gap-2"> <a href="/blog"${addAttribute([
    "rounded-full px-4 py-2 text-sm font-semibold transition-colors",
    !category ? "bg-accent text-white" : "bg-bg-elevated text-text-secondary hover:text-text"
  ], "class:list")}>
Alle
</a> ${Object.entries(categoryMap).map(([key, label]) => renderTemplate`<a${addAttribute(`/blog?category=${key}`, "href")}${addAttribute([
    "rounded-full px-4 py-2 text-sm font-semibold transition-colors",
    category === key ? "bg-accent text-white" : "bg-bg-elevated text-text-secondary hover:text-text"
  ], "class:list")}> ${label} </a>`)} </div> <!-- Posts grid --> ${posts.length === 0 ? renderTemplate`<p class="py-20 text-center text-text-secondary">Nog geen artikelen in deze categorie.</p>` : renderTemplate`<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> ${posts.map((post) => renderTemplate`<a${addAttribute(`/blog/${post.slug}`, "href")} class="group overflow-hidden rounded-2xl border border-border/50 bg-bg-card transition-all hover:border-accent/50 hover:shadow-lg"> ${post.cover_image && renderTemplate`<div class="aspect-video overflow-hidden"> <img${addAttribute(post.cover_image, "src")}${addAttribute(post.title, "alt")} class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" loading="lazy"> </div>`} <div class="p-5"> <div class="mb-2 flex items-center gap-2"> <span class="rounded-full bg-accent/10 px-2.5 py-0.5 text-xs font-semibold text-accent"> ${categoryMap[post.category] || post.category} </span> <span class="text-xs text-text-secondary">${formatDate(post.published_at)}</span> </div> <h2 class="mb-2 text-lg font-bold leading-snug group-hover:text-accent transition-colors">${post.title}</h2> ${post.excerpt && renderTemplate`<p class="text-sm text-text-secondary line-clamp-2">${post.excerpt}</p>`} </div> </a>`)} </div>`} <!-- Pagination --> ${totalPages > 1 && renderTemplate`<div class="mt-10 flex justify-center gap-2"> ${page > 1 && renderTemplate`<a${addAttribute(`/blog?${category ? `category=${category}&` : ""}page=${page - 1}`, "href")} class="rounded-lg bg-bg-elevated px-4 py-2 text-sm font-semibold text-text-secondary hover:text-text transition-colors">
← Vorige
</a>`} <span class="flex items-center px-4 text-sm text-text-secondary">
Pagina ${page} van ${totalPages} </span> ${page < totalPages && renderTemplate`<a${addAttribute(`/blog?${category ? `category=${category}&` : ""}page=${page + 1}`, "href")} class="rounded-lg bg-bg-elevated px-4 py-2 text-sm font-semibold text-text-secondary hover:text-text transition-colors">
Volgende →
</a>`} </div>`} </main> ` })}`;
}, "C:/Users/Roel/clawd/sneakerpicks/src/pages/blog/index.astro", void 0);

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

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 };
