<script setup>
import MarketingV3Service from '@/service/MarketingV3Service';
import { useToast } from 'primevue/usetoast';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const toast = useToast();

const analysisId = computed(() => route.params.id);
const loading = ref(true);
const status = ref('IDLE');
const resultData = ref(null);
const errorMessage = ref('');
const expandedRows = ref([]);

// ─── Loader ───────────────────────────────────────────────────────────────────
const LOADER_MESSAGES = ['Собираем данные конкурентов...', 'Анализируем отзывы и рейтинги...', 'Считаем ER и частоту публикаций...', 'Строим карту контент-стратегий...', 'Генерируем выводы и приоритеты...'];
const loaderMessage = ref(LOADER_MESSAGES[0]);
const loaderDot = ref(1);
let pollInterval = null;
let loaderTick = 0;

// ─── Status helpers ───────────────────────────────────────────────────────────
const statusLabel = computed(() => {
    const map = { COMPLETED: 'ГОТОВ', PROCESSING: 'В ОБРАБОТКЕ', QUEUED: 'В ОЧЕРЕДИ', FAILED: 'ОШИБКА' };
    return map[status.value] || '—';
});
const statusClass = computed(() => {
    const map = {
        COMPLETED: 'text-emerald-600 dark:text-emerald-400',
        PROCESSING: 'text-amber-600 dark:text-amber-400',
        QUEUED: 'text-blue-600 dark:text-blue-400',
        FAILED: 'text-red-600 dark:text-red-400'
    };
    return map[status.value] || 'text-surface-500';
});

// ─── Data aliases ─────────────────────────────────────────────────────────────
const exec = computed(() => resultData.value?.['0_executive_summary'] || {});
const landscape1 = computed(() => resultData.value?.['1_market_landscape'] || {});
const geo2 = computed(() => resultData.value?.['2_geo_structure'] || {});
const competitors = computed(() => resultData.value?.['3_competitor_map'] || []);
const content4 = computed(() => resultData.value?.['4_content_profile'] || {});
const cii = computed(() => resultData.value?.['5_competition_intensity'] || {});
const rep6 = computed(() => resultData.value?.['6_reputation_analysis'] || {});
const beh7 = computed(() => resultData.value?.['7_behavioral_pattern'] || {});
const demand8 = computed(() => resultData.value?.['8_search_demand'] || {});
const pos9 = computed(() => resultData.value?.['9_user_positioning'] || {});
const conclusions10 = computed(() => resultData.value?.['10_structured_conclusions'] || []);
const rationale11 = computed(() => resultData.value?.['11_smm_strategy_rationale'] || '');

// ─── Section 2: Geo table ─────────────────────────────────────────────────────
const geoSort = ref({ field: 'activePlayers', order: -1 });
const geoTable = computed(() => {
    return geo2.value?.cityComparison || [];
});
const onGeoSort = (e) => {
    geoSort.value = { field: e.sortField, order: e.sortOrder };
};

// ─── Section 3: Row expand ────────────────────────────────────────────────────
const onRowExpand = (e) => {
    expandedRows.value = [e.data];
};
const onRowCollapse = () => {
    expandedRows.value = [];
};

// ─── Section 5: CII ───────────────────────────────────────────────────────────
const ciiFactors = computed(() => {
    const d = cii.value;
    return d.contributingFactors || [];
});

// ─── Section 1: City heatmap ──────────────────────────────────────────────────
const cityHeatmap = computed(() => {
    const map = landscape1.value?.cityDistribution || {};
    const entries = Object.entries(map);
    if (!entries.length) return [];

    const max = Math.max(...entries.map(([, v]) => v), 1);
    return entries
        .map(([city, count]) => ({
            city,
            count,
            pct: Math.round((count / max) * 100)
        }))
        .sort((a, b) => b.count - a.count)
        .slice(0, 8);
});
const reviewBoxplot = computed(() => landscape1.value?.reviewDistribution || null);

// ─── Section 9: Radar axes ────────────────────────────────────────────────────
const radarAxes = computed(() => {
    const p = pos9.value;
    const user = p.userMetrics || p.radarChart || {};
    const market = p.marketMetrics || { activity: 50, engagement: 50, video: 50, reputation: 50, frequency: 50 };
    const axes = ['activity', 'engagement', 'video', 'reputation', 'frequency'];
    const labels = { activity: 'Активность', engagement: 'Вовлечённость', video: 'Видео', reputation: 'Репутация', frequency: 'Частота' };
    return axes.map((k) => ({
        label: labels[k],
        user: user[k] ?? 0,
        market: market[k] ?? 0
    }));
});

// ─── Chart Data ───────────────────────────────────────────────────────────────
const PALETTE = ['#4F46E5', '#7C3AED', '#EC4899', '#F97316', '#22C55E', '#06B6D4', '#EAB308'];

