feat: complete website implementation

docs/pages/01-home.md

@@ -0,0 +1,58 @@
+# Strona 01 — Strona główna (`/`)
+
+Cel: w kilka sekund pokazać dwa filary (HVAC + usługi domowe) i skierować klienta do jego tematu.
+Komponenty z `components/sections/`, dane z `content/`.
+
+---
+
+## Sekcje (kolejność od góry)
+
+### 1. Hero (`HeroSection`)
+- H1: np. „Klimatyzacja, pompy ciepła i usługi domowe — kompleksowo".
+- Podtytuł: jedno zdanie o doborze, montażu i serwisie.
+- Dwa przyciski: CTA „Darmowa konsultacja" (wariant cta) + „Zobacz ofertę" (outline).
+- W tle realistyczne zdjęcie (placeholder) lekko przyciemnione dla czytelności tekstu.
+- Pod hero: 3–4 mikro-atuty z ikonami (doświadczenie, gwarancja, szybki termin, raty 0%).
+
+### 2. Dwa filary (`PillarsSection`)
+- Dwa duże kafle obok siebie (na mobile pod sobą):
+  - „Chłód i ogrzewanie" → klimatyzacja + pompy ciepła (akcent cyjan), przycisk „Sprawdź".
+  - „Twój dom" → remonty, hydraulika, serwis AGD (akcent pomarańcz), przycisk „Sprawdź".
+- Każdy kafel: ikona, tytuł, jedno zdanie, link.
+
+### 3. Siatka usług (`ServicesGrid`)
+- 6 kart (`IconCard`) z `content/services.ts`: Montaż klimatyzacji, Serwis i przeglądy,
+  Pompy ciepła, Remonty, Hydraulika, Serwis lodówek/AGD.
+- Każda: ikona (lucide), tytuł, krótki opis, link do podstrony.
+
+### 4. Proces (`ProcessSteps`)
+- 4 kroki poziomo (na mobile pionowo): Kontakt i konsultacja → Wycena/audyt → Realizacja →
+  Uruchomienie i serwis. Numerowane, z ikonami i strzałkami.
+
+### 5. Dlaczego my (`WhyUs` + `StatsBar`)
+- 4–6 kafelków atutów + pasek liczb (`StatCounter`): lata doświadczenia, liczba realizacji,
+  uprawnienia F-gaz, ocena klientów. Dane z `content/company.ts`.
+
+### 6. Polecane klimatyzatory (`FeaturedProducts`)
+- 4 karty produktowe (`ProductCard`) z `content/products.ts`: zdjęcie, nazwa, cena z montażem,
+  przycisk „wybierz". Link „Zobacz wszystkie" → `/sklep`.
+
+### 7. Opinie (`Testimonials`)
+- 3 cytaty: imię, ocena gwiazdkowa, treść. Opcjonalnie logo Google.
+
+### 8. Blog (`BlogPreview`)
+- 3 najnowsze wpisy z `content/posts.ts`: miniatura, kategoria, tytuł, „Czytaj więcej".
+
+### 9. CTA końcowe (`CtaBanner`)
+- „Masz pytania? Umów darmową konsultację" + telefon + przycisk.
+
+---
+
+## SEO
+- Metadata: patrz tabela w `docs/specs/03-seo.md` (wiersz „Główna").
+- JSON-LD: LocalBusiness.
+- Jeden H1 (hero), sekcje jako H2.
+
+## Uwagi
+- Naprzemienne tła sekcji (`bg` / `bg-muted`) dla rytmu.
+- Wszystkie zdjęcia jako placeholdery z komentarzem TODO.

docs/pages/02-klimatyzacja.md

@@ -0,0 +1,60 @@
+# Strona 02 — Klimatyzacja (`/klimatyzacja`)
+
+Najbardziej rozbudowana strona usługowa. Łączy usługę (montaż/serwis) z wejściem do sklepu.
+Wzorzec: rozbudowana strona montażu z konkurencji (proces + cennik + FAQ).
+
+---
+
+## Sekcje (kolejność)
+
+### 1. Hero (`HeroSection`)
+- Eyebrow nad H1: „15+ lat doświadczenia · Split i multisplit · Uprawnienia F-gaz".
+- H1: „Montaż klimatyzacji — dobór, instalacja, serwis".
+- Podtytuł + dwa CTA: „Dobierz klimatyzator" (cta) i „Sprawdź cennik" (outline, scroll do cennika).
+- Lista 4 atutów z haczykami: bezpłatny audyt, estetyczny montaż, zgodność F-gaz, serwis po montażu.
+
+### 2. Co obejmuje montaż (`InfoHighlights`)
+- Krótki opis + 3 wyróżnione fakty: czas montażu (4–8 h split), cena od…, zasięg działania.
+
+### 3. Rodzaje klimatyzatorów (`AcTypesSection`)
+- 3 grupy kart: **SPLIT** (ścienne, konsolowe, kasetonowe, kanałowe), **MULTISPLIT** (2–5 pomieszczeń),
+  **POZOSTAŁE** (z grzaniem, z oczyszczaczem). Każda grupa: ikona, lista podtypów, link do kategorii sklepu.
+
+### 4. Proces montażu krok po kroku (`ProcessSteps` — wariant rozszerzony)
+- 8–9 ponumerowanych kroków z `content/process.ts`: przygotowanie miejsca → przewiert →
+  instalacja freonowa → montaż jednostek → próba szczelności → uruchomienie → szkolenie.
+
+### 5. Konfigurator doboru (`ConfiguratorTeaser`)
+- Blok z 4 krokami: marka → moc → funkcje → cena z montażem. Na tym etapie statyczny UI
+  (interaktywność opcjonalnie później). Obok porada „10 m² = 1 kW". Przycisk „Dobierz klimatyzator".
+
+### 6. Cennik (`PricingTable`)
+- Tabela z `content/pricing.ts`: kolumny — usługa / cena netto / brutto os. prywatna / brutto firma.
+- Sekcje tabeli: split, multisplit, usługi dodatkowe.
+- Pod tabelą: „Co obejmuje montaż podstawowy" (lista) + przycisk „Pobierz cennik PDF" (placeholder).
+- Adnotacja o stawkach VAT 8%/23%.
+
+### 7. Producenci (`BrandsGrid`)
+- Siatka logotypów marek (placeholdery), które firma montuje.
+
+### 8. Polecane modele (`FeaturedProducts`)
+- 6–8 kart produktowych z `content/products.ts`.
+
+### 9. Dlaczego my (`WhyUs`)
+- 6 kafelków: profesjonalizm, uprawnienia F-gaz, opinie, szybkie terminy, duży wybór, lokalnie.
+
+### 10. FAQ (`FaqAccordion`)
+- Z `content/faq.ts` (zestaw „klimatyzacja"): jak dobrać moc, ile trwa montaż, zgoda wspólnoty,
+  VAT 8/23%, jak często przegląd, czy grzeje, czy mogę montować sam.
+
+### 11. CTA końcowe (`CtaBanner`)
+- „Niestandardowa instalacja? Zamów indywidualną wycenę" + telefon.
+
+---
+
+## SEO
+- Metadata: wiersz „Klimatyzacja". JSON-LD: Service + FAQPage + BreadcrumbList.
+
+## Uwagi
+- Tabela cennika responsywna (na mobile: scroll poziomy lub układ kart).
+- Accordion FAQ jako Client Component.

docs/pages/03-pompy-ciepla.md

@@ -0,0 +1,42 @@
+# Strona 03 — Pompy ciepła (`/pompy-ciepla`)
+
+---
+
+## Sekcje (kolejność)
+
+### 1. Hero (`HeroSection`)
+- H1: „Pompy ciepła — niższe rachunki, niezależność, dofinansowanie".
+- Podtytuł + 2 CTA: „Darmowa konsultacja" (cta) + „Sprawdź dofinansowanie".
+- W tle zdjęcie pompy ciepła przy domu jednorodzinnym (placeholder).
+
+### 2. Korzyści (`BenefitsGrid`)
+- 4 karty z ikonami: oszczędność, ekologia, komfort całoroczny, dotacje (Czyste Powietrze / Mój Prąd).
+
+### 3. Rodzaje pomp (`HeatPumpTypes`)
+- 3 karty: powietrze-woda, powietrze-powietrze, gruntowe. Każda: ikona, opis, dla kogo.
+
+### 4. Dla kogo / kiedy się opłaca (`UseCases`)
+- Sekcja z punktami: dom nowy, modernizacja, wymiana starego kotła. Krótkie opisy.
+
+### 5. Proces wdrożenia (`ProcessSteps`)
+- Kroki: audyt → dobór → wycena → montaż → uruchomienie → serwis.
+
+### 6. Dofinansowanie (`FundingSection`)
+- Wyróżniony blok (tło accent-light): hasło o programach dotacji, krótki opis,
+  przycisk „Sprawdź, ile możesz dostać". Oznacz treść jako placeholder do aktualizacji.
+
+### 7. Realizacje pomp ciepła (`ProjectsGallery`)
+- Galeria realizacji filtrowana do kategorii „pompy-ciepla" z `content/projects.ts`.
+
+### 8. FAQ (`FaqAccordion`)
+- Zestaw „pompy ciepła": koszty, oszczędności, czy działa zimą, hałas, serwis.
+
+### 9. CTA końcowe (`CtaBanner`)
+
+---
+
+## SEO
+- Metadata: wiersz „Pompy ciepła". JSON-LD: Service + FAQPage.
+
+## Uwagi
+- Treści o dofinansowaniach mogą się zmieniać — wyraźnie oznacz jako do aktualizacji.

docs/pages/04-uslugi-domowe.md

@@ -0,0 +1,38 @@
+# Strona 04 — Usługi domowe (`/uslugi-domowe`)
+
+Strona-rozdzielnik. Zbiera wszystkie usługi „w domu" i kieruje do podstron. Prosta, czytelna.
+
+---
+
+## Sekcje (kolejność)
+
+### 1. Hero (`HeroSection`)
+- H1: „Usługi domowe — remonty, hydraulika i naprawy w jednym miejscu".
+- Podtytuł + CTA „Darmowa konsultacja".
+
+### 2. Siatka usług (`ServicesGrid` — wariant duży)
+- 4 duże kafle (`IconCard`):
+  - Remonty i wykończenia → `/uslugi-domowe/remonty`
+  - Hydraulika → `/uslugi-domowe/hydraulika`
+  - Serwis AGD / lodówki → `/uslugi-domowe/serwis-agd`
+  - Drobne naprawy → (sekcja informacyjna lub kotwica)
+- Każdy: ikona, tytuł, opis, przycisk „Sprawdź".
+
+### 3. Jak pracujemy (`ProcessSteps`)
+- 3–4 kroki: zgłoszenie → wycena → realizacja → odbiór.
+
+### 4. Dlaczego my (`WhyUs`)
+- Atuty: doświadczeni fachowcy, terminowość, sprzątanie po pracy, gwarancja.
+
+### 5. Realizacje (`ProjectsGallery`)
+- Wybrane realizacje z kategorii remonty/hydraulika, najlepiej z before/after.
+
+### 6. CTA końcowe (`CtaBanner`)
+
+---
+
+## SEO
+- Metadata: wiersz „Usługi domowe". JSON-LD: Service + BreadcrumbList.
+
+## Uwagi
+- Ta strona ma głównie nawigować dalej — nie przeładowuj treścią.

docs/pages/05-07-podstrony-uslug.md

@@ -0,0 +1,65 @@
+# Strony 05–07 — Podstrony usług domowych
+
+Trzy podstrony pod `/uslugi-domowe/`. Wspólny wzorzec: hero → zakres → proces → dowody → FAQ → CTA.
+
+---
+
+## 05 — Remonty i wykończenia (`/uslugi-domowe/remonty`)
+
+### Sekcje
+1. **Hero** — H1 „Remonty i wykończenia wnętrz", CTA „Bezpłatna wycena".
+2. **Zakres prac** (`ServicesGrid`) — karty: remonty mieszkań, łazienki, kuchnie, malowanie,
+   gładzie, glazura/terakota, podłogi, zabudowy GK. Ikona + krótki opis.
+3. **Proces** (`ProcessSteps`) — oględziny → kosztorys → harmonogram → prace → odbiór.
+4. **Galeria przed/po** (`BeforeAfterSlider`) — mocna sekcja wizualna, slider dwóch zdjęć.
+   Dane z `content/projects.ts` (kategoria „remonty", pole beforeAfter). Client Component.
+5. **Dlaczego my** (`WhyUs`) — terminowość, czystość, własna ekipa, gwarancja.
+6. **Opinie** (`Testimonials`).
+7. **FAQ** (`FaqAccordion`) — zestaw „remonty": wycena, czas realizacji, materiały, gwarancja.
+8. **CTA końcowe** (`CtaBanner`).
+
+### SEO
+Metadata: wiersz „Remonty". JSON-LD: Service + FAQPage + BreadcrumbList.
+
+---
+
+## 06 — Hydraulika (`/uslugi-domowe/hydraulika`)
+
+### Sekcje
+1. **Hero** — H1 „Usługi hydrauliczne — instalacje, naprawy, awarie", CTA + telefon awaryjny.
+2. **Zakres usług** (`ServicesGrid`) — instalacje wod-kan, wymiana rur, montaż armatury,
+   biały montaż, ogrzewanie, awarie/przecieki, udrażnianie.
+3. **Szybka pomoc / awarie** (`EmergencyBlock`) — wyróżniony blok (tło pomarańcz/akcent)
+   z dużym numerem telefonu i informacją o czasie reakcji.
+4. **Proces** (`ProcessSteps`) — zgłoszenie → diagnoza → wycena → naprawa.
+5. **Cennik orientacyjny** (`PricingTable` — uproszczona) — opcjonalnie.
+6. **Dlaczego my** (`WhyUs`).
+7. **FAQ** (`FaqAccordion`) — zestaw „hydraulika".
+8. **CTA końcowe** (`CtaBanner`).
+
+### SEO
+Metadata: wiersz „Hydraulika". JSON-LD: Service + FAQPage + BreadcrumbList.
+
+---
+
+## 07 — Serwis AGD / lodówki (`/uslugi-domowe/serwis-agd`)
+
+### Sekcje
+1. **Hero** — H1 „Serwis lodówek i urządzeń chłodniczych", CTA „Zgłoś naprawę".
+2. **Co naprawiamy** (`ServicesGrid`) — lodówki, zamrażarki, chłodziarki, lady i witryny
+   chłodnicze, agregaty.
+3. **Typowe usterki** (`SymptomsList`) — lista z ikonami: nie chłodzi, głośna praca,
+   zbiera wodę, oszrania, nie włącza się.
+4. **Proces zgłoszenia** (`ProcessSteps`) — zgłoszenie → diagnoza → wycena → naprawa → gwarancja.
+5. **Dlaczego my** (`WhyUs`) — dojazd, oryginalne części, gwarancja na naprawę.
+6. **FAQ** (`FaqAccordion`) — zestaw „serwis AGD".
+7. **CTA końcowe** (`CtaBanner`).
+
+### SEO
+Metadata: wiersz „Serwis AGD". JSON-LD: Service + FAQPage + BreadcrumbList.
+
+---
+
+## Uwaga wspólna
+Wszystkie trzy korzystają z tych samych komponentów sekcji co reszta strony —
+różnią się treścią (z `content/`), nie strukturą. Nie twórz osobnych wariantów komponentów bez potrzeby.

docs/pages/08-11-realizacje-blog-onas-kontakt.md

@@ -0,0 +1,78 @@
+# Strony 08–11 — Realizacje, Blog, O nas, Kontakt
+
+---
+
+## 08 — Realizacje (`/realizacje`)
+
+### Sekcje
+1. **Hero** — H1 „Nasze realizacje" + jedno zdanie.
+2. **Filtry kategorii** (`ProjectFilters`) — przyciski: Wszystkie · Klimatyzacja · Pompy ciepła ·
+   Remonty · Hydraulika. Client Component (filtrowanie po stanie).
+3. **Siatka realizacji** (`ProjectsGrid`) — karty z `content/projects.ts`: zdjęcie, tytuł,
+   lokalizacja, tag kategorii. Hover: powiększenie + nakładka z tytułem.
+4. **Pasek liczb** (`StatsBar`) — liczba realizacji, lat, miast.
+5. **CTA końcowe** (`CtaBanner`) — „Chcesz podobny efekt? Umów konsultację".
+
+### SEO
+Metadata: wiersz „Realizacje". JSON-LD: opcjonalnie ItemList.
+
+---
+
+## 09 — Blog (`/blog` + `/blog/[slug]`)
+
+### Lista (`/blog`)
+1. **Hero** — H1 „Blog i poradniki" + zdanie.
+2. **Filtry kategorii** — Klimatyzacja, Pompy ciepła, Remonty, Hydraulika, Porady.
+3. **Wyróżniony artykuł** (`FeaturedPost`) — duży kafel (post z `featured: true`).
+4. **Siatka artykułów** (`PostsGrid`) — karty: miniatura, kategoria, tytuł, zajawka, data, „Czytaj więcej".
+5. **Paginacja** — prosta (lub „pokaż więcej").
+
+### Wpis (`/blog/[slug]`)
+- `generateStaticParams` + `generateMetadata` z danych posta.
+- Układ: tytuł (H1), meta (data, autor, kategoria), obraz główny, treść (`prose`),
+  sekcja „Powiązane artykuły" (3 karty), CTA do usługi powiązanej z tematem.
+- JSON-LD: BlogPosting + BreadcrumbList.
+
+### SEO
+Metadata: wiersz „Blog" (lista) / dynamiczne (wpis).
+
+---
+
+## 10 — O nas (`/o-nas`)
+
+### Sekcje
+1. **Hero** — H1 „O nas" + zdanie misji.
+2. **Historia firmy** (`AboutStory`) — tekst + zdjęcie (placeholder).
+3. **Pasek statystyk** (`StatsBar`) — lata, realizacje, klienci, miasta (z `content/company.ts`).
+4. **Wartości / jak pracujemy** (`ValuesGrid`) — 3–4 kafelki.
+5. **Certyfikaty i uprawnienia** (`CertificatesSection`) — logotypy, F-gaz, autoryzacje (placeholdery).
+6. **Opinie** (`Testimonials`).
+7. **CTA końcowe** (`CtaBanner`).
+
+### SEO
+Metadata: wiersz „O nas". JSON-LD: LocalBusiness (rozszerzony).
+
+---
+
+## 11 — Kontakt (`/kontakt`)
+
+### Sekcje
+1. **Nagłówek** — H1 „Kontakt" + zachęta.
+2. **Dwie kolumny** (`ContactSection`):
+   - Lewa: dane kontaktowe (telefon, e-mail, adres, godziny, NIP) — duże, klikalne.
+   - Prawa: **formularz** (`ContactForm`, Client Component) — RHF + Zod:
+     imię, telefon, e-mail, temat (select: Klimatyzacja / Pompy ciepła / Remonty / Hydraulika /
+     Serwis AGD / Inne), wiadomość, zgoda RODO (checkbox), przycisk „Wyślij".
+     Walidacja inline, stany: błąd / wysyłanie / sukces. Obsługa przez Server Action
+     w `app/kontakt/actions.ts` (na razie bez realnej wysyłki — miejsce na integrację, np. Resend).
+3. **Mapa** (`MapEmbed`) — Google Maps na całą szerokość (placeholder/iframe).
+4. **Szybki kontakt** — przyciski „Zadzwoń" / „Napisz".
+
+### SEO
+Metadata: wiersz „Kontakt". JSON-LD: LocalBusiness.
+
+---
+
+## Uwaga
+Formularz: poprawna dostępność (labelki powiązane z polami, komunikaty błędów czytane przez czytniki),
+focus na pierwszym błędnym polu, blokada podwójnego wysłania.

docs/pages/12-15-ecommerce.md

@@ -0,0 +1,80 @@
+# 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 (VAT 8%),
+     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.

docs/pages/16-strony-formalne.md

@@ -0,0 +1,32 @@
+# Strona 16 — Strony formalne
+
+Pięć prostych stron tekstowych w route group `(formalne)`. Wspólny layout jednokolumnowy.
+
+---
+
+## Strony
+- `/regulamin`
+- `/polityka-prywatnosci`
+- `/reklamacje`
+- `/dostawa`
+- `/gwarancja`
+
+## Layout (`app/(formalne)/layout.tsx`)
+- Ten sam Header/Footer co reszta.
+- Treść w jednej kolumnie, styl `prose`, czytelne nagłówki sekcji.
+- Na dłuższych stronach (regulamin, polityka prywatności): spis treści z kotwicami po lewej
+  (sticky na desktopie).
+
+## Treść
+- Placeholdery z realistyczną strukturą sekcji (np. polityka prywatności: administrator danych,
+  zakres, cele, cookies, prawa użytkownika, kontakt).
+- Wyraźnie oznacz, że treść prawna wymaga uzupełnienia/weryfikacji przez właściciela
+  (`{/* TODO: treść prawna do uzupełnienia */}`).
+- Nie generuj wiążących treści prawnych jako gotowych — to ma być rusztowanie do wypełnienia.
+
+## SEO
+- Metadata podstawowe (title + description). `robots`: index, follow (lub noindex dla wybranych — do decyzji).
+- JSON-LD: niepotrzebne.
+
+## Uwaga
+Te strony są linkowane ze stopki. Upewnij się, że linki w footerze prowadzą do istniejących tras.

docs/specs/01-architecture.md

@@ -0,0 +1,99 @@
+# 01 — Architektura
+
+Definiuje strukturę projektu, routing i wzorce. Trzymaj się jej ściśle.
+
+---
+
+## Struktura katalogów
+
+```
+.
+├── AGENTS.md
+├── app/
+│   ├── layout.tsx              # root layout: font, header, footer, metadata bazowe
+│   ├── page.tsx                # strona główna
+│   ├── globals.css             # Tailwind + CSS variables (tokeny)
+│   ├── klimatyzacja/
+│   │   └── page.tsx
+│   ├── pompy-ciepla/
+│   │   └── page.tsx
+│   ├── uslugi-domowe/
+│   │   ├── page.tsx            # rozdzielnik
+│   │   ├── remonty/page.tsx
+│   │   ├── hydraulika/page.tsx
+│   │   └── serwis-agd/page.tsx
+│   ├── realizacje/
+│   │   └── page.tsx
+│   ├── blog/
+│   │   ├── page.tsx
+│   │   └── [slug]/page.tsx
+│   ├── o-nas/page.tsx
+│   ├── kontakt/
+│   │   ├── page.tsx
+│   │   └── actions.ts          # Server Action formularza
+│   ├── sklep/
+│   │   ├── page.tsx            # listing + filtry
+│   │   └── [slug]/page.tsx     # karta produktu
+│   ├── koszyk/page.tsx
+│   ├── raty/page.tsx
+│   ├── (formalne)/             # route group dla stron formalnych
+│   │   ├── regulamin/page.tsx
+│   │   ├── polityka-prywatnosci/page.tsx
+│   │   ├── reklamacje/page.tsx
+│   │   ├── dostawa/page.tsx
+│   │   └── gwarancja/page.tsx
+│   ├── sitemap.ts
+│   ├── robots.ts
+│   ├── not-found.tsx
+│   └── loading.tsx
+├── components/
+│   ├── ui/                     # shadcn/ui (button, card, accordion, input, ...)
+│   ├── layout/                 # Header, Footer, MobileMenu, TrustBar, NavDropdown
+│   ├── sections/               # sekcje stron: Hero, ServicesGrid, ProcessSteps, FAQ, ...
+│   ├── shop/                   # ProductCard, ProductFilters, CartSummary, ...
+│   └── common/                 # SectionHeading, CTAButton, StatCounter, Placeholder, ...
+├── content/                    # dane (mock): products.ts, projects.ts, posts.ts, faq.ts, ...
+├── lib/                        # utils.ts, constants.ts, cart-store.ts (zustand), validations.ts (zod)
+├── types/                      # product.ts, project.ts, post.ts, ...
+├── public/                     # zdjęcia placeholder, logo, ikony, og-images
+├── tailwind.config.ts
+└── tsconfig.json               # alias @/*
+```
+
+---
+
+## Zasady routingu
+
+- App Router, Server Components domyślnie.
+- Strony formalne w route group `(formalne)` — wspólny, prosty layout tekstowy.
+- Dynamiczne trasy: `blog/[slug]`, `sklep/[slug]` — `generateStaticParams` z danych w `content/`.
+- Każda strona eksportuje `metadata` (lub `generateMetadata` dla dynamicznych).
+
+---
+
+## Wzorce komponentów
+
+1. **Strona = kompozycja sekcji.** `page.tsx` importuje komponenty z `components/sections/`
+   i przekazuje im dane. Strona nie zawiera logiki layoutu sekcji.
+2. **Sekcja = jeden komponent.** Np. `HeroSection`, `ServicesGrid`, `ProcessSteps`, `FaqAccordion`,
+   `PricingTable`, `Testimonials`, `StatsBar`, `BlogPreview`, `CtaBanner`.
+3. **Współdzielone bloki** (Hero, FAQ, CTA) przyjmują propsy, by można było ich użyć na wielu stronach
+   z różną treścią — nie duplikuj.
+4. **Dane oddzielone od prezentacji** — komponent dostaje dane przez propsy, źródło to `content/`.
+5. **Client Components** tylko: formularze, koszyk (Zustand), dropdowny nawigacji, mobile menu,
+   slidery galerii, kalkulator rat, filtry sklepu.
+
+---
+
+## Stan aplikacji
+
+- Koszyk: Zustand store w `lib/cart-store.ts` (dodaj/usuń/zmień ilość/suma). Persist do localStorage.
+- Reszta: stan lokalny komponentów. Bez globalnego store poza koszykiem.
+
+---
+
+## Obsługa obrazów
+
+- Wszystkie zdjęcia jako placeholdery na tym etapie (komponent `Placeholder` lub pliki w `public/`).
+- W kodzie oznacz komentarzem `{/* TODO: docelowe zdjęcie — opis */}`, gdzie wstawić realne foto.
+- Zawsze `next/image` z `alt`, `width/height` lub `fill` + `sizes`.

docs/specs/02-design-system.md

@@ -0,0 +1,88 @@
+# 02 — Design System
+
+Pełna definicja systemu projektowego. Zaimplementuj jako tokeny w `tailwind.config.ts`
+i CSS variables w `globals.css`. Wszystkie komponenty korzystają z tokenów, nie z wartości „na sztywno".
+
+---
+
+## Paleta kolorów
+
+| Token | Hex | Zastosowanie |
+|-------|-----|--------------|
+| `primary` (granat) | `#0F2A47` | nagłówki, header, footer, tekst akcentowany |
+| `primary-light` | `#1B3D63` | hover na elementach primary |
+| `accent` (cyjan) | `#2BA8E0` | akcenty „chłodu", linki, ikony, podkreślenia |
+| `accent-light` | `#E3F4FC` | tła sekcji związanych z klimatyzacją |
+| `cta` (pomarańcz) | `#F39320` | przyciski akcji, wyróżnienia konwersji |
+| `cta-hover` | `#D97D0D` | hover przycisków CTA |
+| `bg` | `#FFFFFF` | główne tło |
+| `bg-muted` | `#F5F7FA` | tła naprzemiennych sekcji |
+| `text` | `#1A2230` | tekst podstawowy |
+| `text-muted` | `#5A6678` | tekst drugorzędny, opisy |
+| `border` | `#E2E8F0` | obramowania kart, separatory |
+| `success` | `#16A34A` | potwierdzenia, „dostępne" |
+
+Tryb: na start jasny. Przygotuj zmienne tak, by dark mode dało się dodać później bez przepisywania.
+
+---
+
+## Typografia
+
+- Font: **Inter** lub **Poppins** przez `next/font/google` (subset latin + latin-ext dla polskich znaków).
+- Skala (desktop / mobile):
+  - H1: 48–56px / 32–36px, bold, line-height 1.1
+  - H2: 36–40px / 28px, bold
+  - H3: 24–28px / 20px, semibold
+  - Body: 16–18px / 16px, regular, line-height 1.6
+  - Small: 14px
+- Nagłówki w kolorze `primary`. Tekst w `text`. Opisy w `text-muted`.
+- Maksymalna szerokość bloku tekstu: ~70 znaków (czytelność).
+
+---
+
+## Spacing i layout
+
+- Kontener: max-width 1280px, padding boczny 16px (mobile) / 24–32px (desktop), wyśrodkowany.
+- Odstępy między sekcjami: 80–120px desktop / 48–64px mobile. Dużo powietrza.
+- Siatka kart: grid responsywny (1 kol. mobile → 2 → 3/4 desktop), gap 24px.
+- Sekcje naprzemiennie `bg` i `bg-muted` dla rytmu wizualnego.
+
+---
+
+## Komponenty UI (na bazie shadcn/ui, dostosowane do tokenów)
+
+- **Button** — warianty: `cta` (pomarańcz, główny), `primary` (granat), `outline`, `ghost`.
+  Zaokrąglenie `rounded-lg`, padding wygodny, wyraźny hover i focus ring.
+- **Card** — `rounded-xl`, `border`, subtelny cień (`shadow-sm` → `shadow-md` na hover dla klikalnych).
+- **Accordion** — do FAQ. Płynne rozwijanie, ikona +/− lub chevron.
+- **Input / Textarea / Select** — spójne obramowania, focus w kolorze `accent`, czytelne labelki.
+- **Badge / Tag** — do kategorii (realizacje, blog) i wyróżnień produktów.
+- **Tabs** — do zakładek na karcie produktu.
+
+---
+
+## Wspólne komponenty własne (`components/common/`)
+
+- **SectionHeading** — eyebrow (mały tekst nad), H2, opcjonalny podtytuł. Wyśrodkowany lub do lewej.
+- **CTAButton** — przycisk z ikoną, wariant cta, używany w hero i banerach.
+- **StatCounter** — duża liczba + podpis (np. „3500 realizacji").
+- **IconCard** — ikona + tytuł + opis + opcjonalny link. Baza dla siatek usług.
+- **StepItem** — numer + tytuł + opis. Baza dla procesów krok-po-kroku.
+- **Placeholder** — szary blok z ikoną i opisem zamiast docelowego zdjęcia.
+
+---
+
+## Stany i interakcje
+
+- Hover: subtelne podniesienie cienia / zmiana koloru, transition 150–200ms.
+- Focus: widoczny ring w kolorze `accent` (dostępność).
+- Loading: skeleton dla list (sklep, blog).
+- Puste stany: czytelny komunikat + CTA (np. pusty koszyk).
+
+---
+
+## Zasada nadrzędna
+
+Design ma wyglądać jak zaprojektowany przez człowieka: spójny, czysty, z oddechem.
+Unikaj efektu „szablonu AI": przeładowania gradientami, zbyt wielu kolorów, ciasnych sekcji,
+losowych cieni. Mniej, ale konsekwentnie.

docs/specs/03-seo.md

@@ -0,0 +1,62 @@
+# 03 — SEO
+
+Zasady SEO dla całego projektu. Stosuj na każdej stronie.
+
+---
+
+## Metadata (Next.js Metadata API)
+
+- Każda strona eksportuje `metadata` (statyczne) lub `generateMetadata` (dynamiczne: blog, produkt).
+- W `app/layout.tsx`: `metadataBase`, domyślny `title.template` (np. `%s | Nazwa Firmy`),
+  domyślny opis, OpenGraph bazowy, `lang="pl"`.
+- Każda strona nadpisuje `title` i `description` własnymi, unikalnymi wartościami.
+
+### Wzorce title/description (przykłady do uzupełnienia nazwą firmy/miastem)
+
+| Strona | Title | Description (do ~155 znaków) |
+|--------|-------|------------------------------|
+| Główna | Klimatyzacja, pompy ciepła i usługi domowe | Montaż klimatyzacji, pompy ciepła, remonty i hydraulika. Dobór, montaż i serwis. Darmowa konsultacja. |
+| Klimatyzacja | Montaż klimatyzacji — dobór, instalacja, serwis | Profesjonalny montaż klimatyzacji split i multisplit. Cennik, dobór mocy, gwarancja i serwis. |
+| Pompy ciepła | Pompy ciepła — montaż i dofinansowanie | Dobór i montaż pomp ciepła. Niższe rachunki, dotacje, pełen serwis. Sprawdź ofertę. |
+| Usługi domowe | Usługi domowe — remonty, hydraulika, naprawy | Remonty i wykończenia, usługi hydrauliczne, serwis lodówek i drobne naprawy w jednym miejscu. |
+| Remonty | Remonty i wykończenia wnętrz | Remonty mieszkań, łazienek i kuchni. Terminowo, czysto, z gwarancją. Bezpłatna wycena. |
+| Hydraulika | Usługi hydrauliczne — instalacje i awarie | Instalacje wod-kan, naprawy, montaż armatury i szybka pomoc przy awariach. |
+| Serwis AGD | Serwis lodówek i urządzeń chłodniczych | Naprawa lodówek, zamrażarek i witryn chłodniczych. Dojazd, diagnoza, gwarancja na naprawę. |
+| Realizacje | Nasze realizacje | Zobacz wykonane montaże klimatyzacji, pompy ciepła i remonty. Portfolio z całego regionu. |
+| Blog | Blog i poradniki | Porady o klimatyzacji, pompach ciepła i remontach. Jak dobrać, zamontować i użytkować. |
+| O nas | O nas | Poznaj naszą firmę, doświadczenie i certyfikaty. Klimatyzacja i usługi domowe z gwarancją jakości. |
+| Kontakt | Kontakt | Skontaktuj się z nami — telefon, e-mail, formularz. Darmowa konsultacja i wycena. |
+
+---
+
+## Struktura nagłówków
+
+- Dokładnie jeden `<h1>` na stronę (główny nagłówek hero).
+- Sekcje używają `<h2>`, podsekcje `<h3>`. Nie pomijaj poziomów.
+- Nagłówki opisowe i z frazami kluczowymi, ale naturalne (nie keyword stuffing).
+
+---
+
+## Dane strukturalne JSON-LD
+
+Wstaw jako `<script type="application/ld+json">` (przez komponent lub w layout/page).
+
+- **LocalBusiness** — na stronie głównej i kontaktowej: nazwa, adres, telefon, godziny otwarcia,
+  obszar działania, `priceRange`, link do strony.
+- **Service** — na stronach usługowych (klimatyzacja, pompy ciepła, remonty, hydraulika, serwis AGD):
+  typ usługi, opis, dostawca.
+- **Product** + **Offer** — na karcie produktu: nazwa, opis, cena, dostępność, marka.
+- **BlogPosting** — na stronie wpisu: tytuł, data, autor, obraz.
+- **BreadcrumbList** — na stronach zagnieżdżonych (usługi domowe/…, sklep/…, blog/…).
+- **FAQPage** — na stronach z sekcją FAQ (klimatyzacja, pompy ciepła, usługi).
+
+---
+
+## Pozostałe
+
+- `app/sitemap.ts` — generuj z listy stron statycznych + dynamicznych (produkty, wpisy).
+- `app/robots.ts` — zezwól na indeksację, wskaż sitemap.
+- Obrazy: zawsze `alt` opisowy. OG image per kluczowa strona (`public/og/`).
+- URL-e: czyste, po polsku bez znaków diakrytycznych (np. `/uslugi-domowe/hydraulika`).
+- `lang="pl"` w html. Canonical przez `metadataBase` + ścieżki.
+- Wydajność jako element SEO: dobre Core Web Vitals (LCP, CLS, INP) — patrz zasady wydajności w AGENTS.md.

docs/specs/04-layouts.md

@@ -0,0 +1,83 @@
+# 04 — Layouty i nawigacja
+
+Wspólne elementy obecne na wszystkich stronach. Buduj je raz, w `components/layout/`, i reużywaj.
+
+---
+
+## Header (`components/layout/Header.tsx`)
+
+Sticky, biały (lub granatowy — do wyboru, spójnie), z cieniem po scrollu.
+
+**Układ (desktop):**
+- Lewa: logo (link do `/`).
+- Środek: menu główne.
+- Prawa: ikona wyszukiwarki, ikona konta, ikona koszyka (z licznikiem), przycisk CTA „Darmowa konsultacja".
+
+**Menu główne:**
+1. **Klimatyzacja** ▾ (dropdown — `NavDropdown`)
+   - Kategorie: Klimatyzatory ścienne, Multisplit, Przenośne, Kasetonowe, Konsolowe
+   - Usługi: Montaż klimatyzacji, Serwis i przeglądy
+2. **Pompy ciepła** (link do `/pompy-ciepla`)
+3. **Usługi domowe** ▾ (dropdown)
+   - Remonty i wykończenia, Hydraulika, Serwis AGD/lodówki, Drobne naprawy
+4. **Realizacje** (`/realizacje`)
+5. **Blog** (`/blog`)
+6. **O nas** (`/o-nas`)
+7. **Kontakt** (`/kontakt`)
+
+**Dropdown (`NavDropdown`):** pojawia się na hover/focus, panel z linkami w kolumnach, dostępny
+z klawiatury (Escape zamyka, focus trap niepotrzebny ale focusable linki).
+
+**Mobile (`MobileMenu`):** hamburger → pełnoekranowe lub wysuwane menu z rozwijanymi sekcjami
+(Klimatyzacja, Usługi domowe jako akordeony). CTA „Darmowa konsultacja" widoczne na dole.
+Numer telefonu klikalny.
+
+---
+
+## Footer (`components/layout/Footer.tsx`)
+
+Granatowe tło (`primary`), jasny tekst. 4 kolumny:
+
+1. **Firma** — logo, krótki opis, adres, NIP, telefon (klikalny), godziny pracy.
+2. **Usługi** — linki: Klimatyzacja, Pompy ciepła, Remonty, Hydraulika, Serwis AGD, Sklep.
+3. **Informacje** — O nas, Realizacje, Blog, Regulamin, Polityka prywatności, Reklamacje, Kontakt.
+4. **Twoje konto** — Koszyk, Logowanie, Rejestracja, Zamówienia.
+
+**Pasek dolny:** copyright + rok (dynamiczny), ikony social media, drobne oznaczenia zaufania.
+
+---
+
+## TrustBar (`components/layout/TrustBar.tsx`)
+
+Wąski pasek nad stopką (lub pod hero na stronie głównej). 4–5 elementów z ikonami:
+- Szybki termin realizacji
+- X lat doświadczenia
+- Gwarancja
+- Raty 0%
+- Certyfikaty / opinie Google
+
+Układ poziomy desktop, zawijany na mobile.
+
+---
+
+## Root layout (`app/layout.tsx`)
+
+- `<html lang="pl">`, font przez `next/font`, `globals.css`.
+- Renderuje `<Header />`, `{children}`, `<Footer />`.
+- Bazowe `metadata` (template title, opis, OG) — patrz `docs/specs/03-seo.md`.
+- JSON-LD LocalBusiness może iść tu lub na stronie głównej.
+
+---
+
+## Layout stron formalnych (`app/(formalne)/layout.tsx`)
+
+Prosty, jednokolumnowy: nagłówek tytułu + treść tekstowa (`prose`), opcjonalny spis treści
+z kotwicami po lewej na dłuższych stronach. Ten sam Header/Footer co reszta.
+
+---
+
+## Wspólny komponent CTA (`components/sections/CtaBanner.tsx`)
+
+Powtarzalny baner końcowy: nagłówek („Masz pytania? Umów darmową konsultację"), podtytuł,
+przycisk CTA + numer telefonu. Tło `primary` lub `accent-light`. Używany na końcu większości stron
+(przyjmuje propsy: tytuł, opis, tekst przycisku).

docs/specs/05-data-model.md

@@ -0,0 +1,91 @@
+# 05 — Model danych i mock content
+
+Dane trzymane w `content/` jako typowane pliki TS. Typy w `types/`. Bez backendu na tym etapie.
+
+---
+
+## Typy (`types/`)
+
+### Product (`types/product.ts`)
+```ts
+type Product = {
+  slug: string;
+  name: string;
+  brand: string;
+  category: "scienne" | "multisplit" | "przenosne" | "kasetonowe" | "konsolowe";
+  power: number;          // kW
+  price: number;          // cena urządzenia (brutto)
+  priceWithInstall: number; // cena z montażem (8% VAT)
+  variants?: { label: string; power: number; price: number }[];
+  image: string;          // placeholder na razie
+  features: string[];     // np. ["Wi-Fi", "jonizacja", "grzanie"]
+  heating: boolean;
+  description: string;
+  specs: Record<string, string>; // dane techniczne (klucz: wartość)
+};
+```
+
+### Project / realizacja (`types/project.ts`)
+```ts
+type Project = {
+  slug: string;
+  title: string;
+  category: "klimatyzacja" | "pompy-ciepla" | "remonty" | "hydraulika";
+  location: string;       // np. "Wrocław"
+  image: string;
+  images?: string[];      // galeria
+  description: string;
+  scope?: string[];       // zakres prac
+  beforeAfter?: { before: string; after: string }; // dla remontów
+};
+```
+
+### Post / wpis blogowy (`types/post.ts`)
+```ts
+type Post = {
+  slug: string;
+  title: string;
+  category: "klimatyzacja" | "pompy-ciepla" | "remonty" | "hydraulika" | "porady";
+  excerpt: string;
+  date: string;           // ISO
+  author: string;
+  image: string;
+  content: string;        // markdown lub HTML — render w [slug]
+  featured?: boolean;
+};
+```
+
+### FAQ (`types/faq.ts`)
+```ts
+type FaqItem = { question: string; answer: string };
+```
+
+### Service step / krok procesu
+```ts
+type ProcessStep = { number: number; title: string; description: string; icon?: string };
+```
+
+---
+
+## Mock content (`content/`)
+
+Wygeneruj realistyczne, ale przykładowe dane (oznacz komentarzem `// MOCK`):
+
+- **`products.ts`** — ok. 8 klimatyzatorów różnych marek i kategorii, z wariantami mocy i cenami.
+- **`projects.ts`** — ok. 6 realizacji w różnych kategoriach (w tym 1–2 z before/after dla remontów).
+- **`posts.ts`** — ok. 4 wpisy blogowe (1 oznaczony `featured`), z krótką treścią.
+- **`faq.ts`** — zestawy FAQ per temat: klimatyzacja (8–10 pytań), pompy ciepła, remonty, hydraulika, serwis AGD.
+- **`services.ts`** — definicje 6 usług na stronę główną (tytuł, opis, ikona, link).
+- **`process.ts`** — kroki procesów (montaż klimatyzacji, wdrożenie pompy, remont, zgłoszenie serwisu).
+- **`company.ts`** — dane firmy: nazwa, adres, NIP, telefon, e-mail, godziny, social, statystyki
+  (lata, realizacje, miasta), certyfikaty. Użyj placeholderów, oznacz `// TODO: dane firmy`.
+- **`pricing.ts`** — pozycje cennika montażu (split, multisplit, usługi dodatkowe) jak w tabeli na stronie klimatyzacji.
+
+---
+
+## Zasady
+
+- Dane importowane do stron przez funkcje pomocnicze w `lib/` (np. `getProducts()`, `getProductBySlug()`).
+- `generateStaticParams` dla `blog/[slug]` i `sklep/[slug]` korzysta z tych danych.
+- Ceny i treści to placeholdery — wyraźnie oznaczone, łatwe do podmiany przez właściciela.
+- Nie wymyślaj prawdziwych danych firmy (adres, NIP) — zostaw oznaczone pola do uzupełnienia.