---
import Base from '../layouts/Base.astro';
import { getProducts, formatPrice } from '../lib/products';
const products = await getProducts();
const catKey = (c) => ({ 'Hoodie':'hoodie','Cap':'cap','T-Shirt':'tshirt','Tasche':'tasche','Digital':'workshop' }[c] || (c||'').toLowerCase());
const filters = [
  { key:'alle', label:'Alle' }, { key:'hoodie', label:'Hoodies' }, { key:'cap', label:'Caps' },
  { key:'tshirt', label:'T-Shirts' }, { key:'tasche', label:'Taschen' }, { key:'workshop', label:'Workshop' },
];
const count = (k) => k==='alle' ? products.length + 1 : (k==='workshop' ? 1 : products.filter(p=>catKey(p.category)===k).length);
---
<Base title={"Shop — PMPNZNG"} page="shop" active="shop">
  <div class="shop-header"><div class="shop-header-inner">
    <div class="shop-header-eyebrow">Kollektion 2025</div>
    <h1 class="shop-header-title">Alle Produkte</h1>
    <p class="shop-header-sub">Bio-Baumwolle · Fairtrade · Für die SHK-Community</p>
  </div></div>

  <div class="filter-bar" role="navigation" aria-label="Produktfilter"><div class="filter-inner">
    {filters.map((f,i) => (
      <button class={`filter-btn${i===0?' active':''}`} data-filter={f.key}>{f.label} <span class="filter-count">{count(f.key)}</span></button>
    ))}
  </div></div>

  <section class="shop-grid-wrap"><div class="shop-grid" id="shop-grid">
    {products.map((p) => {
      const free = p.freigestellt && p.freigestellt.length > 0;
      const img = free ? p.freigestellt : p.cardImage;
      return (
        <a class="shop-product-card" href={`/produkt/${p.slug}`} data-category={catKey(p.category)}>
          <div class={`card-img-wrap${free ? ' freigestellt' : ''}`}>
            {p.badge && <span class="card-badge-shop">{p.badge}</span>}
            <img src={img} alt={p.name} width="600" height="750" loading="lazy" />
          </div>
          <div class="card-body-shop">
            <span class="card-category-shop">{p.category}</span>
            <span class="card-name-shop" set:html={p.name} />
            <div class="card-footer-shop">
              <span class="card-price-shop">{formatPrice(p.priceCents)}</span>
              <span class="card-cta-shop">Ansehen</span>
            </div>
          </div>
        </a>
      );
    })}
    <a class="shop-product-card" href="/produkt/online-workshop" data-category="workshop">
      <div class="card-digital-cover">
        <div class="card-digital-cover-bg"></div>
        <span class="card-digital-eyebrow">Digital · Workshop</span>
        <span class="card-digital-title">Social Media<strong>im Handwerk</strong></span>
        <div class="card-digital-stat"><span class="card-digital-stat-num">2,1 Mio</span><span class="card-digital-stat-label">Impressionen / 30 Tage</span></div>
      </div>
      <div class="card-body-shop">
        <span class="card-category-shop">Digitales Produkt</span>
        <span class="card-name-shop">Social Media im<br/>Handwerk</span>
        <div class="card-footer-shop"><span class="card-price-shop">49,00 €</span><span class="card-cta-shop">Ansehen</span></div>
      </div>
    </a>
  </div></section>

  <div class="shop-cta-band">
    <h2>Kostenloser Versand ab 50 €</h2>
    <p>Alle Produkte in Bio-Baumwolle und Fairtrade-zertifiziert. Produktion in Europa.</p>
    <a href="/faq" class="btn btn-outline">Häufige Fragen</a>
  </div>

  <script is:inline>
    const fbtns = document.querySelectorAll('.filter-btn');
    fbtns.forEach((b) => b.addEventListener('click', () => {
      fbtns.forEach((x) => x.classList.remove('active')); b.classList.add('active');
      const f = b.dataset.filter;
      document.querySelectorAll('.shop-product-card').forEach((c) => { c.style.display = (f === 'alle' || c.dataset.category === f) ? '' : 'none'; });
    }));
  </script>
</Base>