const platformChartData = computed(() => {
    const pl = landscape1.value?.activePlayersByPlatform || {};
    const entries = Object.entries(pl);
    return {
        labels: entries.map(([k]) => k),
        datasets: [{ data: entries.map(([, v]) => v), backgroundColor: entries.map((_, i) => PALETTE[i % PALETTE.length]) }]
    };
});
const demandChartData = computed(() => {
    const s = demand8.value?.seasonality || landscape1.value?.demandDynamics || landscape1.value?.demandTrend || [];
    return {
        labels: s.map((p) => p.period ?? p.month),
        datasets: [{ label: 'Спрос', data: s.map((p) => p.value), borderColor: '#4F46E5', backgroundColor: 'rgba(79,70,229,0.08)', tension: 0.4, fill: true }]
    };
});
const contentDistribution = computed(() => {
    const d = content4.value;
    if (d?.demoContentPercent == null && !d?.distribution) return null;
    return {
        Демо: d.demoContentPercent ?? d.distribution?.['Демо/Процесс'] ?? 0,
        Экспертный: d.expertContentPercent ?? d.distribution?.['Экспертный'] ?? 0,
        Продающий: d.salesContentPercent ?? d.distribution?.['Промо/Акции'] ?? 0,
        Отзывы: d.reviewsContentPercent ?? d.distribution?.['Отзывы'] ?? 0,
        Вовлекающий: d.engagementContentPercent ?? d.distribution?.['Вовлечение'] ?? 0
    };
});
const contentChartData = computed(() => {
    const d = contentDistribution.value || {};
    const entries = Object.entries(d).filter(([, v]) => v > 0);
    return {
        labels: entries.map(([k]) => k),
        datasets: [{ data: entries.map(([, v]) => v), backgroundColor: PALETTE }]
    };
});
const starChartData = computed(() => {
    const d = rep6.value?.starDistribution || {};
    return {
        labels: ['1★', '2★', '3★', '4★', '5★'],
        datasets: [
            {
                label: 'Отзывов (%)',
                data: [d['1'] ?? 0, d['2'] ?? 0, d['3'] ?? 0, d['4'] ?? 0, d['5'] ?? 0],
                backgroundColor: ['#EF4444', '#F97316', '#EAB308', '#84CC16', '#22C55E']
            }
        ]
    };
});
const ctaChartData = computed(() => {
    const d = {
        'Промо и скидки': beh7.value?.promoUsagePercent ?? 0,
        'Прямое бронирование': beh7.value?.directBookingPercent ?? 0,
        'Открытые цены': beh7.value?.priceVisibilityPercent ?? 0
    };
    const entries = Object.entries(d);
    return {
        labels: entries.map(([k]) => k),
        datasets: [{ label: 'Поведение', data: entries.map(([, v]) => v), backgroundColor: PALETTE.map((c) => c + 'CC') }]
    };
});
const seasonChartData = computed(() => {
    const s = demand8.value?.seasonality || landscape1.value?.demandDynamics || [];
    const peaks = demand8.value?.peakPeriods || [];
    return {
        labels: s.map((p) => p.period ?? p.month),
        datasets: [
            {
                label: 'Спрос',
                data: s.map((p) => p.value),
                borderColor: '#4F46E5',
                backgroundColor: 'rgba(79,70,229,0.12)',
                tension: 0.4,
                fill: true,
                pointRadius: s.map((p) => (peaks.includes(p.period ?? p.month) ? 7 : 3)),
                pointBackgroundColor: s.map((p) => (peaks.includes(p.period ?? p.month) ? '#EC4899' : '#4F46E5'))
            }
        ]
    };
});
const radarChartData = computed(() => {
    const a = radarAxes.value;
    const isBenchmark = pos9.value?.mode === 'BENCHMARK';
    const datasets = [{ label: 'Рынок (Ориентир)', data: a.map((x) => x.market), backgroundColor: 'rgba(234,179,8,0.2)', borderColor: '#EAB308', pointBackgroundColor: '#EAB308' }];
    if (!isBenchmark) {
        datasets.push({ label: 'Ваша позиция', data: a.map((x) => x.user), backgroundColor: 'rgba(79,70,229,0.2)', borderColor: '#4F46E5', pointBackgroundColor: '#4F46E5' });
    }
    return {
        labels: a.map((x) => x.label),
        datasets
    };
});

// ─── Chart Options ────────────────────────────────────────────────────────────
const tb = { mode: 'index', intersect: false }; // tooltip base
const basePlugin = { legend: { labels: { color: '#6B7280', font: { size: 11 } } }, tooltip: tb };
const doughnutOptions = { responsive: true, maintainAspectRatio: false, plugins: { ...basePlugin, legend: { position: 'right', labels: { color: '#6B7280', font: { size: 11 } } } } };
const lineOptions = { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: tb }, scales: { y: { beginAtZero: true, ticks: { color: '#9CA3AF' } }, x: { ticks: { color: '#9CA3AF' } } } };
const pieOptions = { responsive: true, maintainAspectRatio: false, plugins: { ...basePlugin, legend: { position: 'right', labels: { color: '#6B7280', font: { size: 11 } } } } };
const barOptions = { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: tb }, scales: { y: { beginAtZero: true, ticks: { color: '#9CA3AF' } }, x: { ticks: { color: '#9CA3AF' } } } };
const hbarOptions = { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: tb }, scales: { x: { beginAtZero: true, ticks: { color: '#9CA3AF' } }, y: { ticks: { color: '#9CA3AF' } } } };
const areaOptions = { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: tb }, scales: { y: { beginAtZero: true, ticks: { color: '#9CA3AF' } }, x: { ticks: { color: '#9CA3AF', maxRotation: 45 } } } };
const radarOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: basePlugin,
    scales: {
        r: { min: 0, max: 100, ticks: { stepSize: 20, color: '#9CA3AF', backdropColor: 'transparent' }, pointLabels: { color: '#6B7280', font: { size: 11 } }, grid: { color: 'rgba(107,114,128,0.2)' }, angleLines: { color: 'rgba(107,114,128,0.2)' } }
    }
};

// ─── Helpers ──────────────────────────────────────────────────────────────────
const fmtNum = (n) => (n != null ? Number(n).toLocaleString('ru-RU') : '—');
const fmtPct = (n) => (n != null ? parseFloat(n).toFixed(2) + '%' : '—');
const erClass = (er) => {
    const v = parseFloat(er);
    if (v >= 6) return 'text-emerald-600 dark:text-emerald-400 font-semibold';
    if (v >= 3) return 'text-amber-600 dark:text-amber-400 font-semibold';
    return 'text-rose-600 dark:text-rose-400 font-semibold';
};
const heatColor = (pct) => {
    if (pct >= 75) return '#4F46E5';
    if (pct >= 50) return '#7C3AED';
    if (pct >= 25) return '#A78BFA';
    return '#C4B5FD';
};

