---
import Layout from '../layouts/Layout.astro';
import ProductCard from '../components/ProductCard.astro';
import BrandCarousel from '../components/BrandCarousel.astro';
import SearchBar from '../components/SearchBar.tsx';
import RecentlyViewed from '../components/RecentlyViewed.tsx';
import SneakerOfTheDay from '../components/SneakerOfTheDay.astro';
import UspStrip from '../components/UspStrip.astro';
import ForYouSection from '../components/ForYouSection.tsx';
import DealsForYouSection from '../components/DealsForYouSection.tsx';
import StyleQuiz from '../components/StyleQuiz.tsx';
import { getTrendingFromDB, getPriceDropsFromDB, getProductCount, getShopCount, getPopularModels } from '../lib/products';
import { getBlogPosts } from '../lib/blog';
import { getUserFromRequest, getUserFromCookie } from '../lib/user-auth';

const spGender = Astro.cookies.get('sp_gender')?.value || undefined;

// Hierarchical size filtering: check advanced mode cookie and user profile
const user = await getUserFromCookie(Astro.cookies);
const advancedOn = Astro.cookies.get('sp_size_mode')?.value === 'on';
const userId = (advancedOn && user?.id) ? user.id : undefined;
const spSize = userId ? undefined : (Astro.cookies.get('sp_size')?.value || undefined);

const trending = await getTrendingFromDB(8, spSize, spGender, userId);
const priceDrops = await getPriceDropsFromDB(8, spSize, spGender, userId);
const totalProductsRaw = await getProductCount();
const totalShops = await getShopCount();
// Round to nice number: 726508 → "726.000"
const roundedK = Math.floor(totalProductsRaw / 1000);
const totalProducts = `${roundedK}.000`;
const popularModels = await getPopularModels(16);
const { posts: latestPosts } = await getBlogPosts({ limit: 2 });

const categoryLabels: Record<string, string> = {
  guides: 'Koopgids',
  deals: 'Deals',
  comparisons: 'Vergelijking',
  trends: 'Trends',
};
---

