AI-ASSISTANT — AI-помощник

                                    ┌───┐
                                    │ ? │  ← круглая кнопка
                                    └───┘
                                    56×56px, фиолетовый
                                    position: fixed
                                    right: 16px
                                    bottom: 100px (над FAB контактов)

┌─────────────────────────────────────────────┐
│  🤖 Ассистент                    [−] [×]   │
├─────────────────────────────────────────────┤
│                                             │
│  Привет! Я помогу выбрать                   │
│  фейерверк или ответить на вопросы.         │
│                                             │
│  ┌─────────────────────────────────────┐   │
│  │ 👤 Подбери салют на 10000₽          │   │
│  └─────────────────────────────────────┘   │
│                                             │
│  ┌─────────────────────────────────────┐   │
│  │ 🤖 Вот 3 варианта:                  │   │
│  │                                     │   │
│  │ 1. Большой праздник — 9 500₽        │   │
│  │    36 залпов, веер, пальма          │   │
│  │    [Показать] [В корзину]           │   │
│  │                                     │   │
│  │ 2. Фейерверк Люкс — 10 200₽         │   │
│  │    49 залпов, хризантема            │   │
│  │    [Показать] [В корзину]           │   │
│  │                                     │   │
│  │             [🔊 Озвучить]           │   │
│  └─────────────────────────────────────┘   │
│                                             │
├─────────────────────────────────────────────┤
│ [🎤]  [Напишите сообщение...]    [➤]       │
├─────────────────────────────────────────────┤
│ [👆 Покажи]  [📦 Мой заказ]  [❓ FAQ]      │
└─────────────────────────────────────────────┘

<!-- Просто обычный input -->
<input type="text" placeholder="Напишите или надиктуйте...">

// Только если нужна кнопка в интерфейсе чата
const recognition = new webkitSpeechRecognition();
recognition.lang = 'ru-RU';
recognition.onresult = (event) => {
  const text = event.results[0][0].transcript;
  sendMessage(text);
};

┌─────────────────────────────────────┐
│  🤖 Вот 3 варианта:                │
│                                     │
│  1. Большой праздник — 9 500₽       │
│     36 залпов, веер                 │
│                                     │
│  2. Фейерверк Люкс — 10 200₽        │
│     49 залпов                       │
│                                     │
│  [▶️ Прослушать]  ← озвучить текст │
└─────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│   Пользователь: "Как добавить в корзину?"                  │
│                                                             │
│   AI: "Сейчас покажу! Следите за курсором."                │
│                                                             │
│   ┌─────────────────────────────────────────────────────┐   │
│   │                                                     │   │
│   │    ┌─────────┐                                      │   │
│   │    │ Товар   │                                      │   │
│   │    │ [ФОТО]  │                                      │   │
│   │    │ 5000₽   │                                      │   │
│   │    │         │                                      │   │
│   │    │ ┌─────────────────┐ ◄── 🎯 курсор AI          │   │
│   │    │ │  🛒 В КОРЗИНУ   │     + подсветка            │   │
│   │    │ └─────────────────┘                            │   │
│   │    └─────────┘                                      │   │
│   │                                                     │   │
│   └─────────────────────────────────────────────────────┘   │
│                                                             │
│   💬 "Нажмите на эту кнопку, чтобы добавить товар"        │
│                                                             │
│   [Понятно] [Покажи ещё раз] [Сделай за меня]              │
│                                                             │
└─────────────────────────────────────────────────────────────┘

// Анимированный курсор
const aiCursor = document.createElement('div');
aiCursor.className = 'ai-cursor';

function showElement(selector, message) {
  const element = document.querySelector(selector);
  const rect = element.getBoundingClientRect();

  // Анимация курсора к элементу
  aiCursor.animate([
    { left: aiCursor.style.left, top: aiCursor.style.top },
    { left: rect.left + 'px', top: rect.top + 'px' }
  ], { duration: 1000, easing: 'ease-in-out' });

  // Подсветка элемента
  element.classList.add('ai-highlight');

  // Показать подсказку
  showTooltip(element, message);
}

.ai-cursor {
  position: fixed;
  width: 24px;
  height: 24px;
  background: url('cursor-ai.svg');
  pointer-events: none;
  z-index: 10000;
  transition: all 0.5s ease;
}

.ai-highlight {
  position: relative;
  z-index: 9999;
  box-shadow: 0 0 0 4px var(--color-brand-500),
              0 0 20px rgba(var(--color-brand-500), 0.5);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--color-brand-500); }
  50% { box-shadow: 0 0 0 8px var(--color-brand-300); }
}

.ai-tooltip {
  position: absolute;
  background: var(--color-gray-900);
  color: white;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  max-width: 280px;
  z-index: 10001;
}

👤: "Добавь в корзину Большой праздник"

🤖: "Добавляю..."
    [Ищет товар]
    [Находит]
    [Клик "В корзину"]

🤖: "Готово! Товар в корзине. Оформить заказ?"
    [Да] [Нет, продолжить покупки]

👤: "Салют на день рождения, бюджет 7000"

🤖: Анализирую...
    - Событие: день рождения
    - Бюджет: 7000₽
    - Рекомендую яркие эффекты, средняя длительность

    Вот подборка:
    1. Праздничный (6500₽) — 25 залпов, разноцветный
    2. Happy Birthday (7200₽) — 36 залпов, с надписью

    [Показать] [Сравнить] [В корзину]

👤: "Доставляете в Выборг?"

🤖: Да! Доставка в Выборг:
    • СДЭК до ПВЗ — 350₽, 2-3 дня
    • СДЭК курьер — 500₽, 2-3 дня

    [Выбрать ПВЗ на карте]

👤: "Где мой заказ 12345?"