<style is:global>
.shop-header { background: var(--c-surface-1); border-bottom: 1px solid var(--c-border); padding: var(--sp-xl) var(--gutter) var(--sp-lg); }
.shop-header-inner { max-width: var(--max-w); margin: 0 auto; }
.shop-header-eyebrow { font-size: 9px; letter-spacing: 0.32em; color: var(--c-red-bright); text-transform: uppercase; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.shop-header-eyebrow::before { content:''; display:block; width:24px; height:2px; background:var(--c-red-bright); }
.shop-header-title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: var(--sp-sm); }
.shop-header-sub { font-size: 13px; color: var(--c-text-muted); }
.filter-bar { border-bottom: 1px solid var(--c-border); background: var(--c-bg); position: sticky; top: var(--header-h); z-index: 100; }
.filter-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; }
.filter-inner::-webkit-scrollbar { display: none; }
.filter-btn { flex-shrink: 0; padding: 14px 24px; font-size: 10px; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase; color: var(--c-text-muted); border-bottom: 2px solid transparent; transition: all var(--dur-fast) var(--ease-out); background: none; cursor: pointer; white-space: nowrap; }
.filter-btn:hover { color: var(--c-text); }
.filter-btn.active { color: var(--c-text); border-bottom-color: var(--c-red); }
.filter-count { display: inline-block; background: var(--c-surface-2); padding: 2px 6px; font-size: 8px; font-weight: 900; margin-left: 6px; color: var(--c-text-muted); }
.filter-btn.active .filter-count { background: var(--c-red); color: #fff; }
.shop-grid-wrap { max-width: var(--max-w); margin: 0 auto; padding: var(--sp-lg) var(--gutter) var(--sp-2xl); }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.shop-product-card { background: var(--c-card); position: relative; cursor: pointer; display: flex; flex-direction: column; transition: transform var(--dur-med) var(--ease-out); text-decoration: none; color: var(--c-card-text); }
.shop-product-card:hover { z-index: 2; }
.card-img-wrap { aspect-ratio: 4/5; overflow: hidden; position: relative; background: var(--c-card); }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.card-img-wrap.freigestellt { background: var(--c-card); }
.card-img-wrap.freigestellt img { object-fit: contain; padding: 20px 24px 0; transform-origin: bottom center; }
.shop-product-card:hover .card-img-wrap img { transform: scale(1.04); }
.card-badge-shop { position: absolute; top: 16px; left: 0; background: var(--c-red); color: #fff; font-size: 8px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; padding: 5px 12px; z-index: 1; }
.card-body-shop { padding: 18px 20px 20px; border-top: 1px solid rgba(17,17,17,0.1); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-category-shop { font-size: 8px; letter-spacing: 0.22em; color: #777; text-transform: uppercase; font-weight: 700; }
.card-name-shop { font-family: var(--font-display); font-size: 15px; font-weight: 900; line-height: 1.15; text-transform: uppercase; color: #111; }
.card-footer-shop { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.card-price-shop { font-family: var(--font-display); font-size: 18px; font-weight: 900; color: #111; }
.card-cta-shop { font-size: 8px; letter-spacing: 0.2em; font-weight: 900; text-transform: uppercase; color: var(--c-red); display: flex; align-items: center; gap: 6px; }
.card-cta-shop::after { content: '→'; }
.card-digital-cover { aspect-ratio: 4/5; overflow: hidden; position: relative; background: #0a0a0a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 28px; }
.card-digital-cover-bg { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(255,255,255,0.025) 19px, rgba(255,255,255,0.025) 20px), repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(255,255,255,0.025) 19px, rgba(255,255,255,0.025) 20px); }
.card-digital-eyebrow { font-size: 7px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--c-red-bright); font-weight: 700; position: relative; z-index: 1; margin-bottom: 16px; }
.card-digital-title { font-family: var(--font-display); font-size: 22px; font-weight: 900; text-transform: uppercase; line-height: 0.95; text-align: center; position: relative; z-index: 1; color: #f0f0f0; }
.card-digital-title strong { color: var(--c-red-bright); display: block; }
.card-digital-stat { position: absolute; bottom: 14px; right: 14px; background: var(--c-red); padding: 8px 10px; text-align: center; z-index: 2; }
.card-digital-stat-num { font-family: var(--font-display); font-size: 13px; font-weight: 900; line-height: 1; display: block; color: #fff; }
.card-digital-stat-label { font-size: 6px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 2px; display: block; }
.shop-cta-band { background: var(--c-surface-1); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: var(--sp-xl) var(--gutter); text-align: center; }
.shop-cta-band h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 36px); font-weight: 900; text-transform: uppercase; margin-bottom: 12px; }
.shop-cta-band p { font-size: 13px; color: var(--c-text-muted); margin-bottom: var(--sp-md); }
@media (max-width: 1024px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .shop-grid { grid-template-columns: 1fr; } }
</style>
