# Швидкий старт

## Крок 1: Встановлення залежностей

```bash
npm install
```

## Крок 2: Налаштування змінних середовища

### Змінні середовища (.env.local)

Створіть файл `.env.local` в корені проекту:

```env
# Site Configuration
NEXT_PUBLIC_SITE_URL=https://modul.sealzi.com
NEXT_PUBLIC_API_URL=https://modul.sealzi.com

# Contact Information
NEXT_PUBLIC_PHONE_1=+380675042663
NEXT_PUBLIC_PHONE_1_DISPLAY=+38 (067) 504-26-63
NEXT_PUBLIC_PHONE_2=+380509603832
NEXT_PUBLIC_PHONE_2_DISPLAY=+38 (050) 960-38-32
NEXT_PUBLIC_PHONE_LOGISTICS=+380974926083
NEXT_PUBLIC_PHONE_LOGISTICS_DISPLAY=+38 (097) 9-100-200
NEXT_PUBLIC_EMAIL=gerdanu@ukr.net
NEXT_PUBLIC_ADDRESS=м. Івано-Франківськ, вул.Хриплинська 41
NEXT_PUBLIC_WORKING_HOURS=Пн-Пт 8:00-18:00, Сб 9:00-16:00

# Admin Panel
ADMIN_PASSWORD=admin123
JWT_SECRET=your-super-secret-jwt-key-change-in-production

# SMTP Configuration (for local mail server)
SMTP_HOST=localhost
SMTP_PORT=25
SMTP_USER=  # Optional for local SMTP servers
SMTP_PASS=  # Optional for local SMTP servers

# Note: For local SMTP server setup, you may need to install and configure:
# - Postfix (Linux/macOS): sudo apt install postfix / brew install postfix
# - Sendmail or other MTA
# - Or use a containerized solution like MailHog for development

# Telegram Bot Configuration
TELEGRAM_BOT_TOKEN=your-telegram-bot-token
TELEGRAM_CHAT_ID=your-telegram-chat-id

# Notification Email
NOTIFICATION_EMAIL=builder@example.com
```

## Крок 3: Налаштування Telegram бота

1. Відкрийте [@BotFather](https://t.me/botfather) в Telegram
2. Відправте `/newbot` та слідуйте інструкціям
3. Скопіюйте отриманий токен в `TELEGRAM_BOT_TOKEN`
4. Отримайте ваш chat_id через [@userinfobot](https://t.me/userinfobot)
5. Додайте chat_id в `TELEGRAM_CHAT_ID`

## Крок 4: Додавання продуктів

Відредагуйте `data/products.json` та додайте свої продукти.

Додайте зображення в `public/images/products/` та відео в `public/videos/products/`.

## Крок 5: Запуск

### Розробка

Запустіть єдиний сервер:
```bash
npm run dev
```

### Продакшн

1. Зберіть проект:
```bash
npm run build
```

2. Запустіть єдиний сервер:
```bash
npm start
```

3. Для cPanel: налаштуйте Node.js додаток, вказавши `server.js` як startup файл

## Структура продукту в JSON

```json
{
  "id": 1,
  "slug": "unique-product-slug",
  "name": "Назва продукту",
  "description": "Детальний опис продукту",
  "price": "450 грн/м³",
  "images": [
    "/images/products/product-1.jpg",
    "/images/products/product-2.jpg"
  ],
  "videoUrl": "/videos/products/product.mp4",
  "featured": true
}
```

## Адмін панель

Після налаштування перейдіть до `/admin/login` та увійдіть з паролем `admin123` (або тим, що ви встановили в `ADMIN_PASSWORD`).

### Можливості адмін панелі:

- Перегляд всіх продуктів
- Створення нових продуктів
- Редагування існуючих продуктів
- Видалення продуктів
- **Завантаження зображень** безпосередньо через браузер
- **Завантаження відео** безпосередньо через браузер
- Перегляд завантажених файлів з прев'ю
- Видалення окремих зображень/відео
- Позначення продуктів як "Популярні"
- Автоматичне очищення файлів при видаленні продуктів

### Галерея зображень:

- **Повноекранний перегляд** зображень
- **Зумування** коліщатком миші або кнопками
- **Навігація** між зображеннями (клавіші ← →)
- **Клавіатурне керування** (ESC - закрити, +/- - зум)
- **Сенсорна підтримка** для мобільних пристроїв

## Перевірка роботи

### Перевірка основного функціоналу:

1. Відкрийте http://localhost:3000
2. Перейдіть на сторінку продукту
3. Заповніть форму замовлення
4. Перевірте email та Telegram на отримання повідомлення

### Налаштування заголовка сайту:

#### Додавання логотипу:
1. Створіть або отримайте логотип компанії (рекомендований розмір: 40x40px або більше)
2. Збережіть файл як `public/images/logo.png`
3. Якщо файл має інше ім'я або розширення, оновіть шлях у `components/Header.tsx`

#### Оновлення контактної інформації:
**Простий спосіб** - додайте змінні середовища до `.env.local`:

```env
# Contact Information
NEXT_PUBLIC_PHONE_1=+380675042663
NEXT_PUBLIC_PHONE_1_DISPLAY=+38 (067) 504-26-63
NEXT_PUBLIC_PHONE_2=+380509603832
NEXT_PUBLIC_PHONE_2_DISPLAY=+38 (050) 960-38-32
NEXT_PUBLIC_PHONE_LOGISTICS=+380974926083
NEXT_PUBLIC_PHONE_LOGISTICS_DISPLAY=+38 (097) 9-100-200
NEXT_PUBLIC_EMAIL=gerdanu@ukr.net
NEXT_PUBLIC_ADDRESS=м. Івано-Франківськ, вул.Хриплинська 41
NEXT_PUBLIC_WORKING_HOURS=Пн-Пт 8:00-18:00, Сб 9:00-16:00
```

**Альтернативний спосіб** - відредагуйте файл `components/Header.tsx` та замініть контактну інформацію напряму.

### Перевірка адмін панелі:

1. Перейдіть до http://localhost:3000/admin/login
2. Увійдіть з паролем
3. Спробуйте створити новий продукт з зображеннями та відео
4. Перевірте, чи з'явився він на головній сторінці
5. Перевірте, що файли зберігаються в `public/images/products/` та `public/videos/products/`
6. Перевірте, що URL slug містить тільки латинські символи (наприклад: `test-product`)

### Виправлення існуючих slugs:

Якщо у вас є продукти зі старими slugs, що містять кирилицю:

```bash
npm run fix-slugs
```

### Перевірка навігації:

1. Перевірте всі посилання в заголовку: Оплата, Доставка, Правила, Продукція
2. Перевірте контактні номери телефонів та email
3. Перевірте логотип (якщо доданий)
4. **Мобільна навігація**: Натисніть кнопку меню (≡) щоб відкрити/закрити меню
5. **Мобільні контакти**: Обидва номери телефону відображаються в мобільному меню

### Перевірка основного контенту:

1. **Головна сторінка**: Перевірте новий hero section з інформацією про модульні споруди
2. **Інформаційні секції**: Перевірте розділи про матеріали, властивості, комплектацію
3. **Контактна інформація**: Перевірте адресу, телефони, email та карту
4. **Сторінки**: Перевірте оновлений контент на сторінках Оплата та Доставка

### Обмеження файлів:

- **Зображення:** JPG, PNG, GIF (макс. 50MB на файл)
- **Відео:** MP4, AVI, MOV (макс. 50MB на файл)
- **Кількість:** До 10 зображень на продукт, 1 відео на продукт