---
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 = "en";
const t = useTranslations(lang);
const items = saleProducts();
---
<Layout title="Sale" description="Current offers at 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 ? (
        <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
      ) : (
        <p class="small">{t.sale.empty}</p>
      )}
    </div>
  </section>
</Layout>