const MOCK_RESULT = {
    '0_executive_summary': {
        businessStage: 'Рост',
        geography: 'Алматы, Астана',
        activeCompetitors: 24,
        competitionLevel: 'Высокий',
        averageNicheEr: 4.8,
        averageRating: 4.3,
        demandTrend: '▲ +12% за квартал',
        keyFigures: [
            'Рынок фитнес-услуг Алматы насчитывает 24 активных игрока в Instagram.',
            'Средний ER по нише — 4.8%, что выше общего бенчмарка (3.2%).',
            'Пик спроса приходится на январь и сентябрь (смена сезонов).',
            'Лидер рынка — @championfitness.kz с 48 000 подписчиков и ER 7.2%.'
        ]
    },
    '1_market_landscape': {
        activePlayersByPlatform: { Instagram: 18, '2GIS': 14, YouTube: 6, TikTok: 9 },
        cityDistribution: { Алматы: 18, Астана: 12, Шымкент: 7, Қарағанды: 4, Актобе: 3 },
        nicheReputationLevel: 4.2
    },
    '2_geo_structure': {
        cityComparison: [
            { city: 'Алматы', activePlayers: 18, avgEr: 5.1, avgRating: 4.4, avgPostsPerMonth: 14 },
            { city: 'Астана', activePlayers: 12, avgEr: 4.3, avgRating: 4.2, avgPostsPerMonth: 11 },
            { city: 'Шымкент', activePlayers: 7, avgEr: 3.8, avgRating: 4.0, avgPostsPerMonth: 9 },
            { city: 'Қарағанды', activePlayers: 4, avgEr: 3.2, avgRating: 3.9, avgPostsPerMonth: 7 },
            { city: 'Актобе', activePlayers: 3, avgEr: 2.9, avgRating: 3.7, avgPostsPerMonth: 5 }
        ],
        densityIndex: 78.5
    },
    '3_competitor_map': [
        {
            name: 'ChampionFitness',
            platform: 'Instagram',
            followers: 48000,
            postsPerMonth: 22,
            er: 7.2,
            rating: 4.7,
            reviews: 892,
            strengths: ['Высокий ER', 'Регулярный постинг', 'Профессиональный визуал'],
            weaknesses: ['Слабый 2GIS', 'Нет YouTube']
        },
        { name: 'FitLife Almaty', platform: 'Instagram', followers: 31000, postsPerMonth: 15, er: 5.4, rating: 4.5, reviews: 541, strengths: ['Активные stories', 'Коллаборации'], weaknesses: ['Низкий охват Reels', 'Редкие публикации'] },
        { name: 'PowerGym KZ', platform: 'Instagram', followers: 22000, postsPerMonth: 18, er: 4.1, rating: 4.2, reviews: 310, strengths: ['Акции и скидки', 'Широкий ассортимент'], weaknesses: ['Слабый визуал', 'Нет Reels'] },
        { name: 'SportLife', platform: 'TikTok', followers: 19000, postsPerMonth: 30, er: 6.8, rating: 4.0, reviews: 280, strengths: ['Вирусный TikTok', 'Молодая аудитория'], weaknesses: ['Нет в 2GIS', 'Слабый Instagram'] },
        { name: 'Olymp Club', platform: 'Instagram', followers: 15000, postsPerMonth: 10, er: 3.2, rating: 4.3, reviews: 420, strengths: ['Хорошие отзывы', 'Лояльная ЦА'], weaknesses: ['Редкий постинг', 'Нет видео'] }
    ],
    '4_content_profile': {
        demoContentPercent: 28.0,
        expertContentPercent: 22.0,
        salesContentPercent: 20.0,
        reviewsContentPercent: 18.0,
        engagementContentPercent: 12.0,
        videoShare: 38.0,
        avgTextLengthCharacters: 284,
        ctaUsagePercent: 33.3
    },
    '5_competition_intensity': {
        ciiIndex: 72,
        intensityLabel: 'Высокая интенсивность среды',
        contributingFactors: ['Плотность конкурентов: высокая', 'Частота публикаций: 14 п/мес', 'Средний рейтинг рынка: 4.4 ★']
    },
    '6_reputation_analysis': {
        avgNicheRating: 4.3,
        medianReviews: 2443,
        starDistribution: { 1: 4.3, 2: 6.2, 3: 15.0, 4: 52.0, 5: 22.5 },
        highTrustBusinessShare: 0.88,
        avgOwnerResponseTimeHours: 12
    },
    '7_behavioral_pattern': {
        promoUsagePercent: 35.0,
        directBookingPercent: 28.0,
        priceVisibilityPercent: 15.0,
        avgCycleDays: 2,
        commonCta: ['Запишись на пробный', 'Напиши в Direct', 'Узнай цену', 'Смотри акцию']
    },
    '8_search_demand': {
        avgMonthlySearches: 15400,
        seasonality: [
            { period: 'Январь', value: 92 },
            { period: 'Февраль', value: 78 },
            { period: 'Март', value: 81 },
            { period: 'Апрель', value: 74 },
            { period: 'Май', value: 68 },
            { period: 'Июнь', value: 59 },
            { period: 'Июль', value: 55 },
            { period: 'Август', value: 63 },
            { period: 'Сентябрь', value: 89 },
            { period: 'Октябрь', value: 85 },
            { period: 'Ноябрь', value: 77 },
            { period: 'Декабрь', value: 70 }
        ],
        peakPeriods: ['Январь', 'Сентябрь', 'Октябрь'],
        relatedQueries: ['фитнес алматы', 'тренажёрный зал цена', 'записаться в зал', 'фитнес клуб рядом', 'персональный тренер', 'групповые тренировки']
    },
    '9_user_positioning': {
        mode: 'COMPARISON',
        marketMetrics: { activity: 7, engagement: 6, video: 5, reputation: 8, frequency: 7 },
        userMetrics: { activity: 4, engagement: 3, video: 2, reputation: 6, frequency: 3 },
        strategicFocus: ['Увеличить частоту публикаций', 'Добавить больше видео контента', 'Работать над повышением вовлеченности']
    },
    '10_structured_conclusions': [
        'Рынок фитнес-услуг в Алматы высококонкурентный — 18 активных игроков в Instagram.',
        'Средний ER 5.1% указывает на хорошую вовлечённость аудитории у топ-игроков.',
        'Лидер рынка публикует 22 поста/мес — в 2.5x больше среднего по рынку.',
        'Пиковый спрос в январе и сентябре — необходимо усиливать контент в эти периоды.',
        'Слабое место конкурентов — YouTube и TikTok: только 25% имеют активное присутствие.',
        'CII = 72 (высокий) — входной порог на рынок требует качественного контента и репутации.'
    ],
    '11_smm_strategy_rationale':
        'На основе анализа рекомендуется фокус на Instagram + 2GIS как основные каналы. Контент-стратегия должна включать не менее 14 публикаций в месяц с упором на видео (Reels) и экспертный контент. Это позволит конкурировать с лидером по ER при меньшем бюджете.\n\nScore Model приоритет: Репутация (2GIS-отзывы) → Engagement Rate → Частота постинга → CTA-конверсия.'
};

