import { e as createComponent, m as maybeRenderHead, g as addAttribute, r as renderTemplate, al as renderScript } from './astro/server_DePCulMI.mjs';
import 'piccolore';
import 'clsx';

const $$Header = createComponent(($$result, $$props, $$slots) => {
  const navLinks = [
    { href: "/", label: "Home" },
    { href: "/sneakers", label: "Sneakers" },
    { href: "/merken", label: "Merken" },
    { href: "/deals", label: "Deals" },
    { href: "/blog", label: "Blog" }
  ];
  return renderTemplate`${maybeRenderHead()}<header class="sticky top-0 z-40 border-b border-border/50 bg-bg/80 backdrop-blur-xl"> <nav class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6" aria-label="Hoofdnavigatie"> <!-- Logo --> <a href="/" class="flex items-center gap-1 text-2xl font-black tracking-tight" aria-label="SneakerPicks home"> <img src="/logo.svg" alt="SneakerPicks" class="hidden h-14 w-auto dark:block"> <img src="/logo-light-transparent.png" alt="SneakerPicks" class="block h-14 w-auto dark:hidden"> </a> <!-- Desktop Nav --> <div class="hidden items-center gap-8 md:flex"> ${navLinks.map((link) => renderTemplate`<a${addAttribute(link.href, "href")} class="text-sm font-semibold uppercase tracking-widest text-text-secondary transition-colors hover:text-accent"> ${link.label} </a>`)} </div> <!-- Right side --> <div class="flex items-center gap-3"> <!-- Theme toggle --> <button id="theme-toggle" class="rounded-full p-2 text-text-secondary transition-colors hover:bg-bg-elevated hover:text-text" aria-label="Wissel thema"> <svg class="dark-icon h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path> </svg> <svg class="light-icon hidden h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> </svg> </button> <!-- Mobile menu button --> <button id="mobile-menu-btn" class="rounded-lg p-2 text-text-secondary transition-colors hover:bg-bg-elevated md:hidden" aria-label="Menu openen" aria-expanded="false"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </nav> <!-- Mobile menu --> <div id="mobile-menu" class="hidden border-t border-border/50 bg-bg/95 backdrop-blur-xl md:hidden"> <div class="space-y-1 px-4 py-4"> ${navLinks.map((link) => renderTemplate`<a${addAttribute(link.href, "href")} class="block rounded-lg px-3 py-2.5 text-sm font-semibold uppercase tracking-widest text-text-secondary transition-colors hover:bg-bg-elevated hover:text-accent"> ${link.label} </a>`)} </div> </div> </header> ${renderScript($$result, "C:/Users/Roel/clawd/sneakerpicks/src/components/Header.astro?astro&type=script&index=0&lang.ts")}`;
}, "C:/Users/Roel/clawd/sneakerpicks/src/components/Header.astro", void 0);

const $$Footer = createComponent(($$result, $$props, $$slots) => {
  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
  return renderTemplate`${maybeRenderHead()}<footer class="mt-24 border-t border-border/50 bg-bg-card"> <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6"> <div class="grid grid-cols-2 gap-8 md:grid-cols-4"> <!-- Brand --> <div class="col-span-2 md:col-span-1"> <a href="/" class="text-2xl font-black tracking-tight"> <span class="text-text">Sneaker</span><span class="text-accent">Picks</span> </a> <p class="mt-3 text-sm leading-relaxed text-text-secondary">
Vergelijk sneaker prijzen bij alle Nederlandse shops. Bespaar op je favoriete kicks.
</p> </div> <!-- Links --> <div> <h3 class="mb-4 text-xs font-bold uppercase tracking-widest text-text-muted">Navigatie</h3> <ul class="space-y-2.5"> <li><a href="/sneakers" class="text-sm text-text-secondary transition-colors hover:text-accent">Alle Sneakers</a></li> <li><a href="/deals" class="text-sm text-text-secondary transition-colors hover:text-accent">Deals</a></li> <li><a href="/merken" class="text-sm text-text-secondary transition-colors hover:text-accent">Merken</a></li> </ul> </div> <div> <h3 class="mb-4 text-xs font-bold uppercase tracking-widest text-text-muted">Merken</h3> <ul class="space-y-2.5"> <li><a href="/merken/nike" class="text-sm text-text-secondary transition-colors hover:text-accent">Nike</a></li> <li><a href="/merken/adidas" class="text-sm text-text-secondary transition-colors hover:text-accent">Adidas</a></li> <li><a href="/merken/new-balance" class="text-sm text-text-secondary transition-colors hover:text-accent">New Balance</a></li> <li><a href="/merken/puma" class="text-sm text-text-secondary transition-colors hover:text-accent">Puma</a></li> <li><a href="/merken/asics" class="text-sm text-text-secondary transition-colors hover:text-accent">ASICS</a></li> </ul> </div> <div> <h3 class="mb-4 text-xs font-bold uppercase tracking-widest text-text-muted">Info</h3> <ul class="space-y-2.5"> <li><a href="#" class="text-sm text-text-secondary transition-colors hover:text-accent">Over Ons</a></li> <li><a href="#" class="text-sm text-text-secondary transition-colors hover:text-accent">Privacy</a></li> <li><a href="#" class="text-sm text-text-secondary transition-colors hover:text-accent">Voorwaarden</a></li> <li><a href="#" class="text-sm text-text-secondary transition-colors hover:text-accent">Contact</a></li> </ul> </div> </div> <div class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-border/50 pt-8 sm:flex-row"> <p class="text-xs text-text-muted">&copy; ${currentYear} SneakerPicks.nl — Alle rechten voorbehouden.</p> <p class="text-xs text-text-muted">Prijzen worden regelmatig bijgewerkt. Bekijk de shop voor de actuele prijs.</p> </div> </div> </footer>`;
}, "C:/Users/Roel/clawd/sneakerpicks/src/components/Footer.astro", void 0);

export { $$Footer as $, $$Header as a };
