---
import Layout from "../../../layouts/Layout.astro";
import ProductCard from "../../../components/ProductCard.astro";
import { categories, getCategory, subcategoryChipLabel } from "../../../data/categories";
import { productsByCategory } from "../../../data/products";
import type { Locale } from "../../../i18n/config";
import { useTranslations } from "../../../i18n/ui";

export function getStaticPaths() {
  return categories.map((c) => ({ params: { kategorie: c.slug } }));
}

const lang: Locale = "en";
const t = useTranslations(lang);
const { kategorie } = Astro.params;
const category = getCategory(kategorie!)!;
const items = productsByCategory(category.slug);
---
<Layout title={category.name[lang]} description={category.description[lang]} lang={lang} path={`/shop/${category.slug}/`}>
  <div class="container">
    <p class="small breadcrumb" style="margin-top:1.5rem;"><a href="/en/shop/">{t.shop.breadcrumbShop}</a> / <strong>{category.name[lang]}</strong></p>
    <section class="page-banner" style="background-image:url('/img/banner-shop.webp'); --banner-ratio: 1600 / 729;">
      <div class="page-banner-content">
        <span class="eyebrow" aria-hidden="true">{category.icon} {t.shop.breadcrumbShop}</span>
        <h1>{category.name[lang]}</h1>
        <p class="lead">{category.description[lang]}</p>
      </div>
    </section>
  </div>

  <section class="section-tight">
    <div class="container">
      {category.subcategories && category.subcategories.length > 0 && (
        <>
          <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
          <div class="subcategory-chips">
            {category.subcategories.map((s) => (
              <a class="subcategory-chip" href={`/en/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
            ))}
          </div>
        </>
      )}
      {items.length > 0 && (
        <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.mainCategoryLabel}</h2>
      )}
      {items.length > 0 ? (
        <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
      ) : (
        <p class="small">{t.shop.categoryEmpty}</p>
      )}
      <p class="legal-hint small">{t.common.vatNote} {t.common.allPricesPlusShipping}</p>
    </div>
  </section>
</Layout>
