From 9d57e38222e75c856c54d604f59d0380c3221ce1 Mon Sep 17 00:00:00 2001
From: root <root@localhost>
Date: Thu, 8 Jan 2026 00:47:36 +0500
Subject: [PATCH] .

---
 src/components/marketing/PptFunnel.vue  |   7 +-
 src/components/marketing/PptKpiCard.vue |  12 +-
 src/views/pages/MarketingAnalysis.vue   | 482 +++++++++++++++++++++---
 3 files changed, 444 insertions(+), 57 deletions(-)

diff --git a/src/components/marketing/PptFunnel.vue b/src/components/marketing/PptFunnel.vue
index 99942f9..270f1a6 100644
--- a/src/components/marketing/PptFunnel.vue
+++ b/src/components/marketing/PptFunnel.vue
@@ -1,7 +1,10 @@
 <template>
     <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4">
         <div class="flex items-center justify-between mb-3">
-            <div class="text-[15px] font-semibold text-slate-800">{{ title }}</div>
+            <div class="flex items-center gap-1.5">
+                <div class="text-[15px] font-semibold text-slate-800">{{ title }}</div>
+                <i v-if="description" class="pi pi-question-circle text-[12px] text-slate-400 cursor-help" v-tooltip.top="description"></i>
+            </div>
             <div v-if="subtitle" class="text-[12px] text-slate-500">{{ subtitle }}</div>
         </div>
 
