function Features() {
const [tab, setTab] = React.useState(0);
const [isMobile, setIsMobile] = React.useState(
typeof window !== 'undefined' && window.matchMedia('(max-width: 860px)').matches
);
const [paused, setPaused] = React.useState(false);
// nonce — увеличивается при ручном выборе, чтобы useEffect и анимация
// прогресс-бара точно перезапустились (даже если клик по уже активной вкладке).
const [pickNonce, setPickNonce] = React.useState(0);
React.useEffect(() => {
if (typeof window === 'undefined') return;
const mq = window.matchMedia('(max-width: 860px)');
const handler = (e) => setIsMobile(e.matches);
mq.addEventListener ? mq.addEventListener('change', handler) : mq.addListener(handler);
return () => {
mq.removeEventListener ? mq.removeEventListener('change', handler) : mq.removeListener(handler);
};
}, []);
// JS-driven прогресс-бар: width 0→100% за 15s через CSS transition.
// Это надёжнее CSS-анимаций при ре-маунте span в iOS Safari.
const [pct, setPct] = React.useState(0);
const [withTransition, setWithTransition] = React.useState(false);
React.useEffect(() => {
if (paused) return;
// Шаг 1: мгновенно сбросить ширину на 0 БЕЗ transition
setWithTransition(false);
setPct(0);
// Шаг 2: через 2 кадра включить transition и установить 100% — браузер
// обработает интерполяцию width 0→100% за 15s.
let f2 = null;
const f1 = requestAnimationFrame(() => {
f2 = requestAnimationFrame(() => {
setWithTransition(true);
setPct(100);
});
});
// Шаг 3: через 15s переключить tab на следующий
const id = setTimeout(() => setTab(t => (t + 1) % 4), 15000);
return () => {
cancelAnimationFrame(f1);
if (f2) cancelAnimationFrame(f2);
clearTimeout(id);
};
}, [tab, paused, pickNonce]);
// Manual tab pick — гарантированный рестарт через pickNonce.
const pickTab = (i) => {
setPaused(false);
setTab(i);
setPickNonce(n => n + 1);
};
const tabs = [
{
key: 'collect',
label: 'Получение отзывов',
sub: 'Сбор сигналов',
icon: 'inbox',
title: 'Один канал для всех голосов',
desc: 'Подключите 40+ источников за несколько кликов — от App Store и звонков в поддержку до закрытых каналов в Telegram и опросов после оплаты. Фидли нормализует язык, дедуплицирует ботов и сохраняет контекст: тариф, версию приложения, сегмент.',
bullets: ['App Store, Google Play, RuStore', 'Zendesk, Intercom, Usedesk, Юздеск', 'Звонки и расшифровки (Asterisk, Mango)', 'Опросы NPS / CSAT / CES', 'Соцсети, отзовики, маркетплейсы'],
mock: ,
},
{
key: 'classify',
label: 'Разметка и темы',
sub: 'Авто-таксономия',
icon: 'tag',
title: 'Таксономия, которая обучается на ваших данных',
desc: 'Никаких заранее заданных тегов. Фидли строит дерево тем из того, что клиенты говорят именно вам — и достраивает его, когда появляются новые продукты, регионы или сегменты. Качество разметки видно цифрой, а не на глаз.',
bullets: ['Авто-таксономия за 48 часов', 'Эталонная точность F1 = 0.91', 'Свои правила и алиасы', 'Связь темы → JIRA / Linear / YouTrack', 'История изменений по каждой теме'],
mock: ,
},
{
key: 'analyze',
label: 'Анализ и инсайты',
sub: 'ИИ-обоснование',
icon: 'spark',
title: 'Спросите данные на русском',
desc: 'Найдите всплески, копайте до конкретной цитаты, сравните сегменты. Фидли отвечает ссылками на исходные сообщения — никаких галлюцинаций без источника. Подписки на темы шлют алёрты в Slack или Mattermost.',
bullets: ['ИИ-поиск с цитатами', 'Срезы по тарифу, городу, версии', 'Алёрты при росте темы >X%', 'Сравнение релизов и А/Б', 'Экспорт в Notion и Confluence'],
mock: ,
},
{
key: 'act',
label: 'Дашборды и действия',
sub: 'От цифры — к тикету',
icon: 'chart',
title: 'Дашборды, которые приводят к решениям',
desc: 'Красивые живые дашборды по темам, сегментам и релизам — с возможностью одним кликом превратить инсайт в задачу для продукта или бриф для маркетинга. Каждая задача несёт репрезентативные цитаты: продакт видит не цифру, а голоса клиентов.',
bullets: ['Готовые дашборды: тон, темы, релизы', 'Срезы по тарифу, сегменту, городу', 'Двусторонняя синхронизация с JIRA', 'Шаблоны брифов для PM и CX', 'Еженедельный дайджест для CEO'],
mock: ,
},
];
const cur = tabs[tab];
return (
Четыре шага от сырого отзыва до понятного действия
{/* tabs: desktop = grid of 4 columns, mobile = horizontal accordion */}
{isMobile ? (
{/* L-connector */}
{s.n}
{s.hot && (
HOT
)}
{s.c}
))}
)}
))}
);
}
function AnalyzeMock() {
const CASES = [
{
q: 'Что изменилось в жалобах на оплату после релиза 4.12?',
body: (
С 14 мая упоминания темы «Apple Pay не проходит» выросли на 112%.
В 78% случаев — iOS 17.4 на iPhone 13/14. Появилась новая под-тема{' '}
«висит на 3-D Secure»
.
«Не могу оплатить третий день, висит на безопасной странице сбера и потом ошибка»
App Store · iOS 17.4 · 16 мая
),
},
{
q: 'Какие SKU потеряли долю в сетях ЦФО за последние 14 дней?',
body: (
3 SKU теряют долю полки. Драйвер — отзывы на новый рецепт и помятая упаковка на WB.
{/* Action row — appears only on dashboards with a real problem to act on.
Volume = позитивный тренд, действие не нужно. */}
{VIEWS[view] === 'themes' && (
)}
{VIEWS[view] === 'releases' && (
)}
{VIEWS[view] === 'volume' && (