🤖: Заказ #12345:
    ✅ Оплачен
    ✅ Собран
    🚚 В пути (СДЭК)

    Трек: 1234567890
    Ожидаемая доставка: 23 декабря

    [Отследить на сайте СДЭК]

👤: "Сравни Большой праздник и Фейерверк Люкс"

🤖:
    | Параметр | Большой праздник | Фейерверк Люкс |
    |----------|------------------|----------------|
    | Цена     | 9 500₽           | 10 200₽        |
    | Залпы    | 36               | 49             |
    | Калибр   | 30мм             | 25мм           |
    | Время    | 45 сек           | 60 сек         |

    Рекомендую: Фейерверк Люкс — больше залпов за +700₽

    [Показать оба] [Фейерверк Люкс в корзину]

┌────────────────────────────────────────────────────────────┐
│                      FRONTEND                              │
├────────────────────────────────────────────────────────────┤
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐     │
│  │  Chat Widget │  │ Voice Input  │  │ AI Cursor    │     │
│  │  (Vue/React) │  │ (Web Speech) │  │ (Guided Tour)│     │
│  └──────────────┘  └──────────────┘  └──────────────┘     │
│                           │                                │
│                    WebSocket / REST                        │
└────────────────────────────────────────────────────────────┘
                            │
                            ▼
┌────────────────────────────────────────────────────────────┐
│                      BACKEND                               │
├────────────────────────────────────────────────────────────┤
│                                                            │
│  ┌──────────────────────────────────────────────────────┐ │
│  │                   FastAPI                            │ │
│  │  /chat      — обработка сообщений                    │ │
│  │  /voice     — TTS озвучивание                        │ │
│  │  /actions   — команды для guided tour                │ │
│  └──────────────────────────────────────────────────────┘ │
│                            │                               │
│         ┌──────────────────┼──────────────────┐           │
│         ▼                  ▼                  ▼           │
│  ┌────────────┐    ┌────────────┐    ┌────────────┐      │
│  │  Claude    │    │  Каталог   │    │  Заказы    │      │
│  │  API       │    │  (NocoDB)  │    │  (API)     │      │
│  └────────────┘    └────────────┘    └────────────┘      │
│                                                            │
└────────────────────────────────────────────────────────────┘

# Эмбеддинги товаров для семантического поиска
from sentence_transformers import SentenceTransformer

model = SentenceTransformer('paraphrase-multilingual-MiniLM-L12-v2')

# При добавлении товара
product_text = f"{name} {description} {category} залпов:{shots} калибр:{caliber}"
embedding = model.encode(product_text)
save_to_vector_db(product_id, embedding)

# При поиске
query = "салют на свадьбу недорогой красивый"
query_embedding = model.encode(query)
similar_products = vector_db.search(query_embedding, top_k=5)

system_prompt = """
Ты — AI-ассистент магазина пиротехники.

КАТАЛОГ (релевантные товары):
{products_context}

FAQ:
{faq_context}

ПРАВИЛА:
- Рекомендуй только товары из каталога
- Указывай точные цены
- Предлагай альтернативы в бюджете
- Если не знаешь — скажи "уточню у оператора"

РЕЖИМ ПОКАЖИ:
Если пользователь просит показать — верни JSON:
{"action": "show", "selector": ".add-to-cart", "message": "Нажмите эту кнопку"}
"""

┌─────────────────────┐
│                     │
│      КОНТЕНТ        │
│                     │
│              ┌───┐  │
│              │ ? │  │  ← кнопка чата
│              └───┘  │
│              ┌───┐  │
│              │ 📞│  │  ← FAB контактов
│              └───┘  │
├─────────────────────┤
│  🏠  🔍  🛒  ☰     │
└─────────────────────┘

        ↓ tap

┌─────────────────────┐
│ 🤖 Ассистент    ×  │
├─────────────────────┤
│                     │
│  💬 Чат             │
│                     │
├─────────────────────┤
│ [🎤] [________] [➤]│
├─────────────────────┤
│ [Покажи] [Заказ]   │
└─────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  🤖 Опишите, что ищете:                                    │
│  [На свадьбу, бюджет 15000, чтобы красиво и долго горело]  │
│                                                    [Найти] │
└─────────────────────────────────────────────────────────────┘
        ↓
┌─────────────────────────────────────────────────────────────┐
│  🤖 ПОДБОРКА: Свадьба до 15 000₽                   [×]     │
├─────────────────────────────────────────────────────────────┤
│  "Выбрал 4 варианта с долгим горением и веерными          │
│   эффектами — идеально для фото"                           │
│                                                             │
│   ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐       │
│   │ 🎬 60с  │  │ 🎬 45с  │  │ 🎬 50с  │  │ 🎬 70с  │       │
│   │  ▶️     │  │  ▶️     │  │  ▶️     │  │  ▶️     │       │
│   └─────────┘  └─────────┘  └─────────┘  └─────────┘       │
│                                                             │
│  [▶️ Озвучить]  [📋 Сравнить]  [🛒 Всё в корзину]          │
└─────────────────────────────────────────────────────────────┘

ДЛЯ GOOGLEBOT:              ДЛЯ ПОЛЬЗОВАТЕЛЯ:
<a href="/product/xxx">     JavaScript:
  <img src="...">           1. Prefetch при hover
</a>                        2. При клике — мгновенный переход
                            3. Видео autoplay на странице
+ Schema.org Product        4. URL меняется (History API)
+ sitemap.xml               5. Кнопка "назад" работает

// Prefetch при hover
card.addEventListener('mouseenter', () => {
  prefetch('/product/' + productId);
});

// Мгновенный переход при клике
card.addEventListener('click', (e) => {
  e.preventDefault();
  navigateTo('/product/' + productId);  // SPA transition
});