---
import Layout from '../layouts/Layout.astro';
import ProductCard from '../components/ProductCard.astro';
import Breadcrumb from '../components/Breadcrumb.astro';
import { getProductsFromDB } from '../lib/products';

const spSize = Astro.cookies.get('sp_size')?.value || undefined;

const [last3, last7, last30] = await Promise.all([
  getProductsFromDB({ limit: 24, orderBy: 'newest', firstSeenAfterDays: 3, size: spSize, minShops: 1 }),
  getProductsFromDB({ limit: 48, orderBy: 'newest', firstSeenAfterDays: 7, size: spSize, minShops: 1 }),
  getProductsFromDB({ limit: 24, orderBy: 'newest', firstSeenAfterDays: 30, size: spSize, minShops: 1 }),
]);

const ids3 = new Set(last3.map(p => p.id));
const last7Extra = last7.filter(p => !ids3.has(p.id)).slice(0, 24);

const totalRecent = last7.length;
const canonicalUrl = 'https://sneakerpicks.nl/releases';
const title = `Nieuwe sneaker releases — vers toegevoegd bij SneakerPicks`;
const description = `De laatste sneaker releases in Nederland. Bekijk wat er deze week nieuw is toegevoegd aan de prijsvergelijker en vind direct de beste deal.`;

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

const itemListLd = last7.length > 0 ? {
  "@context": "https://schema.org",
  "@type": "ItemList",
  name: "Nieuwe sneaker releases",
  url: canonicalUrl,
  numberOfItems: last7.length,
  itemListElement: last7.slice(0, 20).map((s, i) => ({
    "@type": "ListItem",
    position: i + 1,
    url: `https://sneakerpicks.nl/sneakers/${s.slug}`,
    name: `${s.brand} ${s.name}`,
  })),
} : null;
---

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

  <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-7xl px-4 py-16 sm:px-6">
      <Breadcrumb items={[
        { label: 'Home', href: '/' },
        { label: 'Nieuw binnen' },
      ]} />
      <h1 class="text-4xl font-black tracking-tight sm:text-5xl">Nieuw binnen</h1>
      <p class="mt-3 max-w-2xl text-base leading-relaxed text-text-secondary">
        {totalRecent > 0
          ? `${totalRecent} sneakers zijn deze week toegevoegd aan SneakerPicks. Vers uit de feeds, direct vergelijkbaar bij alle shops.`
          : 'Hier verschijnen sneakers die deze week nieuw zijn binnengekomen.'}
      </p>
    </div>
  </section>

  <section class="mx-auto max-w-7xl px-4 pb-16 sm:px-6">
    {last3.length > 0 && (
      <div class="mb-12">
        <div class="flex items-end justify-between mb-4">
          <h2 class="text-xl font-bold tracking-tight sm:text-2xl">De laatste 72 uur</h2>
          <span class="text-sm text-text-muted">{last3.length} {last3.length === 1 ? 'sneaker' : 'sneakers'}</span>
        </div>
        <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
          {last3.map((sneaker, i) => (
            <ProductCard sneaker={sneaker} index={i} />
          ))}
        </div>
      </div>
    )}

    {last7Extra.length > 0 && (
      <div class="mb-12">
        <div class="flex items-end justify-between mb-4">
          <h2 class="text-xl font-bold tracking-tight sm:text-2xl">Deze week</h2>
          <span class="text-sm text-text-muted">{last7Extra.length} {last7Extra.length === 1 ? 'sneaker' : 'sneakers'}</span>
        </div>
        <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
          {last7Extra.map((sneaker, i) => (
            <ProductCard sneaker={sneaker} index={i} />
          ))}
        </div>
      </div>
    )}

    {last30.length > 0 && last3.length === 0 && last7Extra.length === 0 && (
      <div class="mb-12">
        <div class="flex items-end justify-between mb-4">
          <h2 class="text-xl font-bold tracking-tight sm:text-2xl">Afgelopen maand</h2>
          <span class="text-sm text-text-muted">{last30.length} {last30.length === 1 ? 'sneaker' : 'sneakers'}</span>
        </div>
        <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
          {last30.map((sneaker, i) => (
            <ProductCard sneaker={sneaker} index={i} />
          ))}
        </div>
      </div>
    )}

    {last3.length === 0 && last7Extra.length === 0 && last30.length === 0 && (
      <div class="py-20 text-center">
        <p class="text-lg text-text-muted">Nog geen nieuwe releases deze periode.</p>
        <a href="/" class="mt-4 inline-block text-accent hover:underline">
          Bekijk alle sneakers →
        </a>
      </div>
    )}

    <div class="mt-12 rounded-2xl border border-border/50 bg-bg-card p-6">
      <h2 class="text-lg font-bold tracking-tight">Op zoek naar iets specifieks?</h2>
      <p class="mt-2 text-sm text-text-secondary">
        Blader door <a href="/merken" class="text-accent hover:underline">merken</a> of gebruik de <a href="/zoeken" class="text-accent hover:underline">zoekfunctie</a>. Stel een prijsalert in op jouw favoriete sneaker en krijg bericht zodra er een betere deal komt.
      </p>
    </div>
  </section>
</Layout>