@@ -37,6 +40,7 @@ import { computed } from 'vue';
 const props = defineProps({
     title: { type: String, default: 'Потери на воронке' },
     subtitle: { type: String, default: '' },
+    description: { type: String, default: '' },
     steps: {
         type: Array,
         required: true
@@ -97,4 +101,3 @@ function badgeY(index) {
     return y + stageH + (gap - 22) / 2;
 }
 </script>
-
diff --git a/src/components/marketing/PptKpiCard.vue b/src/components/marketing/PptKpiCard.vue
index 7e9e201..eaba672 100644
--- a/src/components/marketing/PptKpiCard.vue
+++ b/src/components/marketing/PptKpiCard.vue
@@ -10,9 +10,12 @@
                         <div class="h-10 w-10 rounded-xl flex items-center justify-center shadow-sm border border-white/50" :style="{ background: iconBg, color: accentColor }">
                             <i class="pi" :class="icon"></i>
                         </div>
-                        <div class="min-w-0">
-                            <div class="text-[13px] font-semibold text-slate-800 truncate">{{ title }}</div>
-                            <div v-if="subtitle" class="text-[12px] text-slate-500 truncate">{{ subtitle }}</div>
+                        <div class="min-w-0 flex-1">
+                            <div class="flex items-center gap-1.5">
+                                <div class="text-[13px] font-semibold text-slate-800 truncate">{{ title }}</div>
+                                <i v-if="description" class="pi pi-question-circle text-[12px] text-slate-400 cursor-help flex-shrink-0" v-tooltip.top="description"></i>
+                            </div>
+                            <div v-if="subtitle" class="text-[12px] text-slate-500 truncate mt-0.5">{{ subtitle }}</div>
                         </div>
                     </div>
                 </div>
@@ -45,7 +48,8 @@ const props = defineProps({
     subtitle: { type: String, default: '' },
     icon: { type: String, default: 'pi-chart-line' },
     accentColor: { type: String, default: '#5B89FF' },
-    trendText: { type: String, default: '' }
+    trendText: { type: String, default: '' },
+    description: { type: String, default: '' }
 });
 
 function hexToRgba(hex, alpha) {
diff --git a/src/views/pages/MarketingAnalysis.vue b/src/views/pages/MarketingAnalysis.vue
index 20d60b4..15dc80f 100644
--- a/src/views/pages/MarketingAnalysis.vue
+++ b/src/views/pages/MarketingAnalysis.vue
@@ -117,19 +117,46 @@
 
                 <div class="grid grid-cols-12 gap-4">
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Индекс онлайн-спроса" :value="marketDemandIndexValue" subtitle="высокий онлайн-потенциал" icon="pi-search" :accentColor="PPT_BLUE" />
+                        <PptKpiCard
+                            title="Индекс онлайн-спроса"
+                            :value="marketDemandIndexValue"
+                            subtitle="высокий онлайн-потенциал"
+                            icon="pi-search"
+                            :accentColor="PPT_BLUE"
+                            description="Коэффициент востребованности в сети (отношение текущего спроса к базисному). Показывает, насколько активен спрос на ваш продукт/услугу в цифровых каналах."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Темп изменения спроса" :value="marketYoYGrowthValue" subtitle="рост за год" icon="pi-arrow-up-right" :accentColor="PPT_ORANGE" />
+                        <PptKpiCard
+                            title="Темп изменения спроса"
+                            :value="marketYoYGrowthValue"
+                            subtitle="рост за год"
+                            icon="pi-arrow-up-right"
+                            :accentColor="PPT_ORANGE"
+                            description="Процент роста спроса по сравнению с прошлым годом. Положительное значение означает рост интереса к продукту/услуге."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Коэффициент сезонности" :value="marketSeasonalityValue" :subtitle="`диапазон ${seasonalityRangeValue}`" icon="pi-calendar" :accentColor="PPT_GREEN" />
+                        <PptKpiCard
+                            title="Коэффициент сезонности"
+                            :value="marketSeasonalityValue"
+                            :subtitle="`диапазон ${seasonalityRangeValue}`"
+                            icon="pi-calendar"
+                            :accentColor="PPT_GREEN"
+                            description="Индекс активности спроса в весенний период. Например, 1.15x означает рост на 15% выше среднего. Помогает планировать маркетинговые кампании с учетом сезонности."
+                        />
                     </div>
 
                     <div class="col-span-12 lg:col-span-8">
                         <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4">
                             <div class="flex items-center justify-between gap-3 mb-3">
-                                <div class="text-[16px] font-semibold text-slate-800">Динамика онлайн-спроса</div>
+                                <div class="flex items-center gap-1.5">
+                                    <div class="text-[16px] font-semibold text-slate-800">Динамика онлайн-спроса</div>
+                                    <i
+                                        class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                        v-tooltip.top="'Массив числовых значений интереса по конкретным месяцам. Показывает сезонные колебания спроса и помогает планировать рекламные кампании.'"
+                                    ></i>
+                                </div>
                                 <div class="text-[14px] font-semibold text-green-700">{{ marketYoYGrowthValue }}</div>
                             </div>
                             <div class="h-[260px]">
@@ -140,16 +167,46 @@
 
                     <div class="col-span-12 lg:col-span-4">
                         <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4 h-full">
-                            <div class="text-[16px] font-semibold text-slate-800 mb-3">География онлайн-интереса за год</div>
-                            <div class="rounded-xl border border-dashed border-slate-300 bg-slate-50/70 px-4 py-6 text-center text-slate-500">
-                                <div class="text-sm">{{ report?.sections?.market_overview?.geography }}</div>
-                                <div class="mt-4 flex items-center justify-center gap-3 text-[12px]">
+                            <div class="flex items-center gap-1.5 mb-3">
+                                <div class="text-[16px] font-semibold text-slate-800">География онлайн-интереса за год</div>
+                                <i
+                                    class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                    v-tooltip.top="'Список приоритетных регионов, где зафиксирован наибольший спрос. Помогает определить географию для фокусировки маркетинговых усилий.'"
+                                ></i>
+                            </div>
+                            <div v-if="geographyRows.length > 0" class="space-y-3">
+                                <div class="overflow-hidden rounded-xl border border-slate-200/70">
+                                    <div class="divide-y divide-slate-200/70">
+                                        <div v-for="(row, idx) in geographyRows" :key="row.city" class="px-4 py-3">
+                                            <div class="flex items-center justify-between gap-3 mb-2">
+                                                <div class="flex items-center gap-2">
+                                                    <div class="h-2 w-2 rounded-full" :style="{ background: getGeographyColor(row.percentage, idx) }"></div>
+                                                    <div class="text-[14px] font-medium text-slate-800">{{ row.city }}</div>
+                                                </div>
+                                                <div class="text-[14px] font-semibold text-slate-800">{{ row.value }}</div>
+                                            </div>
+                                            <div class="h-2.5 rounded-full bg-slate-200/70 overflow-hidden">
+                                                <div
+                                                    class="h-full rounded-full transition-all duration-500"
+                                                    :style="{
+                                                        width: `${row.percentage}%`,
+                                                        background: getGeographyGradient(row.percentage, idx)
+                                                    }"
+                                                ></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex items-center justify-center gap-3 text-[12px] text-slate-500">
                                     <span class="inline-flex items-center gap-2">
                                         <span class="h-2.5 w-10 rounded-full" style="background: linear-gradient(90deg, #ff8e4f, #52c41a)"></span>
                                         <span>Высокий → Низкий</span>
                                     </span>
                                 </div>
                             </div>
+                            <div v-else class="rounded-xl border border-dashed border-slate-300 bg-slate-50/70 px-4 py-6 text-center text-slate-500">
+                                <div class="text-sm">Нет данных</div>
+                            </div>
                         </div>
                     </div>
 
@@ -165,18 +222,45 @@
 
                 <div class="grid grid-cols-12 gap-4">
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Размер аудитории" :value="audienceTotalValue" subtitle="высокий онлайн-потенциал" icon="pi-users" :accentColor="PPT_BLUE" />
+                        <PptKpiCard
+                            title="Размер аудитории"
+                            :value="audienceTotalValue"
+                            subtitle="высокий онлайн-потенциал"
+                            icon="pi-users"
+                            :accentColor="PPT_BLUE"
+                            description="Оценочное количество потенциальных клиентов в выбранных регионах. Помогает оценить масштаб рынка и потенциал для роста."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Лидирующий сегмент" :value="audienceLeadingSegmentValue" subtitle="рост за год" icon="pi-user" :accentColor="PPT_ORANGE" />
+                        <PptKpiCard
+                            title="Лидирующий сегмент"
+                            :value="audienceLeadingSegmentValue"
+                            subtitle="рост за год"
+                            icon="pi-user"
+                            :accentColor="PPT_ORANGE"
+                            description="Название самого активного или многочисленного сегмента. Показывает, на какую группу потребителей стоит фокусировать маркетинговый бюджет."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Доход" :value="audienceIncomeAboveAvgText" subtitle="доход выше среднего" icon="pi-wallet" :accentColor="PPT_GREEN" />
+                        <PptKpiCard
+                            title="Доход"
+                            :value="audienceIncomeAboveAvgText"
+                            subtitle="доход выше среднего"
+                            icon="pi-wallet"
+                            :accentColor="PPT_GREEN"
+                            description="Процент аудитории с уровнем дохода «выше среднего». Показывает платёжеспособность целевой аудитории."
+                        />
                     </div>
 
                     <div class="col-span-12 lg:col-span-5">
                         <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4 h-full">
-                            <div class="text-[16px] font-semibold text-slate-800 mb-3">Сегменты аудитории для рекламы</div>
+                            <div class="flex items-center gap-1.5 mb-3">
+                                <div class="text-[16px] font-semibold text-slate-800">Сегменты аудитории для рекламы</div>
+                                <i
+                                    class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                    v-tooltip.top="'Массив ключевых групп потребителей с указанием их названия и процентной доли в общей массе. Помогает определить приоритетные сегменты для таргетинга.'"
+                                ></i>
+                            </div>
 
                             <div class="overflow-hidden rounded-xl border border-slate-200/70">
                                 <div class="grid grid-cols-12 bg-slate-50 text-[12px] font-semibold text-slate-600">
@@ -202,7 +286,13 @@
                         <div class="grid grid-cols-12 gap-4">
                             <div class="col-span-12">
                                 <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4">
-                                    <div class="text-[16px] font-semibold text-slate-800 mb-2">Возрастная структура</div>
+                                    <div class="flex items-center gap-1.5 mb-2">
+                                        <div class="text-[16px] font-semibold text-slate-800">Возрастная структура</div>
+                                        <i
+                                            class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                            v-tooltip.top="'Процентное распределение аудитории по возрастным категориям (от 18 до 55+). Помогает адаптировать рекламные сообщения под возрастные группы.'"
+                                        ></i>
+                                    </div>
                                     <div class="h-[240px]">
                                         <Chart type="bar" :data="ageBarData" :options="compactBarOptions" />
                                     </div>
@@ -210,7 +300,13 @@
                             </div>
                             <div class="col-span-12">
                                 <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4">
-                                    <div class="text-[16px] font-semibold text-slate-800 mb-2">Доход и платёжеспособность</div>
+                                    <div class="flex items-center gap-1.5 mb-2">
+                                        <div class="text-[16px] font-semibold text-slate-800">Доход и платёжеспособность</div>
+                                        <i
+                                            class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                            v-tooltip.top="'Распределение аудитории по уровню дохода. Показывает, какая доля аудитории имеет доход выше среднего и может позволить себе ваш продукт/услугу.'"
+                                        ></i>
+                                    </div>
                                     <div class="h-[220px]">
                                         <Chart type="bar" :data="incomeBarData" :options="compactBarOptions" />
                                     </div>
@@ -231,19 +327,46 @@
 
                 <div class="grid grid-cols-12 gap-4">
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Ваш рынок (доля трафика)" :value="competitionMarketShareValue" subtitle="" icon="pi-sitemap" :accentColor="PPT_BLUE" />
+                        <PptKpiCard
+                            title="Ваш рынок (доля трафика)"
+                            :value="competitionMarketShareValue"
+                            subtitle=""
+                            icon="pi-sitemap"
+                            :accentColor="PPT_BLUE"
+                            description="Оценочная доля онлайн-трафика, которую занимает текущий бизнес. Показывает вашу позицию на рынке относительно общего объема трафика в нише."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Место в видимости" :value="competitionRankValue" subtitle="" icon="pi-chart-bar" :accentColor="PPT_GREEN" />
+                        <PptKpiCard
+                            title="Место в видимости"
+                            :value="competitionRankValue"
+                            subtitle=""
+                            icon="pi-chart-bar"
+                            :accentColor="PPT_GREEN"
+                            description="Позиция бренда в поисковой выдаче и рекламных каналах относительно конкурентов. Чем ниже число, тем выше позиция."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Доля конкурентов в контекстной рекламе" :value="competitionCompetitorShareValue" :subtitle="`Бенчмарк (Астана) ${competitionBenchmarkValue}`" icon="pi-wallet" :accentColor="PPT_ORANGE" />
+                        <PptKpiCard
+                            title="Доля конкурентов в контекстной рекламе"
+                            :value="competitionCompetitorShareValue"
+                            :subtitle="`Бенчмарк (Астана) ${competitionBenchmarkValue}`"
+                            icon="pi-wallet"
+                            :accentColor="PPT_ORANGE"
+                            description="Активность конкурентов в платной рекламе. Показывает уровень конкуренции в контекстной рекламе и необходимость инвестиций в этот канал."
+                        />
                     </div>
 
                     <div class="col-span-12 lg:col-span-7">
                         <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4 h-full">
                             <div class="flex items-center justify-between gap-3 mb-2">
-                                <div class="text-[16px] font-semibold text-slate-800">Digital-видимость: топ конкурентов</div>
+                                <div class="flex items-center gap-1.5">
+                                    <div class="text-[16px] font-semibold text-slate-800">Digital-видимость: топ конкурентов</div>
+                                    <i
+                                        class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                        v-tooltip.top="'Сравнительный индекс видимости (баллы от 0 до 100) для вашего бизнеса и конкурентов. Показывает, насколько хорошо вы заметны в цифровых каналах по сравнению с конкурентами.'"
+                                    ></i>
+                                </div>
                                 <div class="text-[12px] text-slate-500">Бенчмарк</div>
                             </div>
                             <div class="h-[280px]">
@@ -253,7 +376,13 @@
                     </div>
                     <div class="col-span-12 lg:col-span-5">
                         <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4 h-full">
-                            <div class="text-[16px] font-semibold text-slate-800 mb-3">Ключевые сильные стороны основных конкурентов</div>
+                            <div class="flex items-center gap-1.5 mb-3">
+                                <div class="text-[16px] font-semibold text-slate-800">Ключевые сильные стороны основных конкурентов</div>
+                                <i
+                                    class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                    v-tooltip.top="'Список конкретных преимуществ для каждого игрока рынка (включая ваш бизнес). Помогает понять конкурентные преимущества и слабые места.'"
+                                ></i>
+                            </div>
                             <div class="overflow-hidden rounded-xl border border-slate-200/70">
                                 <div class="grid grid-cols-12 bg-slate-50 text-[12px] font-semibold text-slate-600">
                                     <div class="col-span-5 px-3 py-2">Конкурент</div>
@@ -284,18 +413,45 @@
 
                 <div class="grid grid-cols-12 gap-4">
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Поиск в Яндекс/Google" :value="behaviorSearchGrowthValue" subtitle="" icon="pi-search" :accentColor="PPT_BLUE" />
+                        <PptKpiCard
+                            title="Поиск в Яндекс/Google"
+                            :value="behaviorSearchGrowthValue"
+                            subtitle=""
+                            icon="pi-search"
+                            :accentColor="PPT_BLUE"
+                            description="Динамика роста поисковых запросов в нише. Показывает, растет ли интерес к продукту/услуге в поисковых системах."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Взаимодействия до покупки" :value="behaviorInteractionsValue" subtitle="" icon="pi-send" :accentColor="PPT_ORANGE" />
+                        <PptKpiCard
+                            title="Взаимодействия до покупки"
+                            :value="behaviorInteractionsValue"
+                            subtitle=""
+                            icon="pi-send"
+                            :accentColor="PPT_ORANGE"
+                            description="Среднее количество касаний (визитов, кликов), необходимых клиенту для принятия решения. Помогает понять длину пути клиента и необходимое количество контактов."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Вероятность повторного отказа" :value="behaviorRepeatRefusalValue" subtitle="" icon="pi-refresh" :accentColor="PPT_GREEN" />
+                        <PptKpiCard
+                            title="Вероятность повторного отказа"
+                            :value="behaviorRepeatRefusalValue"
+                            subtitle=""
+                            icon="pi-refresh"
+                            :accentColor="PPT_GREEN"
+                            description="Вероятность того, что клиент не вернется после первого опыта. Высокое значение указывает на проблемы с качеством сервиса или продукта."
+                        />
                     </div>
 
                     <div class="col-span-12 lg:col-span-5">
                         <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4 h-full">
-                            <div class="text-[16px] font-semibold text-slate-800 mb-2">Типы поисковых запросов</div>
+                            <div class="flex items-center gap-1.5 mb-2">
+                                <div class="text-[16px] font-semibold text-slate-800">Типы поисковых запросов</div>
+                                <i
+                                    class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                    v-tooltip.top="'Структура запросов: каталожные, информационные, брендовые. Показывает, как пользователи ищут ваш продукт/услугу и какие типы контента им нужны.'"
+                                ></i>
+                            </div>
                             <div class="h-[260px]">
                                 <Chart type="doughnut" :data="queryTypesDonutData" :options="compactDonutOptions" />
                             </div>
@@ -305,7 +461,13 @@
                         <div class="grid grid-cols-12 gap-4">
                             <div class="col-span-12">
                                 <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4">
-                                    <div class="text-[16px] font-semibold text-slate-800 mb-2">Факторы принятия решения</div>
+                                    <div class="flex items-center gap-1.5 mb-2">
+                                        <div class="text-[16px] font-semibold text-slate-800">Факторы принятия решения</div>
+                                        <i
+                                            class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                            v-tooltip.top="'Что важнее всего для клиента при выборе: Цена, Отзывы, Сервис и т.д. Помогает понять приоритеты клиентов и адаптировать оффер.'"
+                                        ></i>
+                                    </div>
                                     <div class="h-[220px]">
                                         <Chart type="bar" :data="decisionFactorsBarData" :options="compactBarOptions" />
                                     </div>
@@ -313,7 +475,13 @@
                             </div>
                             <div class="col-span-12">
                                 <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4">
-                                    <div class="text-[16px] font-semibold text-slate-800 mb-2">Причины отказов</div>
+                                    <div class="flex items-center gap-1.5 mb-2">
+                                        <div class="text-[16px] font-semibold text-slate-800">Причины отказов</div>
+                                        <i
+                                            class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                            v-tooltip.top="'Барьеры, которые мешают завершить покупку (например, «непонятный оффер», высокая цена, отсутствие отзывов). Помогает выявить и устранить препятствия на пути к конверсии.'"
+                                        ></i>
+                                    </div>
                                     <div class="h-[200px]">
                                         <Chart type="bar" :data="refusalReasonsBarData" :options="compactBarOptions" />
                                     </div>
@@ -334,21 +502,52 @@
 
                 <div class="grid grid-cols-12 gap-4">
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Конверсия лид → запись" :value="report?.sections?.customer_journey?.conversion_rates?.lead_to_booking" subtitle="" icon="pi-comments" :accentColor="PPT_BLUE" />
+                        <PptKpiCard
+                            title="Конверсия лид → запись"
+                            :value="report?.sections?.customer_journey?.conversion_rates?.lead_to_booking"
+                            subtitle=""
+                            icon="pi-comments"
+                            :accentColor="PPT_BLUE"
+                            description="Процент перехода от лида к записи. Показывает эффективность работы отдела продаж на этапе конверсии лида в клиента."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Конверсия запись → оплата" :value="report?.sections?.customer_journey?.conversion_rates?.booking_to_payment" subtitle="" icon="pi-comment" :accentColor="PPT_ORANGE" />
+                        <PptKpiCard
+                            title="Конверсия запись → оплата"
+                            :value="report?.sections?.customer_journey?.conversion_rates?.booking_to_payment"
+                            subtitle=""
+                            icon="pi-comment"
+                            :accentColor="PPT_ORANGE"
+                            description="Процент перехода от записи к оплате. Показывает, сколько клиентов, сделавших запись, завершают покупку."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Конверсия лид → оплата" :value="report?.sections?.customer_journey?.conversion_rates?.lead_to_payment_total" subtitle="" icon="pi-wallet" :accentColor="PPT_ORANGE" />
+                        <PptKpiCard
+                            title="Конверсия лид → оплата"
+                            :value="report?.sections?.customer_journey?.conversion_rates?.lead_to_payment_total"
+                            subtitle=""
+                            icon="pi-wallet"
+                            :accentColor="PPT_ORANGE"
+                            description="Общая конверсия от лида до оплаты. Показывает эффективность всей воронки продаж от первого контакта до завершения сделки."
+                        />
                     </div>
 
                     <div class="col-span-12 lg:col-span-8">
-                        <PptFunnel :steps="pptFunnelSteps" title="Потери на воронке" />
+                        <PptFunnel
+                            :steps="pptFunnelSteps"
+                            title="Потери на воронке"
+                            description="Абсолютные показатели воронки: сколько человек пришло с рекламы, сколько стали лидами, сколько купили. Визуализирует потери клиентов на каждом этапе."
+                        />
                     </div>
                     <div class="col-span-12 lg:col-span-4">
                         <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4 h-full">
-                            <div class="text-[16px] font-semibold text-slate-800 mb-3">Основные проблемы на воронке</div>
+                            <div class="flex items-center gap-1.5 mb-3">
+                                <div class="text-[16px] font-semibold text-slate-800">Основные проблемы на воронке</div>
+                                <i
+                                    class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                    v-tooltip.top="'Текстовая расшифровка причин потерь клиентов на каждом этапе. Помогает понять, где именно теряются клиенты и что нужно исправить.'"
+                                ></i>
+                            </div>
                             <div class="overflow-hidden rounded-xl border border-slate-200/70">
                                 <div class="grid grid-cols-12 bg-slate-50 text-[12px] font-semibold text-slate-600">
                                     <div class="col-span-5 px-3 py-2">Этап</div>
@@ -380,18 +579,45 @@
 
                 <div class="grid grid-cols-12 gap-4">
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Доля поискового трафика" :value="channelsSearchShareValue" subtitle="" icon="pi-search" :accentColor="PPT_BLUE" />
+                        <PptKpiCard
+                            title="Доля поискового трафика"
+                            :value="channelsSearchShareValue"
+                            subtitle=""
+                            icon="pi-search"
+                            :accentColor="PPT_BLUE"
+                            description="Процент клиентов, приходящих из поисковых систем. Показывает важность SEO и контекстной рекламы для вашего бизнеса."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Средняя стоимость лида" :value="channelsLeadCostValue" subtitle="" icon="pi-chart-bar" :accentColor="PPT_GREEN" />
+                        <PptKpiCard
+                            title="Средняя стоимость лида"
+                            :value="channelsLeadCostValue"
+                            subtitle=""
+                            icon="pi-chart-bar"
+                            :accentColor="PPT_GREEN"
+                            description="Средняя стоимость одного лида (CPL) в валюте региона. Помогает оценить эффективность инвестиций в маркетинг и сравнить каналы."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Потенциал каналов к росту" :value="channelsGrowthPotentialValue" subtitle="" icon="pi-arrow-up-right" :accentColor="PPT_ORANGE" />
+                        <PptKpiCard
+                            title="Потенциал каналов к росту"
+                            :value="channelsGrowthPotentialValue"
+                            subtitle=""
+                            icon="pi-arrow-up-right"
+                            :accentColor="PPT_ORANGE"
+                            description="Оценка возможности роста в различных каналах привлечения. Помогает определить, в какие каналы стоит инвестировать больше."
+                        />
                     </div>
 
                     <div class="col-span-12 lg:col-span-7">
                         <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4 h-full">
-                            <div class="text-[16px] font-semibold text-slate-800 mb-2">Доли каналов</div>
+                            <div class="flex items-center gap-1.5 mb-2">
+                                <div class="text-[16px] font-semibold text-slate-800">Доли каналов</div>
+                                <i
+                                    class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                    v-tooltip.top="'Процентное распределение трафика/бюджета по источникам (SEO, Instagram, Контекст). Показывает, какие каналы приносят больше всего клиентов.'"
+                                ></i>
+                            </div>
                             <div class="h-[280px]">
                                 <Chart type="bar" :data="channelSharesBarData" :options="channelSharesBarOptions" />
                             </div>
@@ -399,7 +625,13 @@
                     </div>
                     <div class="col-span-12 lg:col-span-5">
                         <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4 h-full">
-                            <div class="text-[16px] font-semibold text-slate-800 mb-3">Стоимость привлечения</div>
+                            <div class="flex items-center gap-1.5 mb-3">
+                                <div class="text-[16px] font-semibold text-slate-800">Стоимость привлечения</div>
+                                <i
+                                    class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                    v-tooltip.top="'Детальная оценка каждого канала: стоимость привлечения (cost) и качественный статус (status: Эффективный, Средний, Низкий). Помогает оптимизировать распределение бюджета.'"
+                                ></i>
+                            </div>
                             <div class="overflow-hidden rounded-xl border border-slate-200/70">
                                 <div class="grid grid-cols-12 bg-slate-50 text-[12px] font-semibold text-slate-600">
                                     <div class="col-span-5 px-3 py-2">Канал</div>
@@ -429,27 +661,60 @@
 
                 <div class="grid grid-cols-12 gap-4">
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Стоимость клиента" :value="cacValue" subtitle="" icon="pi-wallet" :accentColor="PPT_BLUE" />
+                        <PptKpiCard
+                            title="Стоимость клиента"
+                            :value="cacValue"
+                            subtitle=""
+                            icon="pi-wallet"
+                            :accentColor="PPT_BLUE"
+                            description="Стоимость привлечения одного платящего клиента (CAC). Рассчитывается как отношение маркетинговых расходов к количеству новых клиентов. Показывает эффективность маркетинговых инвестиций."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Конверсия в повторные продажи" :value="repeatSalesConversionValue" subtitle="" icon="pi-refresh" :accentColor="PPT_GREEN" />
+                        <PptKpiCard
+                            title="Конверсия в повторные продажи"
+                            :value="repeatSalesConversionValue"
+                            subtitle=""
+                            icon="pi-refresh"
+                            :accentColor="PPT_GREEN"
+                            description="Доля клиентов, совершающих вторую и последующие покупки. Показывает эффективность удержания клиентов и потенциал для увеличения LTV (lifetime value)."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Возврат инвестиций в маркетинг" :value="roiValue" subtitle="" icon="pi-chart-line" :accentColor="PPT_ORANGE" />
+                        <PptKpiCard
+                            title="Возврат инвестиций в маркетинг"
+                            :value="roiValue"
+                            subtitle=""
+                            icon="pi-chart-line"
+                            :accentColor="PPT_ORANGE"
+                            description="Коэффициент возврата инвестиций (ROI). Показывает, во сколько раз выручка превышает вложения в маркетинг. Рассчитывается как (Прибыль / Инвестиции) × 100%."
+                        />
                     </div>
 
                     <div class="col-span-12">
                         <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4">
                             <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
                                 <div class="rounded-xl border border-slate-200/70 bg-slate-50/70 p-3">
-                                    <div class="text-[12px] font-semibold text-slate-500">CAC</div>
+                                    <div class="flex items-center gap-1.5">
+                                        <div class="text-[12px] font-semibold text-slate-500">CAC</div>
+                                        <i
+                                            class="pi pi-question-circle text-[10px] text-slate-400 cursor-help"
+                                            v-tooltip.top="'Customer Acquisition Cost - стоимость привлечения одного нового клиента. Рассчитывается как: Маркетинговые расходы / Количество новых клиентов.'"
+                                        ></i>
+                                    </div>
                                     <div class="mt-2 katex-box" v-html="cacKatex"></div>
                                     <div class="mt-2 text-[12px] text-slate-600">
                                         Значение: <span class="font-semibold text-slate-800">{{ cacValue }}</span>
                                     </div>
                                 </div>
                                 <div class="rounded-xl border border-slate-200/70 bg-slate-50/70 p-3">
-                                    <div class="text-[12px] font-semibold text-slate-500">ROI</div>
+                                    <div class="flex items-center gap-1.5">
+                                        <div class="text-[12px] font-semibold text-slate-500">ROI</div>
+                                        <i
+                                            class="pi pi-question-circle text-[10px] text-slate-400 cursor-help"
+                                            v-tooltip.top="'Return on Investment - возврат инвестиций. Рассчитывается как: (Прибыль / Инвестиции) × 100%. Показывает эффективность маркетинговых вложений.'"
+                                        ></i>
+                                    </div>
                                     <div class="mt-2 katex-box" v-html="roiKatex"></div>
                                     <div class="mt-2 text-[12px] text-slate-600">
                                         Значение: <span class="font-semibold text-slate-800">{{ roiValue }}</span>
@@ -471,7 +736,13 @@
 
                     <div class="col-span-12 lg:col-span-7">
                         <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4 h-full">
-                            <div class="text-[16px] font-semibold text-slate-800 mb-3">Основные показатели</div>
+                            <div class="flex items-center gap-1.5 mb-3">
+                                <div class="text-[16px] font-semibold text-slate-800">Основные показатели</div>
+                                <i
+                                    class="pi pi-question-circle text-[12px] text-slate-400 cursor-help"
+                                    v-tooltip.top="'Сравнение расходов, количества клиентов, CAC, выручки и прибыли в разрезе Месяц против Год. Показывает динамику ключевых финансовых метрик.'"
+                                ></i>
+                            </div>
                             <div class="overflow-hidden rounded-xl border border-slate-200/70">
                                 <div class="grid grid-cols-12 bg-slate-50 text-[12px] font-semibold text-slate-600">
                                     <div class="col-span-6 px-3 py-2">Показатель</div>
@@ -520,13 +791,34 @@
 
                 <div class="grid grid-cols-12 gap-4">
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Проблемы на лендингах" :value="bottlenecksLandingIssuesValue" subtitle="" icon="pi-exclamation-triangle" :accentColor="PPT_BLUE" />
+                        <PptKpiCard
+                            title="Проблемы на лендингах"
+                            :value="bottlenecksLandingIssuesValue"
+                            subtitle=""
+                            icon="pi-exclamation-triangle"
+                            :accentColor="PPT_BLUE"
+                            description="Процентное влияние проблем на лендингах (сайтах). Показывает, насколько сильно проблемы с сайтом мешают конверсии клиентов."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Медленные ответы менеджеров" :value="bottlenecksSlowResponsesValue" subtitle="" icon="pi-refresh" :accentColor="PPT_GREEN" />
+                        <PptKpiCard
+                            title="Медленные ответы менеджеров"
+                            :value="bottlenecksSlowResponsesValue"
+                            subtitle=""
+                            icon="pi-refresh"
+                            :accentColor="PPT_GREEN"
+                            description="Процентное влияние медленных ответов менеджеров на потери клиентов. Показывает важность скорости обработки лидов отделом продаж."
+                        />
                     </div>
                     <div class="col-span-12 md:col-span-4">
-                        <PptKpiCard title="Отказ на повторных касаниях" :value="bottlenecksRepeatRefusalValue" subtitle="" icon="pi-plus" :accentColor="PPT_ORANGE" />
+                        <PptKpiCard
+                            title="Отказ на повторных касаниях"
+                            :value="bottlenecksRepeatRefusalValue"
+                            subtitle=""
+                            icon="pi-plus"
+                            :accentColor="PPT_ORANGE"
+                            description="Процентное влияние проблем с удержанием клиентов. Показывает, насколько сильно проблемы с ретеншном мешают повторным продажам."
+                        />
                     </div>
 
                     <div class="col-span-12">
@@ -538,7 +830,13 @@
                                             <div class="h-8 w-8 rounded-xl flex items-center justify-center" :style="{ background: 'rgba(91,137,255,0.14)', color: PPT_BLUE }">
                                                 <i class="pi pi-cog"></i>
                                             </div>
-                                            <div class="text-[15px] font-semibold text-slate-800">Лендинг</div>
+                                            <div class="flex items-center gap-1.5">
+                                                <div class="text-[15px] font-semibold text-slate-800">Лендинг</div>
+                                                <i
+                                                    class="pi pi-question-circle text-[11px] text-slate-400 cursor-help"
+                                                    v-tooltip.top="'Конкретные списки недоработок на сайте/лендинге. Показывает проблемы, которые мешают конверсии посетителей в клиентов.'"
+                                                ></i>
+                                            </div>
                                         </div>
                                         <ul class="list-disc pl-5 space-y-2 text-[13px] text-slate-600">
                                             <li v-for="t in bottlenecksDetails.landing" :key="t">{{ t }}</li>
@@ -551,7 +849,13 @@
                                             <div class="h-8 w-8 rounded-xl flex items-center justify-center" :style="{ background: 'rgba(255,142,79,0.16)', color: PPT_ORANGE }">
                                                 <i class="pi pi-clock"></i>
                                             </div>
-                                            <div class="text-[15px] font-semibold text-slate-800">Работа с лидами</div>
+                                            <div class="flex items-center gap-1.5">
+                                                <div class="text-[15px] font-semibold text-slate-800">Работа с лидами</div>
+                                                <i
+                                                    class="pi pi-question-circle text-[11px] text-slate-400 cursor-help"
+                                                    v-tooltip.top="'Конкретные списки недоработок в отделе продаж (Lead Management). Показывает проблемы в обработке лидов и работе с потенциальными клиентами.'"
+                                                ></i>
+                                            </div>
                                         </div>
                                         <ul class="list-disc pl-5 space-y-2 text-[13px] text-slate-600">
                                             <li v-for="t in bottlenecksDetails.lead_management" :key="t">{{ t }}</li>
@@ -564,7 +868,13 @@
                                             <div class="h-8 w-8 rounded-xl flex items-center justify-center" :style="{ background: 'rgba(255,107,107,0.14)', color: '#FF6B6B' }">
                                                 <i class="pi pi-chart-pie"></i>
                                             </div>
-                                            <div class="text-[15px] font-semibold text-slate-800">Ретеншн</div>
+                                            <div class="flex items-center gap-1.5">
+                                                <div class="text-[15px] font-semibold text-slate-800">Ретеншн</div>
+                                                <i
+                                                    class="pi pi-question-circle text-[11px] text-slate-400 cursor-help"
+                                                    v-tooltip.top="'Конкретные списки недоработок в удержании клиентов (Retention). Показывает проблемы, которые мешают повторным покупкам и долгосрочным отношениям с клиентами.'"
+                                                ></i>
+                                            </div>
                                         </div>
                                         <ul class="list-disc pl-5 space-y-2 text-[13px] text-slate-600">
                                             <li v-for="t in bottlenecksDetails.retention" :key="t">{{ t }}</li>
@@ -585,18 +895,47 @@
             <section class="space-y-3">
                 <div class="rounded-2xl bg-white shadow-sm border border-slate-200/60 p-4 md:p-6">
                     <div class="text-[13px] text-slate-500 mb-1">Маркетинг <span class="mx-1">›</span> Рекомендации</div>
-                    <div class="text-3xl font-semibold tracking-wide text-center text-slate-800">РЕКОМЕНДАЦИИ</div>
+                    <div class="flex items-center justify-center gap-2">
+                        <div class="text-3xl font-semibold tracking-wide text-center text-slate-800">РЕКОМЕНДАЦИИ</div>
+                        <i
+                            class="pi pi-question-circle text-[14px] text-slate-400 cursor-help"
+                            v-tooltip.top="
+                                'Массив ключевых стратегий развития. Каждая содержит название направления (например, «Оптимизация сайта») и конкретное описание действий для реализации. Финальный прогноз эффективности при условии внедрения рекомендаций.'
+                            "
+                        ></i>
+                    </div>
                     <div class="text-center text-slate-500 text-sm mt-1">итоги маркетингового анализа для интернет-продвижения</div>
 
                     <div class="mt-6 grid grid-cols-12 gap-4">
                         <div class="col-span-12 md:col-span-4">
-                            <PptKpiCard title="Стоимость клиента" :value="cacValue" subtitle="" icon="pi-wallet" :accentColor="PPT_BLUE" />
+                            <PptKpiCard
+                                title="Стоимость клиента"
+                                :value="cacValue"
+                                subtitle=""
+                                icon="pi-wallet"
+                                :accentColor="PPT_BLUE"
+                                description="Стоимость привлечения одного платящего клиента (CAC). Рассчитывается как отношение маркетинговых расходов к количеству новых клиентов."
+                            />
                         </div>
                         <div class="col-span-12 md:col-span-4">
-                            <PptKpiCard title="Конверсия в повторные продажи" :value="repeatSalesConversionValue" subtitle="" icon="pi-refresh" :accentColor="PPT_GREEN" />
+                            <PptKpiCard
+                                title="Конверсия в повторные продажи"
+                                :value="repeatSalesConversionValue"
+                                subtitle=""
+                                icon="pi-refresh"
+                                :accentColor="PPT_GREEN"
+                                description="Доля клиентов, совершающих вторую и последующие покупки. Показывает эффективность удержания клиентов."
+                            />
                         </div>
                         <div class="col-span-12 md:col-span-4">
-                            <PptKpiCard title="Возврат инвестиций" :value="roiValue" subtitle="" icon="pi-chart-line" :accentColor="PPT_ORANGE" />
+                            <PptKpiCard
+                                title="Возврат инвестиций"
+                                :value="roiValue"
+                                subtitle=""
+                                icon="pi-chart-line"
+                                :accentColor="PPT_ORANGE"
+                                description="Коэффициент возврата инвестиций (ROI). Показывает, во сколько раз выручка превышает вложения в маркетинг."
+                            />
                         </div>
 
                         <div class="col-span-12 grid grid-cols-12 gap-4">
@@ -968,6 +1307,47 @@ const segmentRows = computed(() => {
         .sort((a, b) => b.value - a.value);
 });
 
+// Geography rows
+const geographyRows = computed(() => {
+    const geo = report.value?.sections?.market_overview?.geography ?? {};
+    if (typeof geo !== 'object' || geo === null) return [];
+
+    const entries = Object.entries(geo)
+        .map(([city, value]) => ({
+            city: String(city),
+            value: typeof value === 'number' ? value : Number(String(value).replace(/[^\d.]/g, '')) || 0
+        }))
+        .filter((item) => item.value > 0)
+        .sort((a, b) => b.value - a.value);
+
+    if (entries.length === 0) return [];
+
+    const maxValue = entries[0].value;
+    return entries.map((item) => ({
+        ...item,
+        percentage: maxValue > 0 ? Math.round((item.value / maxValue) * 100) : 0
+    }));
+});
+
+// Geography color helpers
+function getGeographyColor(percentage, index) {
+    // High values (orange/red) -> Low values (green)
+    if (percentage >= 80) return '#ff8e4f';
+    if (percentage >= 60) return '#ffa366';
+    if (percentage >= 40) return '#ffb880';
+    if (percentage >= 20) return '#7dd87d';
+    return '#52c41a';
+}
+
+function getGeographyGradient(percentage, index) {
+    const color = getGeographyColor(percentage, index);
+    // Create a subtle gradient from the color to a lighter version
+    if (percentage >= 60) {
+        return `linear-gradient(90deg, ${color}, ${color}dd)`;
+    }
+    return `linear-gradient(90deg, ${color}, ${color}aa)`;
+}
+
 // Competitive: visibility horizontal bar
 const comparisonRows = computed(() => {
     const bench = report.value?.sections?.competitive_environment?.digital_visibility_benchmarks ?? {};