// ─── API ──────────────────────────────────────────────────────────────────────
const fetchAnalysis = async () => {
    // ── PREVIEW MODE: ?preview=1 — загружает mock без API ──────────────────────
    if (route.query.preview === '1') {
        status.value = 'COMPLETED';
        resultData.value = MOCK_RESULT;
        loading.value = false;
        return;
    }
    if (!analysisId.value) return;
    try {
        loading.value = true;
        const doc = await MarketingV3Service.getAnalysisV3ById(analysisId.value);
        status.value = doc.status || 'IDLE';
        resultData.value = doc.resultData || null;
        if (doc.status === 'FAILED' && doc.errorMessage) errorMessage.value = doc.errorMessage;
        loaderTick++;
        loaderMessage.value = LOADER_MESSAGES[loaderTick % LOADER_MESSAGES.length];
        loaderDot.value = (loaderDot.value % 5) + 1;
    } catch (err) {
        status.value = 'FAILED';
        errorMessage.value = err.message || 'Не удалось загрузить анализ.';
    } finally {
        loading.value = false;
    }
};

const startPolling = () => {
    if (pollInterval) return;
    pollInterval = setInterval(() => {
        if (status.value === 'COMPLETED' || status.value === 'FAILED') {
            stopPolling();
            return;
        }
        fetchAnalysis();
    }, 5000);
};
const stopPolling = () => {
    if (pollInterval) {
        clearInterval(pollInterval);
        pollInterval = null;
    }
};

const generateStrategy = () => {
    router.push({
        name: 'marketing-v3-strategy',
        query: { analysisId: analysisId.value }
    });
};

onMounted(() => {
    fetchAnalysis();
    startPolling();
});
onUnmounted(() => stopPolling());
</script>

<script>
import MetricCard from '@/components/marketing/MetricCard.vue';
import BoxplotPlaceholder from '@/components/marketing/analysis/BoxplotPlaceholder.vue';
import ChartPlaceholder from '@/components/marketing/analysis/ChartPlaceholder.vue';
import ExecCard from '@/components/marketing/analysis/ExecCard.vue';
import GaugeChart from '@/components/marketing/analysis/GaugeChart.vue';
import ScatterPlotSvg from '@/components/marketing/analysis/ScatterPlotSvg.vue';
import SectionBlock from '@/components/marketing/analysis/SectionBlock.vue';

export default {
    components: {
        MetricCard,
        SectionBlock,
        ExecCard,
        ChartPlaceholder,
        BoxplotPlaceholder,
        ScatterPlotSvg,
        GaugeChart
    }
};
</script>

