# Formularz rezerwacji samochodu - Figma Design Specs

Plik Figma: https://www.figma.com/design/Q3i1CT4DL91dl638a43RBg/Carei

## Zrzuty ekranu

### Desktop (1440x1024)
![Desktop Formularz](screenshot-desktop.png)

### Mobile (390x1438)
![Mobile Formularz](screenshot-mobile.png)

## Wersje formularza

| Wersja | Node ID | Rozmiar | Plik |
|--------|---------|---------|------|
| Desktop | `24:1639` | 1440x1024 | `desktop-formularz.jsx` |
| Mobile | `1:171` | 390x1438 | `mobile-formularz.jsx` |

## Kolory (Design Tokens)

| Nazwa | Hex | Zastosowanie |
|-------|-----|-------------|
| Carei Blue | `#2F2482` | Primary, tekst, checkboxy, nagłowki |
| Carei Red | `#FF0000` | Przyciski CTA, kropka w tytule |
| Tło formularza | `#EDEDF3` | Background modala |
| Tekst szary | `#505050` | Labele, placeholdery |
| Placeholder jasny | `#C7C7C7` | Maska telefonu |
| Border input | `#D0D0D0` | Obramowanie checkboxow opcji |
| Background strony | `#F8F8F8` | Tło sekcji |

## Typografia

- Font primary: **Albert Sans** (Bold, SemiBold, Medium, Regular)
- Font system: **Roboto** (separatory sekcji)
- Tytul formularza: Albert Sans Bold 20px, `#2F2482`
- Labele inputow: Albert Sans Regular 15px, `#505050`
- Wartosci inputow: Albert Sans SemiBold 15px, `#2F2482`
- Labele male (np. "Od kiedy?"): Albert Sans Regular 12px, `#505050`
- Przycisk CTA: Albert Sans SemiBold 14px, white

## Struktura formularza

### 1. Naglowek
- Tytul: "Wypelnij formularz rezerwacji." (z czerwona kropka)
- Przycisk zamkniecia (X) w rogu

### 2. Dane wynajmu
- **Segment pojazdu** - dropdown (np. "Segment B (np. Toyota Yaris)")
- **Od kiedy?** - date+time picker (np. "11:00, 28.02.2026")
- **Do kiedy?** - date picker z ikona kalendarza
- **Wybrano: X dni** - automatyczne podsumowanie
- **Miejsce odbioru** - text input z ikona MapPin
- **Zwrot w tej samej lokalizacji** - checkbox (domyslnie zaznaczony)

### 3. Opcje dodatkowe (sekcja z separatorem)
- **Rozszerzone ubezpieczenie** - checkbox, 300 zl
  - Opis: "Obejmuje brak odpowiedzialnosci najemcy za wszelki szkody poniesione na aucie."
- **Fotelik dla dziecka** - checkbox, 50 zl
  - Opis: "Prosimy zawrzec wiek dziecka w wiadomosci."

### 4. Dane najemcy (sekcja z separatorem)
- **Imie** - text input
- **Nazwisko** - text input
- **Adres e-mail** - text input
- **Nr telefonu** - z wyborem flagi kraju (+48), maska "\_\_\_ \_\_\_ \_\_\_"

### 5. Wiadomosc
- **Textarea** - "Twoja wiadomosc dotyczaca rezerwacji" (143px wysokosci)

### 6. Stopka
- **Zgoda na Polityke Prywatnosci** - checkbox z linkiem
- **Przycisk "Wyslij"** - czerwony CTA z ikona strzalki

## Roznice Desktop vs Mobile

| Element | Desktop (1440px) | Mobile (390px) |
|---------|-----------------|----------------|
| Layout inputow danych wynajmu | 2-3 kolumny obok siebie | 1 kolumna (full width) |
| Imie + Nazwisko | Obok siebie (2x 376px) | Pod soba (full width) |
| Email + Telefon | Obok siebie (2x 376px) | Pod soba (full width) |
| Opcje dodatkowe | Obok siebie (2x 376px) | Pod soba (full width) |
| Przycisk Wyslij | Po prawej obok checkboxa | Full width pod checkboxem |
| Dodatkowy element | - | "Infolinia 24h: +48 572 663 614" na dole |
| Modal | Wycentrowany overlay | Bottom sheet (od dolu) |

## Wymiary komponentow