<Layout title="SneakerPicks — Vergelijk Sneaker Prijzen | Laagste Prijs Garantie">
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "Organization",
    inLanguage: "nl-NL",
    name: "SneakerPicks",
    url: "https://sneakerpicks.nl",
    logo: "https://sneakerpicks.nl/logo.svg",
    description: "Vergelijk sneaker prijzen bij alle Nederlandse shops. Vind de laagste prijs.",
    email: "info@sneakerpicks.nl",
    contactPoint: {
      "@type": "ContactPoint",
      contactType: "customer service",
      email: "info@sneakerpicks.nl",
      url: "https://sneakerpicks.nl/contact",
      availableLanguage: "Dutch",
    },
    sameAs: [
      "https://twitter.com/SneakerPicksNL",
    ],
  })} />
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "WebSite",
    inLanguage: "nl-NL",
    name: "SneakerPicks",
    url: "https://sneakerpicks.nl",
    potentialAction: {
      "@type": "SearchAction",
      target: "https://sneakerpicks.nl/zoeken?q={search_term_string}",
      "query-input": "required name=search_term_string",
    },
  })} />
  <!-- Hero -->
  <section class="relative">
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <!-- Gradient bg -->
      <div class="absolute inset-0 bg-gradient-to-b from-accent/5 via-transparent to-transparent"></div>
      <div class="absolute -top-40 left-1/2 h-80 w-80 -translate-x-1/2 rounded-full bg-accent/10 blur-[120px]"></div>
    </div>

    <div class="relative mx-auto max-w-7xl px-4 pb-20 pt-24 sm:px-6 sm:pt-32">
      <div class="mx-auto max-w-3xl text-center">
        <p class="animate-fade-up mb-4 text-xs font-bold uppercase tracking-[0.3em] text-accent">
          Vergelijk • Bespaar • Score
        </p>
        <h1 class="animate-fade-up stagger-1 text-5xl font-black leading-[1.05] tracking-tight sm:text-7xl">
          Vind de <span class="text-accent">laagste</span> sneaker prijs
        </h1>
        <p class="animate-fade-up stagger-2 mt-6 text-lg text-text-secondary sm:text-xl">
          Vergelijk prijzen bij <span class="font-semibold text-text">{totalShops}+ Nederlandse shops</span>. Mis nooit meer een deal.
        </p>

        <div class="animate-fade-up stagger-3 mx-auto mt-10 max-w-xl">
          <SearchBar client:load large={true} />
        </div>

        <div class="animate-fade-up stagger-4 mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-text-muted">
          <span class="flex items-center gap-1.5">
            <svg class="h-4 w-4 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>
            {totalProducts}+ sneakers
          </span>
          <span class="flex items-center gap-1.5">
            <svg class="h-4 w-4 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>
            {totalShops}+ shops
          </span>
          <a href="/methodologie" class="flex items-center gap-1.5 transition-colors hover:text-accent">
            <svg class="h-4 w-4 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>
            Dagelijks bijgewerkt
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- USP Strip -->
  <UspStrip class="mt-2" />

  <!-- Sneaker of the Day — prominent, right after hero -->
  <SneakerOfTheDay />

  <!-- Trending -->
  <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6">
    <div class="mb-8 flex items-end justify-between">
      <div>
        <h2 class="text-2xl font-black tracking-tight sm:text-3xl">Trending</h2>
        <p class="mt-1 text-sm text-text-muted">De populairste sneakers van dit moment</p>
      </div>
      <a href="/collecties/trending" class="text-sm font-bold text-accent transition-colors hover:text-accent-dim">
        Bekijk alles →
      </a>
    </div>
    <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
      {trending.map((sneaker, i) => (
        <ProductCard sneaker={sneaker} index={i} />
      ))}
    </div>
  </section>

  <!-- For You — Personalized recommendations for logged-in users -->
  <section class="mx-auto max-w-7xl px-4 sm:px-6">
    <ForYouSection client:visible />
  </section>

  <!-- Deals For You — Personalized price drops for logged-in users -->
  <DealsForYouSection client:visible />

  <!-- Popular Models -->
  {popularModels.length > 0 && (
    <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
      <h2 class="mb-6 text-sm font-bold uppercase tracking-widest text-text-muted">Populaire modellen</h2>
      <div class="flex flex-wrap gap-2">
        {popularModels.map(m => (
          <a href={`/merken/${m.brandSlug}/${m.slug}`}
             class="inline-flex items-center gap-2 rounded-full border border-border/50 bg-bg-card px-4 py-2 text-sm font-semibold text-text-secondary hover:border-accent/40 hover:text-accent transition-all hover:shadow-md hover:shadow-accent/5">
            <span class="text-text-muted text-xs">{m.brandName}</span>
            {m.name}
          </a>
        ))}
      </div>
    </section>
  )}

  <!-- Blog / Artikelen -->
  {latestPosts.length > 0 && (
    <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
      <div class="mb-6 flex items-end justify-between">
        <div>
          <h2 class="text-2xl font-black tracking-tight sm:text-3xl">Uit de blog</h2>
          <p class="mt-1 text-sm text-text-muted">Tips, vergelijkingen en sneaker nieuws</p>
        </div>
        <a href="/blog" class="text-sm font-bold text-accent transition-colors hover:text-accent-dim">
          Alle artikelen →
        </a>
      </div>
      <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
        {latestPosts.map(post => (
          <a href={`/blog/${post.slug}`} class="group flex gap-4 rounded-2xl border border-border/50 bg-bg-card p-4 transition-all hover:border-accent/30 hover:shadow-lg hover:shadow-accent/5">
            {post.cover_image && (
              <div class="hidden sm:block shrink-0 w-32 h-24 overflow-hidden rounded-xl">
                <img src={post.cover_image} alt={post.title} class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" width="128" height="96" loading="lazy" decoding="async" />
              </div>
            )}
            <div class="flex flex-col justify-center">
              <span class="mb-1 text-[10px] font-bold uppercase tracking-widest text-accent">
                {categoryLabels[post.category] || post.category}
              </span>
              <h3 class="font-semibold leading-snug text-text transition-colors group-hover:text-accent line-clamp-2">
                {post.title}
              </h3>
              {post.excerpt && (
                <p class="mt-1 text-xs text-text-muted line-clamp-2">{post.excerpt}</p>
              )}
            </div>
          </a>
        ))}
      </div>
    </section>
  )}

  <!-- Price Drops -->
  <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6">
    <div class="mb-8 flex items-end justify-between">
      <div>
        <h2 class="text-2xl font-black tracking-tight sm:text-3xl">
          Prijsdalingen
        </h2>
        <p class="mt-1 text-sm text-text-muted">Sneakers die net in prijs zijn gedaald</p>
      </div>
      <a href="/collecties/sale" class="text-sm font-bold text-deal transition-colors hover:text-deal-dim">
        Alle deals →
      </a>
    </div>
    <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
      {priceDrops.map((sneaker, i) => (
        <ProductCard sneaker={sneaker} index={i} />
      ))}
    </div>
  </section>

  <!-- Style Quiz -->
  <StyleQuiz client:visible />

  <!-- Recently Viewed -->
  <RecentlyViewed client:idle />

  <!-- Brands -->
  <BrandCarousel />
</Layout>