<template>
    <div class="marketing-analysis-v3-page bg-surface-50 dark:bg-surface-900 min-h-screen p-4 md:p-6">
        <Toast />
        <div class="max-w-7xl mx-auto space-y-6">
            <!-- ======================================================= -->
            <!-- HEADER: статус + навигация                              -->
            <!-- ======================================================= -->
            <div class="card">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                    <div>
                        <div class="flex items-center gap-2 mb-1">
                            <span class="text-xs font-bold tracking-widest uppercase text-primary-500">МАРКЕТИНГОВЫЙ АНАЛИЗ</span>
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">v4.0 Data-Driven</span>
                        </div>
                        <h1 class="text-2xl font-bold text-surface-900 dark:text-surface-0">Конкурентный разбор рынка</h1>
                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-0.5">
                            Статус:
                            <span :class="statusClass" class="font-semibold ml-1">{{ statusLabel }}</span>
                        </p>
                    </div>
                    <div class="flex items-center gap-2">
                        <Button label="Назад к анализам" icon="pi pi-arrow-left" severity="secondary" outlined size="small" @click="$router.push('/marketing-analysis/v3')" />
                        <Button v-if="status === 'COMPLETED'" label="SMM-Стратегия" icon="pi pi-chart-line" icon-pos="right" size="small" @click="generateStrategy" />
                    </div>
                </div>
            </div>

            <!-- ======================================================= -->
            <!-- LOADING STATE                                           -->
            <!-- ======================================================= -->
            <div v-if="loading || status === 'QUEUED' || status === 'PROCESSING'" class="card">
                <div class="text-center py-20">
                    <ProgressSpinner style="width: 72px; height: 72px" />
                    <p class="mt-5 text-lg font-semibold text-surface-900 dark:text-surface-0">{{ loaderMessage }}</p>
                    <p class="mt-2 text-sm text-surface-500 dark:text-surface-400 max-w-md mx-auto">Это может занять 1–3 минуты. Вкладку можно оставить открытой — данные обновятся автоматически.</p>
                    <div class="mt-6 flex justify-center gap-2">
                        <span v-for="i in 5" :key="i" :class="['inline-block w-2 h-2 rounded-full transition-all duration-500', loaderDot === i ? 'bg-primary-500 scale-125' : 'bg-surface-300 dark:bg-surface-600']" />
                    </div>
                </div>
            </div>

            <!-- ======================================================= -->
            <!-- ERROR STATE                                             -->
            <!-- ======================================================= -->
            <div v-else-if="status === 'FAILED'" class="card">
                <div class="text-center py-20">
                    <i class="pi pi-exclamation-circle text-6xl text-red-500 mb-4" />
                    <p class="text-lg font-semibold text-surface-900 dark:text-surface-0 mb-2">Ошибка генерации анализа</p>
                    <p class="text-sm text-surface-500 dark:text-surface-400 max-w-sm mx-auto mb-6">
                        {{ errorMessage || 'Попробуйте повторить анализ или обратитесь в поддержку.' }}
                    </p>
                    <Button label="Запустить повторно" icon="pi pi-refresh" @click="$router.push('/marketing-analysis/v3')" />
                </div>
            </div>

            <!-- ======================================================= -->
            <!-- DASHBOARD (COMPLETED)                                   -->
            <!-- ======================================================= -->
            <template v-else-if="status === 'COMPLETED' && resultData">
                <SectionBlock id="s0" title="1. Краткий обзор" subtitle="Ключевые метрики рынка">
                    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
                        <ExecCard label="Стадия бизнеса" :value="exec.businessStage || '—'" icon="pi pi-briefcase" color="indigo" />
                        <ExecCard label="География" :value="exec.geography || '—'" icon="pi pi-map-marker" color="blue" />
                        <ExecCard label="Конкурентов" :value="String(exec.activeCompetitors ?? '—')" icon="pi pi-users" color="violet" :trend="exec.activeCompetitors > 10 ? 'up' : 'neutral'" />
                        <ExecCard label="Уровень конкурен." :value="exec.competitionLevel || '—'" icon="pi pi-bolt" color="amber" />
                        <ExecCard label="Средний ER" :value="fmtPct(exec.averageNicheEr)" icon="pi pi-percentage" color="emerald" :trend="parseFloat(exec.averageNicheEr) >= 5 ? 'up' : 'down'" />
                        <ExecCard label="Рейтинг ★" :value="exec.averageRating ? exec.averageRating.toFixed(1) : '—'" icon="pi pi-star-fill" color="orange" :trend="exec.averageRating >= 4 ? 'up' : 'down'" />
                    </div>
                    <!-- Key figures -->
                    <div v-if="exec.keyFigures?.length" class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
                        <div v-for="(item, idx) in exec.keyFigures" :key="idx" class="flex items-start gap-2 text-sm text-surface-700 dark:text-surface-300 bg-surface-100 dark:bg-surface-800 rounded-lg px-3 py-2">
                            <i class="pi pi-check-circle text-primary-500 mt-0.5 shrink-0" />
                            <span>{{ item }}</span>
                        </div>
                    </div>
                </SectionBlock>

                <!-- === 1. Рыночный ландшафт === -->
                <SectionBlock id="s1" title="2. Рыночный ландшафт" subtitle="Структура платформ, спрос, динамика">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <!-- Donut: платформы -->
                        <div class="flex flex-col">
                            <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 mb-3 uppercase tracking-wider">Распределение по платформам</h3>
                            <div class="flex-1 flex items-center justify-center h-60">
                                <Chart v-if="platformChartData.labels.length" type="doughnut" :data="platformChartData" :options="doughnutOptions" class="max-h-60" />
                                <ChartPlaceholder v-else text="Нет данных по платформам" />
                            </div>
                        </div>
                        <!-- Line: спрос 12 мес -->
                        <div class="flex flex-col">
                            <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 mb-3 uppercase tracking-wider">Тренд спроса (12 месяцев)</h3>
                            <div class="flex-1 h-60">
                                <Chart v-if="demandChartData.labels.length" type="line" :data="demandChartData" :options="lineOptions" class="h-60" />
                                <ChartPlaceholder v-else text="Нет данных по сезонности" />
                            </div>
                        </div>
                        <!-- Heatmap города -->
                        <div>
                            <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 mb-3 uppercase tracking-wider">Распределение по городам</h3>
                            <div class="space-y-2">
                                <div v-for="(item, idx) in cityHeatmap" :key="idx" class="flex items-center gap-3">
                                    <span class="w-28 text-xs text-surface-600 dark:text-surface-400 truncate">{{ item.city }}</span>
                                    <div class="flex-1 bg-surface-200 dark:bg-surface-700 rounded-full h-3 overflow-hidden">
                                        <div class="h-3 rounded-full transition-all duration-700" :style="{ width: (item.pct || 0) + '%', background: heatColor(item.pct || 0) }" />
                                    </div>
                                    <span class="text-xs font-semibold text-surface-700 dark:text-surface-300 w-8 text-right">{{ item.count || 0 }}</span>
                                </div>
                                <ChartPlaceholder v-if="!cityHeatmap?.length" text="Нет данных по городам" />
                            </div>
                        </div>
                        <!-- Metric: niche reputation -->
                        <div v-if="landscape1.nicheReputationLevel" class="flex flex-col justify-center">
                            <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 mb-3 uppercase tracking-wider">Уровень репутации ниши</h3>
                            <div class="rounded-xl border border-surface-200 dark:border-surface-700 p-6 flex items-center justify-between bg-emerald-50 dark:bg-emerald-900/20">
                                <div>
                                    <p class="text-3xl font-bold text-emerald-600 dark:text-emerald-400">{{ landscape1.nicheReputationLevel }} ★</p>
                                    <p class="text-xs text-emerald-700 dark:text-emerald-300 mt-1">в среднем по рынку</p>
                                </div>
                                <i class="pi pi-star-fill text-4xl text-amber-400" />
                            </div>
                        </div>
                    </div>
                </SectionBlock>

                <!-- === 2. Географическая структура === -->
                <SectionBlock id="s2" title="3. Географическая структура конкуренции" subtitle="Активность игроков по городам">
                    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
                        <div class="xl:col-span-2">
                            <DataTable :value="geoTable" :sortField="geoSort.field" :sortOrder="geoSort.order" @sort="onGeoSort" class="p-datatable-sm text-sm" responsiveLayout="scroll">
                                <Column field="city" header="Город" sortable />
                                <Column field="activePlayers" header="Игроков" sortable />
                                <Column field="avgEr" header="Ср. ER" sortable>
                                    <template #body="{ data }">
                                        <span :class="erClass(data.avgEr)">{{ fmtPct(data.avgEr) }}</span>
                                    </template>
                                </Column>
                                <Column field="avgRating" header="Рейтинг" sortable>
                                    <template #body="{ data }">
                                        <span class="flex items-center gap-1">
                                            <i class="pi pi-star-fill text-amber-400 text-xs" />
                                            {{ data.avgRating?.toFixed(1) || '—' }}
                                        </span>
                                    </template>
                                </Column>
                                <Column field="avgPostsPerMonth" header="Постов/мес" sortable />
                            </DataTable>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 mb-3 uppercase tracking-wider">Индекс плотности</h3>
                            <div class="flex flex-col items-center mt-6">
                                <GaugeChart :value="geo2.densityIndex ?? 0" />
                                <p class="text-sm text-surface-500 mt-2 text-center w-48">Индекс перегретости конкурентной среды</p>
                            </div>
                        </div>
                    </div>
                </SectionBlock>

                <!-- === 3. Конкурентная карта === -->
                <SectionBlock id="s3" title="4. Конкурентная карта" subtitle="Топ-игроки ниши: масштаб, активность, репутация">
                    <DataTable
                        :value="competitors"
                        dataKey="name"
                        :paginator="competitors.length > 10"
                        :rows="10"
                        responsiveLayout="scroll"
                        class="p-datatable-sm text-sm"
                        :expandedRows="expandedRows"
                        @rowExpand="onRowExpand"
                        @rowCollapse="onRowCollapse"
                    >
                        <Column expander style="width: 3rem" />
                        <Column field="name" header="Бренд / Аккаунт" sortable>
                            <template #body="{ data }">
                                <span class="font-semibold text-surface-900 dark:text-surface-0">{{ data.name }}</span>
                            </template>
                        </Column>
                        <Column field="platform" header="Платформа" sortable />
                        <Column field="followers" header="Подписчики" sortable>
                            <template #body="{ data }">{{ fmtNum(data.followers) }}</template>
                        </Column>
                        <Column field="postsPerMonth" header="Постов/мес" sortable />
                        <Column field="er" header="ER" sortable>
                            <template #body="{ data }">
                                <span :class="erClass(data.er)" class="font-semibold">{{ fmtPct(data.er) }}</span>
                            </template>
                        </Column>
                        <Column field="rating" header="★ Рейтинг" sortable>
                            <template #body="{ data }">
                                <span class="flex items-center gap-1">
                                    <i class="pi pi-star-fill text-amber-400 text-xs" />
                                    {{ data.rating?.toFixed(1) || '—' }}
                                </span>
                            </template>
                        </Column>
                        <Column field="reviews" header="Отзывов" sortable>
                            <template #body="{ data }">{{ fmtNum(data.reviews) }}</template>
                        </Column>
                        <template #expansion="slotProps">
                            <div class="px-4 py-3 grid grid-cols-1 md:grid-cols-2 gap-4 text-xs bg-surface-50 dark:bg-surface-800">
                                <div>
                                    <p class="font-semibold text-emerald-600 dark:text-emerald-400 mb-2">✓ Сильные стороны</p>
                                    <ul class="space-y-1 text-surface-700 dark:text-surface-300">
                                        <li v-for="(s, i) in slotProps.data.strengths || []" :key="i" class="flex gap-2"><span class="mt-1 h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0" />{{ s }}</li>
                                        <li v-if="!slotProps.data.strengths?.length" class="italic text-surface-400">Нет данных</li>
                                    </ul>
                                </div>
                                <div>
                                    <p class="font-semibold text-rose-600 dark:text-rose-400 mb-2">✗ Слабые стороны</p>
                                    <ul class="space-y-1 text-surface-700 dark:text-surface-300">
                                        <li v-for="(w, i) in slotProps.data.weaknesses || []" :key="i" class="flex gap-2"><span class="mt-1 h-1.5 w-1.5 rounded-full bg-rose-500 shrink-0" />{{ w }}</li>
                                        <li v-if="!slotProps.data.weaknesses?.length" class="italic text-surface-400">Нет данных</li>
                                    </ul>
                                </div>
                            </div>
                        </template>
                    </DataTable>
                    <!-- Scatter Plot placeholder -->
                    <div class="mt-6">
                        <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 mb-3 uppercase tracking-wider">Scatter Plot: Активность vs Вовлечённость</h3>
                        <ScatterPlotSvg :competitors="competitors" />
                    </div>
                </SectionBlock>

                <!-- === 4. Контент-профиль === -->
                <SectionBlock id="s4" title="5. Контент-профиль рынка" subtitle="AI-классификация контента конкурентов">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div>
                            <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 mb-3 uppercase tracking-wider">Типы контента</h3>
                            <div class="h-64">
                                <Chart v-if="contentChartData.labels.length" type="pie" :data="contentChartData" :options="pieOptions" class="max-h-64" />
                                <ChartPlaceholder v-else text="Нет данных по контенту" />
                            </div>
                        </div>
                        <div class="space-y-4">
                            <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 uppercase tracking-wider">Ключевые показатели</h3>
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                <div class="rounded-xl border border-surface-200 dark:border-surface-700 p-4 text-center">
                                    <p class="text-xs text-surface-500 dark:text-surface-400 mb-1">Доля видео</p>
                                    <p class="text-2xl font-bold text-primary-600 dark:text-primary-400">{{ fmtPct(content4.videoShare) }}</p>
                                </div>
                                <div class="rounded-xl border border-surface-200 dark:border-surface-700 p-4 text-center">
                                    <p class="text-xs text-surface-500 dark:text-surface-400 mb-1">Ср. длина текста</p>
                                    <p class="text-2xl font-bold text-violet-600 dark:text-violet-400">{{ fmtNum(content4.avgTextLengthCharacters) }}</p>
                                    <p class="text-xs text-surface-400">симв.</p>
                                </div>
                                <div class="rounded-xl border border-surface-200 dark:border-surface-700 p-4 text-center">
                                    <p class="text-xs text-surface-500 dark:text-surface-400 mb-1">Наличие CTA</p>
                                    <p class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ fmtPct(content4.ctaUsagePercent) }}</p>
                                </div>
                            </div>
                            <!-- Content type bars -->
                            <div v-if="contentDistribution" class="space-y-2 mt-2">
                                <div v-for="(val, key) in contentDistribution" :key="key" class="flex items-center gap-3">
                                    <span class="text-xs w-24 text-surface-600 dark:text-surface-400 capitalize">{{ key }}</span>
                                    <div class="flex-1 h-2 bg-surface-200 dark:bg-surface-700 rounded-full overflow-hidden">
                                        <div class="h-2 rounded-full bg-gradient-to-r from-violet-400 to-primary-500" :style="{ width: val + '%' }" />
                                    </div>
                                    <span class="text-xs font-semibold w-10 text-right text-surface-700 dark:text-surface-300">{{ val }}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </SectionBlock>

                <!-- === 5. Индекс интенсивности конкуренции === -->
                <SectionBlock id="s5" title="6. Индекс интенсивности конкуренции" subtitle="CII: комплексная оценка давления конкурентной среды">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-center">
                        <div class="flex flex-col items-center justify-center">
                            <GaugeChart :value="cii.ciiIndex ?? 0" :label="cii.intensityLabel" />
                        </div>
                        <div class="grid grid-cols-1 gap-3 content-center">
                            <div v-for="factor in ciiFactors" :key="factor" class="rounded-xl border border-surface-200 dark:border-surface-700 px-4 py-3 flex items-center gap-3 bg-surface-50 dark:bg-surface-800">
                                <i class="pi pi-info-circle text-primary-500 shrink-0" />
                                <p class="text-sm font-medium text-surface-800 dark:text-surface-200">{{ factor }}</p>
                            </div>
                        </div>
                    </div>
                </SectionBlock>

                <!-- === 6. Репутационный анализ === -->
                <SectionBlock id="s6" title="7. Репутационный анализ" subtitle="Local Trust Layer: распределение оценок и рейтинговые паттерны">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div>
                            <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 mb-3 uppercase tracking-wider">Распределение звёзд (1–5)</h3>
                            <div class="h-56">
                                <Chart v-if="starChartData.labels.length" type="bar" :data="starChartData" :options="barOptions" class="h-56" />
                                <ChartPlaceholder v-else text="Нет данных по рейтингам" />
                            </div>
                        </div>
                        <div class="space-y-4">
                            <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 uppercase tracking-wider">Ключевые метрики</h3>
                            <div class="grid grid-cols-2 gap-3">
                                <div class="rounded-xl bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 p-4">
                                    <p class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">Средний рейтинг</p>
                                    <p class="text-2xl font-bold text-emerald-700 dark:text-emerald-300">{{ rep6.avgNicheRating?.toFixed(1) || '—' }}</p>
                                </div>
                                <div class="rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 p-4">
                                    <p class="text-xs text-blue-600 dark:text-blue-400 mb-1">Медиана отзывов</p>
                                    <p class="text-2xl font-bold text-blue-700 dark:text-blue-300">{{ fmtNum(rep6.medianReviews) }}</p>
                                </div>
                                <div class="rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-4">
                                    <p class="text-xs text-amber-600 dark:text-amber-400 mb-1">Ср. время ответа</p>
                                    <p class="text-2xl font-bold text-amber-700 dark:text-amber-300 capitalize">{{ rep6.avgOwnerResponseTimeHours ? rep6.avgOwnerResponseTimeHours + ' ч.' : '—' }}</p>
                                </div>
                                <div class="rounded-xl bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-800 p-4">
                                    <p class="text-xs text-violet-600 dark:text-violet-400 mb-1">Доверие рынка (High Trust)</p>
                                    <p class="text-2xl font-bold text-violet-700 dark:text-violet-300">{{ rep6.highTrustBusinessShare ? fmtPct(rep6.highTrustBusinessShare * 100) : '—' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </SectionBlock>

                <!-- === 7. Поведенческий паттерн === -->
                <SectionBlock id="s7" title="8. Поведенческий паттерн рынка" subtitle="CTA-распределение и ритм публикаций">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div>
                            <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 mb-3 uppercase tracking-wider">Распределение CTA</h3>
                            <div class="h-56">
                                <Chart v-if="ctaChartData.labels.length" type="bar" :data="ctaChartData" :options="hbarOptions" class="h-56" />
                                <ChartPlaceholder v-else text="Нет данных по CTA" />
                            </div>
                        </div>
                        <div class="space-y-4">
                            <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 uppercase tracking-wider">Цикл публикаций</h3>
                            <div class="rounded-xl border-2 border-primary-200 dark:border-primary-800 bg-primary-50 dark:bg-primary-900/20 p-5 text-center">
                                <p class="text-xs text-primary-600 dark:text-primary-400 mb-1 uppercase tracking-wider">Средний цикл сделки</p>
                                <p class="text-4xl font-black text-primary-700 dark:text-primary-300 capitalize">{{ beh7.avgCycleDays || '—' }}</p>
                                <p class="text-xs text-primary-500 dark:text-primary-400 mt-1">дней</p>
                            </div>
                            <div v-if="(beh7.topCta || beh7.commonCta)?.length" class="space-y-2">
                                <p class="text-xs text-surface-500 dark:text-surface-400 font-medium uppercase tracking-wider">Топ CTA-призывы</p>
                                <div class="flex flex-wrap gap-2">
                                    <span v-for="cta in beh7.topCta || beh7.commonCta" :key="cta" class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-surface-200 dark:bg-surface-700 text-surface-700 dark:text-surface-300">
                                        {{ cta }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </SectionBlock>

                <!-- === 8. Поисковый спрос и сезонность === -->
                <SectionBlock id="s8" title="9. Поисковый спрос и сезонность" subtitle="Помесячный тренд + связанные запросы">
                    <div>
                        <div class="h-72">
                            <Chart v-if="seasonChartData.labels.length" type="line" :data="seasonChartData" :options="areaOptions" class="h-72" />
                            <ChartPlaceholder v-else text="Нет данных по сезонности" />
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <div v-if="demand8.avgMonthlySearches" class="flex items-center gap-4 rounded-xl border border-surface-200 dark:border-surface-700 p-4">
                                <div class="h-12 w-12 rounded-full bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center shrink-0">
                                    <i class="pi pi-search text-primary-600 dark:text-primary-400 text-xl" />
                                </div>
                                <div>
                                    <p class="text-xs font-semibold text-surface-500 dark:text-surface-400 mb-0.5 uppercase tracking-wider">Частота запросов</p>
                                    <p class="text-2xl font-bold text-surface-900 dark:text-surface-0">{{ fmtNum(demand8.avgMonthlySearches) }} <span class="text-sm font-normal text-surface-500 lowercase">в месяц</span></p>
                                </div>
                            </div>
                            <div v-if="demand8.relatedQueries?.length" class="flex flex-col justify-center">
                                <p class="text-xs text-surface-500 dark:text-surface-400 font-medium uppercase tracking-wider mb-2">Связанные поисковые запросы</p>
                                <div class="flex flex-wrap gap-2">
                                    <span
                                        v-for="q in demand8.relatedQueries"
                                        :key="q"
                                        class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 border border-surface-200 dark:border-surface-700"
                                    >
                                        {{ q }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </SectionBlock>

                <!-- === 9. Позиционирование пользователя === -->
                <SectionBlock id="s9" title="10. Позиционирование" subtitle="Вы vs Рынок: Radar-анализ по 5 осям">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-center">
                        <div class="h-80">
                            <Chart v-if="radarChartData.labels.length" type="radar" :data="radarChartData" :options="radarOptions" class="h-80" />
                            <ChartPlaceholder v-else text="Нет данных для радар-чарта" />
                        </div>
                        <div class="space-y-4">
                            <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 uppercase tracking-wider">{{ pos9.mode === 'BENCHMARK' ? 'Целевые ориентиры (Benchmark рынка)' : 'Конкурентный анализ: Ваша позиция' }}</h3>
                            <div v-for="(axis, idx) in radarAxes" :key="axis.label" class="flex items-center gap-3">
                                <span class="text-xs w-28 text-surface-600 dark:text-surface-400" v-tooltip.top="axis.label">{{ axis.label }}</span>
                                <div class="flex-1 space-y-1">
                                    <div v-if="pos9.mode !== 'BENCHMARK'" class="flex items-center gap-2">
                                        <span class="text-xs text-primary-600 dark:text-primary-400 w-6">Вы</span>
                                        <div class="flex-1 h-2 bg-surface-200 dark:bg-surface-700 rounded-full overflow-hidden">
                                            <div class="h-2 rounded-full bg-primary-500" :style="{ width: axis.user + '%' }" />
                                        </div>
                                        <span class="text-xs font-semibold text-surface-700 dark:text-surface-300">{{ axis.user }}</span>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <span class="text-xs text-amber-500 dark:text-amber-400 w-6">Рын.</span>
                                        <div class="flex-1 h-2 bg-surface-200 dark:bg-surface-700 rounded-full overflow-hidden">
                                            <div class="h-2 rounded-full bg-amber-400" :style="{ width: axis.market + '%' }" />
                                        </div>
                                        <span class="text-xs font-semibold text-surface-700 dark:text-surface-300">{{ axis.market }}</span>
                                    </div>
                                </div>
                            </div>
                            <div v-if="pos9.strategicFocus?.length" class="mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
                                <h4 class="text-xs font-semibold text-surface-700 dark:text-surface-300 uppercase tracking-wider mb-2">На чём сфокусироваться</h4>
                                <ul class="space-y-2">
                                    <li v-for="(focus, i) in pos9.strategicFocus" :key="i" class="flex items-start gap-2 text-sm text-surface-800 dark:text-surface-200">
                                        <i class="pi pi-angle-right text-primary-500 mt-1 shrink-0" />
                                        <span>{{ focus }}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </SectionBlock>

                <!-- === 10. Структурированные выводы === -->
                <SectionBlock id="s10" title="11. Структурированные выводы" subtitle="Факты без воды — что это значит для вашего бизнеса">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div v-for="(item, idx) in conclusions10" :key="idx" class="flex items-start gap-3 rounded-xl border border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800 px-4 py-3">
                            <span class="flex-shrink-0 inline-flex items-center justify-center h-6 w-6 rounded-full bg-primary-100 dark:bg-primary-900/40 text-primary-600 dark:text-primary-300 text-xs font-bold mt-0.5">{{ idx + 1 }}</span>
                            <p class="text-sm text-surface-800 dark:text-surface-200 leading-relaxed">{{ item }}</p>
                        </div>
                        <p v-if="!conclusions10.length" class="text-sm text-surface-400 italic col-span-2">Данные отсутствуют</p>
                    </div>
                </SectionBlock>

                <!-- === 11. Обоснование канала === -->
                <SectionBlock id="s11" title="12. Обоснование выбора канала" subtitle="Переход от аналитики к SMM-стратегии">
                    <div class="rounded-2xl border-2 border-primary-300 dark:border-primary-700 bg-gradient-to-br from-primary-50 via-white to-violet-50 dark:from-primary-900/30 dark:via-surface-800 dark:to-violet-900/20 p-6 md:p-8">
                        <div class="flex items-start gap-4">
                            <div class="flex-shrink-0 h-12 w-12 rounded-xl bg-primary-500 flex items-center justify-center">
                                <i class="pi pi-lightbulb text-white text-xl" />
                            </div>
                            <div class="flex-1">
                                <h3 class="text-lg font-bold text-surface-900 dark:text-surface-0 mb-3">Логика SMM-стратегии</h3>
                                <p class="text-sm text-surface-700 dark:text-surface-300 leading-relaxed whitespace-pre-line">{{ rationale11 || 'Данные не загружены' }}</p>
                                <div class="mt-6 pt-5 border-t border-primary-200 dark:border-primary-700">
                                    <Button label="Сгенерировать SMM-Стратегию (Scoring Model)" icon="pi pi-chart-line" icon-pos="right" class="w-full sm:w-auto" @click="generateStrategy" />
                                </div>
                            </div>
                        </div>
                    </div>
                </SectionBlock>
            </template>
            <!-- end COMPLETED -->
        </div>
    </div>
</template>

<style scoped>
.marketing-analysis-v3-page {
    font-family: var(--font-family);
}
</style>
