# Strony 12–15 — E-commerce

Sklep z klimatyzatorami. Stan koszyka przez Zustand (`lib/cart-store.ts`, persist do localStorage).

---

## 12 — Sklep / listing (`/sklep`)

### Sekcje
1. **Nagłówek kategorii** — H1 + krótki opis SEO.
2. **Pasek narzędzi** — liczba wyników + sortowanie (cena rosnąco/malejąco, popularność, nowości).
3. **Układ dwukolumnowy:**
   - Lewa (`ProductFilters`, Client) — filtry: producent (checkboxy), moc (zakres/checkboxy),
     cena (suwak), typ/kategoria, funkcje (Wi-Fi, grzanie). Na mobile: panel wysuwany.
   - Prawa (`ProductsGrid`) — siatka kart (`ProductCard`): zdjęcie, marka, nazwa, moc,
     cena, cena z montażem, przycisk „wybierz", ikona serca (lista życzeń — UI).
4. **Paginacja** lub „pokaż więcej".
5. **Blok opisowy SEO** na dole.

### Dane
Z `content/products.ts` przez `getProducts()`. Filtrowanie/sortowanie po stronie klienta.

---

## 13 — Karta produktu (`/sklep/[slug]`)

- `generateStaticParams` + `generateMetadata` z danych produktu.

### Układ
1. **Górna część — dwie kolumny:**
   - Lewa (`ProductGallery`, Client) — duże zdjęcie + miniatury.
   - Prawa (`ProductInfo`) — marka, nazwa (H1), cena, cena z montażem,
     wybór wariantu mocy (jeśli są warianty), przyciski „Dodaj do koszyka" i „Kup z montażem",
     ikony: lista życzeń, porównanie. Atuty: dostawa, gwarancja, raty.
2. **Zakładki** (`Tabs`, Client) — Opis / Dane techniczne (tabela ze `specs`) / Opinie.
3. **Podobne produkty** (`FeaturedProducts`) — 4 karty z tej samej kategorii.

### Akcje
„Dodaj do koszyka" → `cart-store` (dodaje produkt + wybrany wariant). Feedback (toast/licznik w headerze).

### JSON-LD
Product + Offer + BreadcrumbList.

---

## 14 — Koszyk (`/koszyk`)

### Układ
1. **Lista pozycji** (`CartItems`, Client) — miniatura, nazwa, wariant, ilość (− / +),
   cena jednostkowa, suma pozycji, usuń. Opcja „dodaj montaż" przy pozycji.
2. **Podsumowanie** (`CartSummary`) — wartość, VAT, suma, pole kodu rabatowego (UI),
   przycisk „Przejdź do zamówienia".
3. **Pusty koszyk** — stan pusty z komunikatem + przycisk „Przejdź do sklepu".

### Dane
Stan z `cart-store` (Zustand, persist). Bez realnego checkoutu na tym etapie —
przycisk prowadzi do placeholdera / strony „w przygotowaniu" lub formularza zamówienia (do ustalenia).

---

## 15 — Raty 0% (`/raty`)

### Sekcje
1. **Hero** — H1 + hasło o ratach 0%.
2. **Jak to działa** (`ProcessSteps`) — kroki wnioskowania.
3. **Kalkulator rat** (`InstallmentCalculator`, Client) — suwak kwoty → wyświetla ratę miesięczną
   (prosty wzór: kwota / liczba rat, np. do 20 rat 0%). Bez integracji finansowej — kalkulacja poglądowa.
4. **Warunki** — lista warunków (placeholder).
5. **FAQ** (`FaqAccordion`).
6. **CTA** — „Złóż wniosek" (placeholder / link do kontaktu).

### Uwaga
Oznacz wszystkie liczby i warunki jako poglądowe/do uzupełnienia — to treści zależne od oferty banku.

---

## Uwaga wspólna (e-commerce)
- Komponenty sklepu w `components/shop/`.
- Ceny i produkty to mock — wyraźnie oznaczone, łatwe do podmiany.
- Dostępność: przyciski z aria-label, liczniki ilości obsługiwane z klawiatury.