function HowMinicornWorks() {
const [activeStep, setActiveStep] = React.useState(0);
const [paused, setPaused] = React.useState(false);
const [hasIntersected, setHasIntersected] = React.useState(false);
React.useEffect(() => {
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) {
setHasIntersected(true);
obs.disconnect();
}
}, { threshold: 0.3 });
const el = document.getElementById('how-works');
if (el) obs.observe(el);
return () => obs.disconnect();
}, []);
React.useEffect(() => {
if (paused || !hasIntersected) return;
const id = setInterval(() => setActiveStep(s => (s + 1) % 4), 9600);
return () => clearInterval(id);
}, [paused, hasIntersected]);
const steps = [
{
n: '01',
color: '#A78BFA',
tag: 'Сбор данных',
title: 'Легко и быстро',
body: 'Еда, вода, сон, активность, день цикла, настроение — Миникорн берёт на себя скучную часть и помогает её интерпретировать.',
items: ['Фото, голос или текст — 15 сек', 'Сон и шаги подтягиваются автоматом', 'День цикла и настроение — один тап', 'Нутриенты и БАДы — с напоминаниями'],
icon: (c) => (
),
},
{
n: '02',
color: '#34D399',
tag: 'AI-анализ',
title: 'Поиск паттернов',
body: 'Миникорн видит то, что сложно заметить в моменте — причинно-следственные связи. В связке «симптом + данные».',
bodyMobile: 'Миникорн видит то, что сложно заметить в моменте — причинно-следственные связи твоего организма. В связке «симптом + данные».',
items: ['Корреляции между сном и тягой к сладкому', 'Дефициты нутриентов, которые воруют ресурс', '«Ты чаще устаёшь в четверг» — и почему', 'Цепочка: стресс → недоедание → срыв'],
icon: (c) => (
),
},
{
n: '03',
color: '#FBBF24',
tag: 'Персонализация',
title: 'Точный тюнинг',
body: 'Не советы из интернета, а персональные настройки для своего организма. С контекстом, что было на ужин, как прошла ночь, какие планы на завтра.',
items: ['Рекомендации на основе твоей истории', 'Учитывает аллергии и предпочтения', 'Адаптируется под ритм жизни', 'Без универсальных диет — только твоё'],
icon: (c) => (
),
},
{
n: '04',
color: '#FB7185',
tag: 'Результат',
title: 'Глубокие выводы',
body: 'Не статистика в телефоне — а глубокие инсайты, которые ты чувствуешь в моменте. Твоё тело начинает работать предсказуемо.',
items: ['Энергия без кофе во второй половине дня', 'Понимание, почему именно так, а не «попробуй»', 'Изменения, которые держатся, а не откатываются', 'Ты в контакте с собой, а не в борьбе'],
icon: (c) => (
),
},
];
const current = steps[activeStep];
return (
{/* bg texture */}
{/* ── Header ── */}
Как это работает
За счёт чего меняется всё.
Не очередной счётчик калорий.
Интеллектуальная модель + твой личный контекст — результат глубже, чем у любого трекера.