// ============= HOW IT WORKS =============
function HowItWorks() {
  const { t } = A.useApp();
  const steps = t('how.steps');
  const ref = A.useReveal();
  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % steps.length), 3200);
    return () => clearInterval(id);
  }, [steps.length]);

  return (
    <section id="how" className="how" data-screen-label="how">
      <div className="wrap">
        <div className="section-head reveal" ref={ref}>
          <span className="eyebrow"><span className="dot"></span>{t('how.eyebrow')}</span>
          <h2>{t('how.title1')} <span className="grad-text">{t('how.title2')}</span></h2>
          <p>{t('how.sub')}</p>
        </div>

        <div className="how-grid">
          <div className="how-steps">
            {steps.map((s, i) => (
              <button key={i} className={`how-step${i === active ? ' is-on' : ''}`} onClick={() => setActive(i)}>
                <span className="how-step-k">{s.k}</span>
                <div className="how-step-body">
                  <div className="how-step-t">{s.t}</div>
                  <div className="how-step-d">{s.d}</div>
                </div>
                <span className="how-step-line"></span>
              </button>
            ))}
          </div>

          <div className="how-viz card">
            <HowViz active={active} />
          </div>
        </div>
      </div>
    </section>
  );
}

function HowViz({ active }) {
  if (active === 0) return <VizQuery key="q" />;
  if (active === 1) return <VizScrape key="s" />;
  if (active === 2) return <VizVerify key="v" />;
  return <VizOutreach key="o" />;
}

function VizQuery() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setCount(c => (c >= 100 ? 100 : c + 3)), 60);
    return () => clearInterval(id);
  }, []);
  const topics = [
    'монтаж для фитнес-блогеров', 'лайфхаки для школьников', 'семейный влог реклама',
    'спортивная аналитика youtube', 'история через диалоги', 'тренер онлайн канал',
    'бизнес с нуля youtube', 'обзоры техники партнерка', 'финансы и инвестиции',
    'влог с питомцем монетизация', 'кулинарный канал продвижение', 'путешествия influence',
    'фитнес дома блогер', 'ноу-хау лайфстайл', 'авто-блогер youtube',
    'детский канал монтаж', 'beauty-блог превью', 'саморазвитие влог',
    'ремонт и DIY канал', 'игровой канал eSports', 'криптовалюта обзор',
    'медицина и здоровье yt', 'юридические советы', 'педагогика онлайн',
  ];
  return (
    <div className="viz viz-query">
      <div className="viz-head">
        <span className="mono muted">AI · генерация тем по нише</span>
        <span className="viz-pill">⚡ {Math.min(count, 100)} / 100</span>
      </div>
      <div className="viz-progress-bar-wrap">
        <div className="viz-progress-bar-track">
          <div className="viz-progress-bar-fill" style={{width: Math.min(count, 100) + '%'}}></div>
        </div>
      </div>
      <div className="viz-topics">
        {topics.map((tp, i) => (
          <div key={tp} className="viz-chip" style={{ animationDelay: (i * 0.07) + 's' }}>
            <span className="viz-chip-d"></span>{tp}
          </div>
        ))}
      </div>
      <div className="viz-query-footer">
        <span className="viz-kv"><span>Ниша</span><strong>монтаж видео</strong></span>
        <span className="viz-kv"><span>Фильтр</span><strong>10K–500K подписчиков</strong></span>
        <span className="viz-kv"><span>Регион</span><strong>RU / UA / KZ</strong></span>
      </div>
    </div>
  );
}