- Input height: 48px
- Textarea height: 143px
- Border radius inputow: 8px
- Border radius modala: 16px
- Padding modala desktop: 48px horizontal, 40px vertical
- Padding modala mobile: 24px horizontal, 32px vertical
- Gap miedzy sekcjami: 24px
- Gap wewnatrz sekcji: 16px
- Checkbox size: 24px (border-radius: 8px)
- Przycisk CTA: padding 16px 24px, border-radius 8px

---

## Popup — rozwinięty formularz (Krok 2)

Plik Figma node: `32:645` (Overlay, 866x1354)

### Zrzut ekranu Desktop
![Popup Desktop](screenshot-popup-desktop.png)

### Struktura Popup (rozszerzenia vs Krok 1)

Popup to rozwinięta wersja formularza po wypełnieniu Kroku 1. Zawiera dodatkowe sekcje:

#### Wyjazd zagraniczny
- Separator: "Wyjazd zagraniczny"
- Checkbox: **"Planuję trasę poza granicę Polski"**
- Po zaznaczeniu → pojawia się wyszukiwarka krajów (patrz niżej)

#### Ubezpieczenie
- Separator: "Ubezpieczenie"
- **Pakiet ochrony Soft** — karta z checkbox, opisem, ceną "od 190 do 800 zł"
- **Pakiet ochrony Premium** — karta z checkbox, opisem, ceną "od 200 do 1200 zł"

#### Opcje dodatkowe (rozbudowane vs Krok 1)
- **Dodatkowy kierowca** — 100 zł, z opisem
- **Zwiększenie limitu kilometrów** — od 50 do 250 zł, z opisem
- **Pełny bak paliwa** — 650 zł
- **Nawigacja GPS Europa** — od 50 do 200 zł
- **Podstawka dla dziecka** — od 50 do 250 zł
- **Fotelik 9-18 kg** — od 50 do 250 zł
- **Fotelik 18-36 kg** — od 50 do 250 zł
- **Zwrot nieumytego pojazdu** — 290 zł

#### Dane najemcy + Wiadomość + Stopka
Identyczne jak w Kroku 1.

### Node IDs (Popup)

| Element | Node ID | Rozmiar |
|---------|---------|---------|
| Overlay (desktop) | `32:645` | 866x1354 |
| POPUP (wewnętrzny) | `32:397` | 866x1316 |
| OverlayMobile | `32:650` | 390x1257 |

---

## Wyszukiwarka krajów (Input — rozwinięcia formularza)

Elementy po lewej stronie Popup w Figmie — 3 stany pola "Wyszukaj i dodaj kraj na trasie":

### Zrzut ekranu — stany wyszukiwarki
![Input Kraje Stany](screenshot-input-kraje-stany.png)

### Stan 1: Default (pusty)
- Node ID: `122:1091`
- Ikona "+" + tekst: **"Wyszukaj i dodaj kraj na trasie"**
- Pole jest zwinięte

### Stan 2: Active (wyszukiwanie)
- Node ID: `122:1054`
- Pole tekstowe z wpisanym tekstem (np. "N|")
- Pod spodem: karty krajów pasujących do frazy (z flagą, nazwą, ceną "od 50 do 250 zł", przycisk "+")
- Np. 🇩🇪 Niemcy, 🇳🇴 Norwegia
- Drugi stan: po wybraniu (np. "C|") — wybrany kraj (🇩🇪 Niemcy) z "×" do usunięcia, + wyniki wyszukiwania (🇨🇿 Czechy)

### Stan 3: Default z wybranymi (zwinięty)
- Node ID: `123:1195`
- Ikona "+" + tekst: "Wyszukaj i dodaj kraj na trasie"
- Pod spodem: karty wybranych krajów z flagą, nazwą, ceną i przyciskiem "×" do usunięcia
- Np. 🇩🇪 Niemcy od 50 do 250 zł ×, 🇨🇿 Czechy od 50 do 250 zł ×

### Node IDs (Wyszukiwarka krajów)

| Stan | Node ID | Opis |
|------|---------|------|
| Default (pusty) | `122:1091` | Zwinięty, tylko tekst "Wyszukaj i dodaj kraj" |
| Active (wyszukiwanie) | `122:1054` | Rozwinięty z wynikami wyszukiwania |
| Default (wybrane) | `123:1195` | Zwinięty z kartami wybranych krajów |