---
import Layout from "../../layouts/Layout.astro";
import ProductCard from "../../components/ProductCard.astro";
import { saleProducts } from "../../data/products";
import type { Locale } from "../../i18n/config";
import { useTranslations } from "../../i18n/ui";

const lang: Locale = "de";
const t = useTranslations(lang);
const items = saleProducts();
---
<Layout title="Sale" description="Aktuelle Angebote bei Van's DIY & Bastelbedarf." lang={lang} path="/sale/">
  <div class="container">
    <section class="page-banner" style="background-image:url('/img/banner-sale.webp'); --banner-ratio: 1600 / 639;">
      <div class="page-banner-content">
        <span class="eyebrow">{t.sale.eyebrow}</span>
        <h1>{t.sale.title}</h1>
        <p class="lead">{t.sale.lead}</p>
      </div>
    </section>
  </div>
  <section class="section-tight">
    <div class="container">
      {items.length > 0 ? (
        <>
          <p class="small result-count-static">{t.shop.resultCount(items.length)}</p>
          <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
        </>
      ) : (
        <p class="small">{t.sale.empty}</p>
      )}
    </div>
  </section>
</Layout>