function VizScrape() {
  const [found, setFound] = React.useState(3296);
  React.useEffect(() => {
    const id = setInterval(() => setFound(n => n + Math.floor(Math.random() * 3 + 1)), 900);
    return () => clearInterval(id);
  }, []);
  const rows = [
    { ch: 'maria_lifehacks',    subs: '142K', vid: 'Лайфхаки',   ok: true,  contact: '@maria_lh'   },
    { ch: 'papa_blog_pro',      subs: '88K',  vid: 'Влог',       ok: true,  contact: '@papablog'   },
    { ch: 'family_tv_kids',     subs: '210K', vid: 'Семья',      ok: false, contact: '—'           },
    { ch: 'samokhin_sport',     subs: '54K',  vid: 'Аналитика',  ok: true,  contact: 'email'       },
    { ch: 'history_zen',        subs: '38K',  vid: 'История',    ok: true,  contact: '@hist_zen'   },
    { ch: 'cooking_pro_russia', subs: '97K',  vid: 'Кулинария',  ok: true,  contact: '@cook_ru'    },
    { ch: 'fitness_max_daily',  subs: '63K',  vid: 'Фитнес',     ok: false, contact: '—'           },
    { ch: 'tech_review_quick',  subs: '181K', vid: 'Техника',    ok: true,  contact: 'email'       },
  ];
  return (
    <div className="viz viz-scrape">
      <div className="viz-head">
        <span className="mono muted">scraping YouTube</span>
        <span className="viz-pill viz-pill-live"><span className="pulse"></span> {found.toLocaleString('ru')} каналов</span>
      </div>
      <div className="viz-table">
        <div className="viz-tr is-h">
          <span>CHANNEL</span><span>SUBS</span><span>TOPIC</span><span>CONTACT</span>
        </div>
        {rows.map((r, i) => (
          <div key={r.ch} className="viz-tr" style={{ animationDelay: (i * 0.09) + 's' }}>
            <span className="mono" style={{fontSize:10}}>@{r.ch}</span>
            <span className="mono">{r.subs}</span>
            <span>{r.vid}</span>
            <span className={r.ok ? 'ok' : 'no'} style={{fontSize:10}}>
              {r.ok ? <><A.Ico.tg style={{width:10,height:10}}/> {r.contact}</> : <span className="muted">—</span>}
            </span>
          </div>
        ))}
      </div>
      <div className="viz-scrape-footer">
        <span className="viz-kv"><span>Найдено</span><strong style={{color:'var(--orange-300)'}}>{found.toLocaleString('ru')}</strong></span>
        <span className="viz-kv"><span>С контактом</span><strong>68%</strong></span>
        <span className="viz-kv"><span>Без контакта</span><strong style={{color:'var(--text-3)'}}>32%</strong></span>
      </div>
    </div>
  );
}

function VizVerify() {
  const [checked, setChecked] = React.useState(0);
  const CONTACTS = [
    { name: '@maria_cook',      type: 'TG',    ok: true  },
    { name: '@sport_andrey',    type: 'TG',    ok: true  },
    { name: '@tech_review_pro', type: 'Email', ok: true  },
    { name: '@vlad_bloger',     type: 'TG',    ok: false },
    { name: '@fitness_daily',   type: 'TG',    ok: true  },
    { name: '@kira_lifestyle',  type: 'Email', ok: true  },
    { name: '@ozon_house',      type: 'TG',    ok: false },
    { name: '@cooking_mama',    type: 'TG',    ok: true  },
    { name: '@history_zen',     type: 'Email', ok: true  },
    { name: '@dima_realty',     type: 'TG',    ok: true  },
    { name: '@pro_invest',      type: 'TG',    ok: true  },
    { name: '@night_stream',    type: 'TG',    ok: false },
    { name: '@beauty_ksenia',   type: 'TG',    ok: true  },
    { name: '@cars_dmitry',     type: 'Email', ok: true  },
    { name: '@music_band_ru',   type: 'TG',    ok: false },
    { name: '@yoga_anna',       type: 'TG',    ok: true  },
    { name: '@invest_club',     type: 'TG',    ok: true  },
    { name: '@travel_misha',    type: 'Email', ok: false },
    { name: '@gamer_nick',      type: 'TG',    ok: true  },
    { name: '@style_olga',      type: 'Email', ok: true  },
    { name: '@market_pro',      type: 'TG',    ok: true  },
  ];
  React.useEffect(() => {
    const id = setInterval(() => setChecked(c => (c >= CONTACTS.length ? CONTACTS.length : c + 1)), 180);
    return () => clearInterval(id);
  }, []);
  const okCount  = CONTACTS.filter(c => c.ok).length;
  const pct      = Math.round((okCount / CONTACTS.length) * 100);
  return (
    <div className="viz viz-verify">
      <div className="viz-head">
        <span className="mono muted">TG Contact Check · {CONTACTS.length} аккаунтов</span>
        <span className="viz-pill"><A.Ico.shield style={{width:10,height:10}}/> {pct}% одобрено</span>
      </div>
      <div className="viz-progress-bar-wrap" style={{marginBottom:4}}>
        <div className="viz-progress-bar-track">
          <div className="viz-progress-bar-fill" style={{width: Math.round((checked / CONTACTS.length) * 100) + '%'}}></div>
        </div>
      </div>
      <div className="viz-proxies">
        {CONTACTS.map((c, i) => (
          <div key={i} className={`viz-pr${c.ok ? ' ok' : ' bad'}`} style={{ animationDelay: (i * 0.04) + 's' }}>
            <span className="viz-pr-dot"></span>
            <span className="mono" style={{ fontSize: 9 }}>{c.name}</span>
            <span className="mono muted" style={{ fontSize: 8, marginLeft: 2 }}>{c.type}</span>
            <span className="viz-pr-st" style={{ marginLeft: 'auto' }}>{c.ok ? '✓' : '✗'}</span>
          </div>
        ))}
      </div>
      <div className="viz-verify-footer">
        <span className="viz-kv ok-text"><span>Живых</span><strong>{okCount}</strong></span>
        <span className="viz-kv bad-text"><span>Мертвых</span><strong>{CONTACTS.length - okCount}</strong></span>
        <span className="viz-kv"><span>Проксей</span><strong>50 IP</strong></span>
      </div>
    </div>
  );
}

