---
import Layout from '../layouts/Layout.astro';
import { getProductCount, getShopCount } from '../lib/products';

const totalProductsRaw = await getProductCount();
const totalShops = await getShopCount();
const roundedK = Math.floor(totalProductsRaw / 1000);
const totalProducts = `${roundedK}.000`;

const canonicalUrl = 'https://sneakerpicks.nl/waarom-sneakerpicks';
const title = 'Waarom SneakerPicks? — Slim maatfilter, pricewatch & 45+ NL shops';
const description = 'Ontdek waarom sneakerheads voor SneakerPicks kiezen: slim maatfilter per merk, pricewatch met doelprijs, prijshistorie en eerlijke vergelijking van 45+ Nederlandse webshops.';

const faq = [
  {
    question: 'Moet ik een account aanmaken?',
    answer: 'Nee. Prijzen vergelijken kan zonder account. Een gratis account is alleen nodig als je prijsalerts, een watchlist of persoonlijke aanbevelingen wilt gebruiken.',
  },
  {
    question: 'Kost SneakerPicks geld?',
    answer: 'Nee, het gebruik van SneakerPicks is 100% gratis. We verdienen een kleine commissie als je via ons naar een shop doorklikt en daar iets koopt — dat heeft geen invloed op de prijs die jij betaalt, en ook niet op de volgorde van onze vergelijking.',
  },
  {
    question: 'Hoe vaak worden prijzen bijgewerkt?',
    answer: 'Alle productfeeds worden elke nacht automatisch gesynchroniseerd. Daardoor zie je bij ons altijd verse prijzen en actuele voorraad.',
  },
  {
    question: 'Werken jullie met buitenlandse shops?',
    answer: 'Nee. We richten ons bewust op Nederlandse webshops en shops die standaard naar Nederland leveren — geen verrassingen met verzendkosten of importheffingen.',
  },
  {
    question: 'Wat is de Deal Score?',
    answer: 'De Deal Score is een cijfer van 1 tot 10 dat laat zien hoe goed een aanbieding écht is. We kijken naar de korting t.o.v. de originele prijs én naar hoe vaak de sneaker bij andere shops in voorraad is.',
  },
];

const faqLd = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: faq.map(item => ({
    '@type': 'Question',
    name: item.question,
    acceptedAnswer: {
      '@type': 'Answer',
      text: item.answer,
    },
  })),
};

const breadcrumbLd = {
  '@context': 'https://schema.org',
  '@type': 'BreadcrumbList',
  itemListElement: [
    { '@type': 'ListItem', position: 1, name: 'Home', item: 'https://sneakerpicks.nl/' },
    { '@type': 'ListItem', position: 2, name: 'Waarom SneakerPicks', item: canonicalUrl },
  ],
};
---

