---
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 { getTrendingFromDB, getPriceDropsFromDB, getProductCount, getShopCount, getPopularModels } from '../lib/products';

const trending = await getTrendingFromDB(8);
const priceDrops = await getPriceDropsFromDB(6);
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);
---

<Layout title="SneakerPicks — Vergelijk Sneaker Prijzen | Laagste Prijs Garantie">
  <!-- Hero -->
  <section class="relative overflow-hidden">
    <!-- 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 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>
          <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>
            Dagelijks bijgewerkt
          </span>
        </div>
      </div>
    </div>
  </section>

  <!-- 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>


  <!-- 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>
  )}

  <!-- 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>

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