function VizOutreach() {
  const [sent, setSent] = React.useState(53);
  const [replied, setReplied] = React.useState(9);
  React.useEffect(() => {
    const id = setInterval(() => {
      setSent(s => s + 1);
      if (Math.random() < 0.12) setReplied(r => r + 1);
    }, 1400);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="viz viz-out">
      <div className="viz-head">
        <span className="mono muted">campaign · inbox</span>
        <span className="viz-pill viz-pill-live"><span className="pulse"></span> {sent} отправлено · {replied} ответов</span>
      </div>
      <div className="viz-out-stats">
        <div className="viz-out-stat">
          <div className="viz-out-stat-v" style={{color:'var(--orange-300)'}}>{sent}</div>
          <div className="viz-out-stat-l">Отправлено</div>
        </div>
        <div className="viz-out-stat">
          <div className="viz-out-stat-v" style={{color:'#22c55e'}}>{replied}</div>
          <div className="viz-out-stat-l">Ответили</div>
        </div>
        <div className="viz-out-stat">
          <div className="viz-out-stat-v">{Math.round((replied / sent) * 100)}%</div>
          <div className="viz-out-stat-l">Конверт</div>
        </div>
      </div>
      <div className="viz-chat">
        <div className="viz-bubble out" style={{animationDelay:'.1s'}}>
          <div className="bubble-h"><strong>Mark</strong> → @svetlanosacheva</div>
          Изучал ваши ролики, контент мощный. Хочу предложить разбор превью — покажу что конкретно мешает кликам. Это бесплатно, рад буду помочь.
        </div>
        <div className="viz-bubble in" style={{animationDelay:'.5s'}}>
          <div className="bubble-h"><strong>@svetlanosacheva</strong></div>
          Здравствуйте! Очень интересно, расскажите подробнее.
        </div>
        <div className="viz-bubble out" style={{animationDelay:'.9s'}}>
          <div className="bubble-h"><strong>Mark</strong> → @svetlanosacheva</div>
          Конечно! Давайте созвонимся на 15 минут? Покажу конкретные правки на вашем контенте.
        </div>
        <div className="viz-bubble in is-typing" style={{animationDelay:'1.3s'}}>
          <span className="dots"><span></span><span></span><span></span></span>
        </div>
      </div>
    </div>
  );
}

window.HowItWorks = HowItWorks;

// ============= FEATURES =============
function Features() {
  const { t } = A.useApp();
  const items = t('features.items');
  const ref = A.useReveal();
  return (
    <section id="features" className="features" data-screen-label="features">
      <div className="wrap">
        <div className="section-head reveal" ref={ref}>
          <span className="eyebrow"><span className="dot"></span>{t('features.eyebrow')}</span>
          <h2>{t('features.title1')} <span className="grad-text">{t('features.title2')}</span></h2>
          <p>{t('features.sub')}</p>
        </div>
        <div className="features-grid">
          {items.map((it, i) => {
            const Icon = A.FeatureIcons[i] || A.Ico.bolt;
            return <FeatureCard key={i} idx={i} icon={<Icon />} title={it.t} desc={it.d} tag={it.tag} />;
          })}
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ icon, title, desc, tag, idx }) {
  const ref = A.useReveal();
  return (
    <div ref={ref}
      className={`feature card card-hover reveal reveal-delay-${(idx % 4) + 1}`}>
      <div className="feature-head">
        <span className="feature-icon">{icon}</span>
        <span className="feature-tag">{tag}</span>
      </div>
      <h3 className="feature-title">{title}</h3>
      <p className="feature-desc">{desc}</p>
    </div>
  );
}

window.Features = Features;

// ============= LOGO STRIP =============
function LogoStrip() {
  const roles = [
    'Монтажёры',
    'SMM-агентства',
    'Дизайнеры превью',
    'UGC-студии',
    'Thumbnail-дизайнеры',
    'Аутрич-команды',
    'Продакшн-студии',
    'Фрилансеры',
  ];
  return (
    <div className="logo-strip">
      <div className="logo-strip-inner">
        <div className="logo-strip-head">
          <span className="logo-strip-badge">
            <span className="logo-strip-pulse"></span>
            148+ команд и фрилансеров
          </span>
          <p className="logo-strip-title">Уже доверяют LeadStock</p>
        </div>
        <div className="logo-strip-chips">
          {roles.map(r => <span key={r} className="logo-chip">{r}</span>)}
        </div>
      </div>
    </div>
  );
}

window.LogoStrip = LogoStrip;