<Layout title={title} description={description} canonical={canonicalUrl}>
  <script type="application/ld+json" set:html={JSON.stringify(faqLd)} />
  <script type="application/ld+json" set:html={JSON.stringify(breadcrumbLd)} />

  <!-- Hero -->
  <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-3xl px-4 py-16 text-center sm:px-6 sm:py-24">
      <p class="mb-4 text-xs font-bold uppercase tracking-[0.3em] text-accent">
        Waarom SneakerPicks?
      </p>
      <h1 class="text-4xl font-black leading-tight tracking-tight sm:text-6xl">
        De slimste manier om<br />
        <span class="text-accent">sneakerprijzen</span> te vergelijken
      </h1>
      <p class="mx-auto mt-6 max-w-2xl text-lg text-text-secondary sm:text-xl">
        Geen gedoe met maten per merk, eindeloos tabbladen openen of deals missen. SneakerPicks doet
        het werk voor je — gratis en onafhankelijk.
      </p>
      <div class="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-text-muted">
        <span>{totalProducts}+ sneakers</span>
        <span class="text-border">·</span>
        <span>{totalShops}+ shops</span>
        <span class="text-border">·</span>
        <span>Dagelijks bijgewerkt</span>
      </div>
    </div>
  </section>

  <!-- USP 1: Maatfilter -->
  <section id="maatfilter" class="mx-auto max-w-4xl px-4 py-16 sm:px-6 scroll-mt-24">
    <div class="grid gap-8 md:grid-cols-[auto_1fr] md:items-start">
      <span class="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-accent/10 text-accent">
        <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l4-4 14 14-4 4L3 8z" />
          <path stroke-linecap="round" stroke-linejoin="round" d="M7 8l2 2M10 5l2 2M13 8l2 2M16 11l2 2M10 11l2 2" />
        </svg>
      </span>
      <div>
        <p class="text-xs font-bold uppercase tracking-widest text-accent">Uniek op SneakerPicks</p>
        <h2 class="mt-1 text-3xl font-black tracking-tight sm:text-4xl">Slim maatfilter per merk</h2>
        <p class="mt-4 text-lg leading-relaxed text-text-secondary">
          Een Nike valt vaak anders uit dan een Adidas of New Balance, en tussen modellen binnen één merk
          zit soms óók verschil. Bij ons stel je per merk — en zelfs per model — jouw juiste maat in.
          Daarna filteren we de hele site automatisch op alleen sneakers die jou écht passen.
        </p>
        <ul class="mt-6 space-y-2 text-text-secondary">
          <li class="flex items-start gap-2">
            <svg class="mt-1 h-4 w-4 shrink-0 text-accent" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
            Andere maat voor Nike dan voor Adidas? Geen probleem.
          </li>
          <li class="flex items-start gap-2">
            <svg class="mt-1 h-4 w-4 shrink-0 text-accent" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
            Specifieke uitzondering voor bijvoorbeeld de Air Max 90? Zet hem apart.
          </li>
          <li class="flex items-start gap-2">
            <svg class="mt-1 h-4 w-4 shrink-0 text-accent" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
            Zie alleen deals die daadwerkelijk in jouw maat op voorraad zijn.
          </li>
        </ul>
        <a href="/profiel" class="mt-6 inline-flex items-center gap-1 text-sm font-bold text-accent hover:text-accent-dim">
          Stel jouw maten in →
        </a>
      </div>
    </div>
  </section>

  <!-- USP 2: Pricewatch -->
  <section id="pricewatch" class="border-t border-border/30 bg-bg-card/30">
    <div class="mx-auto max-w-4xl px-4 py-16 sm:px-6 scroll-mt-24">
      <div class="grid gap-8 md:grid-cols-[auto_1fr] md:items-start">
        <span class="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-accent/10 text-accent">
          <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </span>
        <div>
          <p class="text-xs font-bold uppercase tracking-widest text-accent">Nooit meer een deal missen</p>
          <h2 class="mt-1 text-3xl font-black tracking-tight sm:text-4xl">Pricewatch met prijshistorie</h2>
          <p class="mt-4 text-lg leading-relaxed text-text-secondary">
            Stel jouw doelprijs in en wij laten je het weten zodra een shop onder die grens zakt.
            Dankzij onze prijshistorie (30, 90 en 365 dagen) zie je direct of "-30%" écht een goede
            deal is, of dat de sneaker vorige maand gewoon goedkoper was.
          </p>
          <ul class="mt-6 space-y-2 text-text-secondary">
            <li class="flex items-start gap-2">
              <svg class="mt-1 h-4 w-4 shrink-0 text-accent" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
              Email-alert zodra jouw doelprijs wordt bereikt.
            </li>
            <li class="flex items-start gap-2">
              <svg class="mt-1 h-4 w-4 shrink-0 text-accent" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
              Browser push-notificaties bij prijsdalingen (optioneel).
            </li>
            <li class="flex items-start gap-2">
              <svg class="mt-1 h-4 w-4 shrink-0 text-accent" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
              Deal Score van 1-10 die laat zien hoe goed de korting écht is.
            </li>
          </ul>
          <a href="/watchlist" class="mt-6 inline-flex items-center gap-1 text-sm font-bold text-accent hover:text-accent-dim">
            Bekijk je watchlist →
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- USP 3: Shops -->
  <section id="shops" class="mx-auto max-w-4xl px-4 py-16 sm:px-6 scroll-mt-24">
    <div class="grid gap-8 md:grid-cols-[auto_1fr] md:items-start">
      <span class="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-accent/10 text-accent">
        <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
        </svg>
      </span>
      <div>
        <p class="text-xs font-bold uppercase tracking-widest text-accent">{totalShops}+ Nederlandse shops</p>
        <h2 class="mt-1 text-3xl font-black tracking-tight sm:text-4xl">Alle prijzen op één pagina</h2>
        <p class="mt-4 text-lg leading-relaxed text-text-secondary">
          We vergelijken tientallen Nederlandse en NL-leverende webshops — van bekende namen als
          Zalando, Footlocker en JD Sports tot gespecialiseerde sneakerboutieks. Je ziet per maat
          welke shop de laagste prijs heeft, zonder zelf tabbladen open te moeten gooien.
        </p>
        <ul class="mt-6 space-y-2 text-text-secondary">
          <li class="flex items-start gap-2">
            <svg class="mt-1 h-4 w-4 shrink-0 text-accent" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
            Per-maat beschikbaarheid en prijs per shop.
          </li>
          <li class="flex items-start gap-2">
            <svg class="mt-1 h-4 w-4 shrink-0 text-accent" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
            Alleen shops die naar Nederland leveren — geen verrassingen.
          </li>
          <li class="flex items-start gap-2">
            <svg class="mt-1 h-4 w-4 shrink-0 text-accent" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
            Originele prijs en korting direct zichtbaar.
          </li>
        </ul>
      </div>
    </div>
  </section>

  <!-- USP 4: Onafhankelijk -->
  <section id="onafhankelijk" class="border-t border-border/30 bg-bg-card/30">
    <div class="mx-auto max-w-4xl px-4 py-16 sm:px-6 scroll-mt-24">
      <div class="grid gap-8 md:grid-cols-[auto_1fr] md:items-start">
        <span class="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-accent/10 text-accent">
          <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
        </svg>
        </span>
        <div>
          <p class="text-xs font-bold uppercase tracking-widest text-accent">Gratis & eerlijk</p>
          <h2 class="mt-1 text-3xl font-black tracking-tight sm:text-4xl">We verkopen zelf niets</h2>
          <p class="mt-4 text-lg leading-relaxed text-text-secondary">
            SneakerPicks is geen webshop. We hebben geen voorraad, geen eigen merk, geen belang bij
            welke shop je uiteindelijk kiest. De laagste prijs staat altijd bovenaan — ongeacht of we
            er affiliate-commissie op krijgen of niet. Zo simpel.
          </p>
          <ul class="mt-6 space-y-2 text-text-secondary">
            <li class="flex items-start gap-2">
              <svg class="mt-1 h-4 w-4 shrink-0 text-accent" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
              100% gratis voor bezoekers — geen premium, geen paywall.
            </li>
            <li class="flex items-start gap-2">
              <svg class="mt-1 h-4 w-4 shrink-0 text-accent" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
              Account is optioneel — prijzen bekijken kan zonder.
            </li>
            <li class="flex items-start gap-2">
              <svg class="mt-1 h-4 w-4 shrink-0 text-accent" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg>
              Volgorde op laagste prijs, niet op hoogste commissie.
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- Bonus USPs -->
  <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6">
    <div class="mb-10 text-center">
      <h2 class="text-3xl font-black tracking-tight sm:text-4xl">Wat we nog meer doen</h2>
      <p class="mt-3 text-text-secondary">Kleine extra's die het zoeken naar de perfecte pair leuker maken.</p>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3">
      <div class="rounded-2xl border border-border/50 bg-bg-card p-6">
        <h3 class="text-lg font-bold">Deal Score 1-10</h3>
        <p class="mt-2 text-sm text-text-secondary leading-relaxed">
          Elke deal krijgt objectieve beoordeling: hoe groot is de korting en hoe schaars is hij elders?
        </p>
      </div>
      <div class="rounded-2xl border border-border/50 bg-bg-card p-6">
        <h3 class="text-lg font-bold">"Voor jou" aanbevelingen</h3>
        <p class="mt-2 text-sm text-text-secondary leading-relaxed">
          Vertel ons je favoriete merken, prijsrange en stijl. Wij serveren deals die daarbij passen.
        </p>
      </div>
      <div class="rounded-2xl border border-border/50 bg-bg-card p-6">
        <h3 class="text-lg font-bold">Curated collecties</h3>
        <p class="mt-2 text-sm text-text-secondary leading-relaxed">
          Sale 15%+, trending van afgelopen 48u, nieuwe releases, onder €100 — altijd actueel.
        </p>
      </div>
      <div class="rounded-2xl border border-border/50 bg-bg-card p-6">
        <h3 class="text-lg font-bold">Merk → model → kleur</h3>
        <p class="mt-2 text-sm text-text-secondary leading-relaxed">
          Hiërarchische navigatie — van Nike naar Air Max 90 naar elke kleurvariant in één flow.
        </p>
      </div>
      <div class="rounded-2xl border border-border/50 bg-bg-card p-6">
        <h3 class="text-lg font-bold">Watchlist met doelprijs</h3>
        <p class="mt-2 text-sm text-text-secondary leading-relaxed">
          Bewaar sneakers, stel per stuk een doelprijs in en bepaal zelf hoe vaak je alerts wilt.
        </p>
      </div>
      <div class="rounded-2xl border border-border/50 bg-bg-card p-6">
        <h3 class="text-lg font-bold">Privacy-first</h3>
        <p class="mt-2 text-sm text-text-secondary leading-relaxed">
          Push & email zijn altijd opt-in. We tracken niks zonder toestemming.
        </p>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section class="border-t border-border/30 bg-bg-card/30">
    <div class="mx-auto max-w-3xl px-4 py-16 sm:px-6">
      <h2 class="text-3xl font-black tracking-tight sm:text-4xl">Veelgestelde vragen</h2>
      <div class="mt-8 space-y-3">
        {faq.map((item, i) => (
          <details class="group rounded-xl border border-border/50 bg-bg-card" open={i === 0}>
            <summary class="flex cursor-pointer items-center justify-between gap-4 p-4 font-semibold text-text transition-colors hover:text-accent sm:p-5">
              {item.question}
              <svg class="h-5 w-5 shrink-0 text-text-muted transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
              </svg>
            </summary>
            <div class="border-t border-border/30 px-4 pb-4 pt-3 text-sm leading-relaxed text-text-secondary sm:px-5 sm:pb-5">
              {item.answer}
            </div>
          </details>
        ))}
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="mx-auto max-w-3xl px-4 py-20 text-center sm:px-6">
    <h2 class="text-3xl font-black tracking-tight sm:text-4xl">Klaar om te scoren?</h2>
    <p class="mx-auto mt-4 max-w-xl text-text-secondary">
      Start met vergelijken of duik meteen in de nieuwste prijsdalingen.
    </p>
    <div class="mt-8 flex flex-wrap items-center justify-center gap-4">
      <a
        href="/sneakers"
        class="inline-flex items-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-black transition-colors hover:bg-accent-dim"
      >
        Alle sneakers
      </a>
      <a
        href="/deals"
        class="inline-flex items-center gap-2 rounded-full border border-border/50 bg-bg-card px-8 py-3 text-sm font-bold text-text transition-colors hover:border-accent/50"
      >
        Bekijk de deals →
      </a>
    </div>
  </section>
</Layout>