// ============= TOOLS — 3 tabs =============

// ── Data ──────────────────────────────────────────────────────────────────────
const NICHES_DATA = [
  { name: 'Монтаж видео',          leads: '14 200', contact: '28%', reply: '8.3%',  check: '12 000 ₽', comp: 'Высокая', hot: false },
  { name: 'Дизайн превью',         leads: '9 800',  contact: '31%', reply: '9.4%',  check: '10 000 ₽', comp: 'Средняя', hot: true  },
  { name: 'UGC / Reels',           leads: '7 600',  contact: '22%', reply: '7.1%',  check: '25 000 ₽', comp: 'Низкая',  hot: false },
  { name: 'SMM-ведение',           leads: '11 400', contact: '19%', reply: '6.2%',  check: '18 000 ₽', comp: 'Высокая', hot: false },
  { name: 'Motion-дизайн',         leads: '3 800',  contact: '33%', reply: '11.2%', check: '35 000 ₽', comp: 'Низкая',  hot: true  },
  { name: 'Копирайтинг',           leads: '8 200',  contact: '17%', reply: '5.8%',  check: '8 000 ₽',  comp: 'Высокая', hot: false },
  { name: 'Субтитры / сценарии',   leads: '5 100',  contact: '26%', reply: '8.8%',  check: '15 000 ₽', comp: 'Средняя', hot: false },
  { name: 'Голосовой диктор',      leads: '1 600',  contact: '41%', reply: '15.3%', check: '30 000 ₽', comp: 'Низкая',  hot: true  },
  { name: 'Инфографика',           leads: '2 900',  contact: '35%', reply: '12.1%', check: '20 000 ₽', comp: 'Низкая',  hot: true  },
  { name: 'Thumbnail A/B тест',    leads: '4 300',  contact: '29%', reply: '10.2%', check: '22 000 ₽', comp: 'Средняя', hot: false },
  { name: 'Продюсирование',        leads: '2 100',  contact: '38%', reply: '13.4%', check: '60 000 ₽', comp: 'Низкая',  hot: true  },
  { name: 'SEO для YouTube',       leads: '6 700',  contact: '24%', reply: '9.1%',  check: '18 000 ₽', comp: 'Средняя', hot: true  },
  { name: 'Перевод / локализация', leads: '3 400',  contact: '32%', reply: '11.5%', check: '14 000 ₽', comp: 'Низкая',  hot: false },
  { name: 'Анимация / 2D',         leads: '2 600',  contact: '30%', reply: '10.8%', check: '45 000 ₽', comp: 'Низкая',  hot: true  },
  { name: 'Цветокоррекция',        leads: '1 800',  contact: '36%', reply: '14.2%', check: '28 000 ₽', comp: 'Низкая',  hot: false },
  { name: 'Обложки для подкастов', leads: '4 100',  contact: '34%', reply: '12.6%', check: '8 000 ₽',  comp: 'Средняя', hot: false },
  { name: 'Shorts / клипы',        leads: '8 900',  contact: '21%', reply: '7.4%',  check: '16 000 ₽', comp: 'Средняя', hot: true  },
  { name: 'Чат-боты для блогеров', leads: '1 200',  contact: '43%', reply: '16.8%', check: '25 000 ₽', comp: 'Низкая',  hot: true  },
  { name: 'Ведение сообщества',    leads: '5 500',  contact: '20%', reply: '6.8%',  check: '12 000 ₽', comp: 'Средняя', hot: false },
  { name: 'Email-рассылки',        leads: '3 700',  contact: '27%', reply: '9.9%',  check: '20 000 ₽', comp: 'Средняя', hot: false },
];

const COMP_COLOR = { 'Низкая': '#22c55e', 'Средняя': '#f59e0b', 'Высокая': '#ef4444' };

const NICHE_OPTIONS = [
  { label: 'Монтаж видео',          eff: 1.00 },
  { label: 'Дизайн превью',         eff: 1.10 },
  { label: 'UGC / Reels',           eff: 0.90 },
  { label: 'SMM-ведение',           eff: 0.95 },
  { label: 'Motion-дизайн',         eff: 1.20 },
  { label: 'Копирайтинг',           eff: 0.85 },
  { label: 'Голосовой диктор',      eff: 1.30 },
  { label: 'Инфографика',           eff: 1.15 },
  { label: 'Продюсирование',        eff: 1.35 },
  { label: 'SEO для YouTube',       eff: 1.08 },
  { label: 'Анимация / 2D',         eff: 1.25 },
  { label: 'Shorts / клипы',        eff: 1.05 },
  { label: 'Чат-боты для блогеров', eff: 1.40 },
];

// ── Tab A: Top Niches ─────────────────────────────────────────────────────────
function TabNiches() {
  const [filter, setFilter] = React.useState('all');
  const filtered = filter === 'hot' ? NICHES_DATA.filter(n => n.hot)
                 : filter === 'low' ? NICHES_DATA.filter(n => n.comp === 'Низкая')
                 : NICHES_DATA;
  return (
    <div>
      <div className="tp-intro">
        <div className="tp-intro-row">
          <div>
            <h2>Топ ниш для <span>YouTube-аутрича</span></h2>
            <p className="tp-intro-sub">
              {NICHES_DATA.length} ниш с реальными данными: лиды в базе, % контактов, конверт в ответ,
              уровень конкуренции и средний чек. Выбери свою нишу и сразу оцени потенциал.
            </p>
          </div>
          <div className="tp-intro-stats">
            <div className="tp-intro-stat">
              <div className="tp-intro-stat-v">{NICHES_DATA.length}</div>
              <div className="tp-intro-stat-l">ниш в базе</div>
            </div>
            <div className="tp-intro-stat">
              <div className="tp-intro-stat-v">2,8М+</div>
              <div className="tp-intro-stat-l">лидов всего</div>
            </div>
            <div className="tp-intro-stat">
              <div className="tp-intro-stat-v">9.4%</div>
              <div className="tp-intro-stat-l">ср. конверт</div>
            </div>
          </div>
        </div>
      </div>

      <div className="niches-filters">
        {[['all','Все ниши'],['hot','🔥 Топ'],['low','Низкая конкуренция']].map(([k,l]) => (
          <button key={k} className={'niche-filter-btn' + (filter === k ? ' is-on' : '')} onClick={() => setFilter(k)}>{l}</button>
        ))}
      </div>

      <div className="niches-grid">
        {filtered.map((n, i) => (
          <div key={i} className={'niche-card' + (n.hot ? ' is-hot' : '')}>
            <div className="niche-card-head">
              <div className="niche-card-name">{n.name}</div>
              {n.hot && <span className="niche-hot-badge">Топ</span>}
            </div>
            <div className="niche-stats">
              <div className="niche-stat">
                <div className="niche-stat-v">{n.leads}</div>
                <div className="niche-stat-l">лидов</div>
              </div>
              <div className="niche-stat">
                <div className="niche-stat-v">{n.contact}</div>
                <div className="niche-stat-l">контакт</div>
              </div>
              <div className="niche-stat">
                <div className="niche-stat-v">{n.reply}</div>
                <div className="niche-stat-l">ответов</div>
              </div>
            </div>
            <div className="niche-footer">
              <div className="niche-check">
                <span className="niche-check-l">Чек</span>
                <span className="niche-check-v">{n.check}</span>
              </div>
              <span className="niche-comp" style={{color: COMP_COLOR[n.comp]}}>
                <span className="niche-comp-dot" style={{background: COMP_COLOR[n.comp]}}></span>
                {n.comp}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Tab B: ROI Calculator ─────────────────────────────────────────────────────
function TabROI() {
  const [nicheIdx, setNicheIdx] = React.useState(0);
  const [hours, setHours]       = React.useState(8);
  const [check, setCheck]       = React.useState(5000);
  const [checkInput, setCheckInput] = React.useState('5000');

  const eff         = NICHE_OPTIONS[nicheIdx].eff;
  // Outforge saves ~75% of lead-search time; every saved 12h → 1 extra deal closed
  const freedHours  = hours * 4 * 0.75;
  const addClients  = Math.max(0.1, (freedHours / 12) * eff);
  const addIncome   = Math.round(addClients * check);
  const planName    = addIncome > 60000 ? 'Studio' : addIncome > 15000 ? 'Pro' : 'Старт';
  const planPrice   = planName === 'Studio' ? 19900 : planName === 'Pro' ? 7900 : 2900;
  const paybackDays = addIncome > 0 ? Math.max(1, Math.round(planPrice / (addIncome / 30))) : 0;

  const hoursPct = Math.round(((hours - 1) / 29) * 100);
  const checkMax = 300000;
  const checkPct = Math.round((Math.min(check, checkMax) / checkMax) * 100);

  function fmt(n) { return n.toLocaleString('ru'); }

  const handleCheckInput = (v) => {
    setCheckInput(v);
    const num = parseInt(v.replace(/\D/g, ''), 10);
    if (!isNaN(num) && num >= 100) setCheck(Math.min(num, 1000000));
  };

  const dayWord = (d) => d === 1 ? 'день' : d < 5 ? 'дня' : 'дней';

  return (
    <div>
      <div className="tp-intro">
        <div className="tp-intro-row">
          <div>
            <h2>Калькулятор <span>окупаемости</span></h2>
            <p className="tp-intro-sub">
              Укажи нишу, сколько часов тратишь на поиск клиентов и средний чек —
              посчитаем потенциальный доход и за сколько дней окупится подписка.
            </p>
          </div>
          <div className="tp-intro-stats">
            <div className="tp-intro-stat">
              <div className="tp-intro-stat-v">×3.2</div>
              <div className="tp-intro-stat-l">ROI в среднем</div>
            </div>
            <div className="tp-intro-stat">
              <div className="tp-intro-stat-v">7 дней</div>
              <div className="tp-intro-stat-l">окупаемость</div>
            </div>
          </div>
        </div>
      </div>
      <div className="roi-layout">
        <div className="roi-controls">
          <div className="roi-ctrl-group">
            <label className="roi-ctrl-label">Твоя ниша</label>
            <select className="roi-select" value={nicheIdx} onChange={e => setNicheIdx(+e.target.value)}>
              {NICHE_OPTIONS.map((n, i) => (
                <option key={i} value={i}>{n.label}</option>
              ))}
            </select>
          </div>

          <div className="roi-ctrl-group">
            <label className="roi-ctrl-label">Часов в неделю тратишь на поиск клиентов</label>
            <div className="roi-slider-wrap">
              <div className="roi-slider-row">
                <span>1 ч</span>
                <span className="roi-slider-val">{hours} ч/нед</span>
                <span>30 ч</span>
              </div>
              <input type="range" className="roi-slider" min="1" max="30" step="1" value={hours}
                style={{ '--pct': hoursPct + '%' }} onChange={e => setHours(+e.target.value)} />
            </div>
          </div>

          <div className="roi-ctrl-group">
            <label className="roi-ctrl-label">Средний чек одного клиента (₽)</label>
            <div className="roi-check-input-wrap">
              <input
                type="text" className="roi-check-input"
                value={checkInput}
                onChange={e => handleCheckInput(e.target.value)}
                onBlur={() => setCheckInput(String(check))}
                placeholder="Введи сумму..."
              />
              <span className="roi-check-hint">от 500 ₽ до любой суммы</span>
            </div>
            <div className="roi-check-presets">
              {[500, 2000, 5000, 15000, 50000].map(v => (
                <button key={v} className={'roi-preset' + (check === v ? ' is-on' : '')}
                  onClick={() => { setCheck(v); setCheckInput(String(v)); }}>
                  {fmt(v)} ₽
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="roi-results">
          <div className="roi-result-row">
            <div className="roi-result-label">Доп. доход в месяц</div>
            <div className="roi-result-val orange">+{fmt(addIncome)} ₽</div>
            <div className="roi-result-sub">
              ~{(Math.round(addClients * 10) / 10).toLocaleString('ru')} клиента
              &nbsp;·&nbsp;экономишь {Math.round(freedHours)} ч/мес
            </div>
          </div>

          <div className="roi-divider"></div>

          <div className="roi-result-row">
            <div className="roi-result-label">Окупаемость подписки</div>
            <div className="roi-result-val">
              {paybackDays > 0 ? 'за ' + paybackDays + ' ' + dayWord(paybackDays) : '—'}
            </div>
            <div className="roi-result-sub">при тарифе {planName}</div>
          </div>

          <div className="roi-divider"></div>

          <div className="roi-plan-rec">
            <div>
              <div className="roi-result-label">Рекомендуем тариф</div>
              <div className="roi-plan-name">{planName}</div>
            </div>
            <span className="roi-plan-badge">{fmt(planPrice)} ₽/мес</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Tab C: AI Niche Analysis ──────────────────────────────────────────────────
function TabAI() {
  const [query,   setQuery]   = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [result,  setResult]  = React.useState(null);
  const [error,   setError]   = React.useState(null);

  const EXAMPLES = ['монтаж видео', 'дизайн превью', 'SMM продвижение', 'UGC контент', 'motion дизайн'];

  const analyze = async (override) => {
    const q = (override || query).trim();
    if (!q) return;
    if (override) setQuery(override);
    setLoading(true); setResult(null); setError(null);
    try {
      const res = await fetch('/api/ai-niche', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ niche: q }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        setError(data.error === 'AI not configured' ? 'AI-анализ временно недоступен.' : 'Ошибка запроса. Попробуй ещё раз.');
        return;
      }
      setResult(await res.json());
    } catch (e) {
      setError('Ошибка соединения. Попробуй ещё раз.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <div className="tp-intro">
        <div className="tp-intro-row">
          <div>
            <h2>Разбор ниши <span>за 10 секунд</span></h2>
            <p className="tp-intro-sub">
              Введи свою нишу — Claude проанализирует базу и выдаст топ-5 тем для парсинга,
              типичный охват каналов, конверт в ответ и рекомендацию тарифа.
            </p>
          </div>
          <div className="tp-intro-stats">
            <div className="tp-intro-stat">
              <div className="tp-intro-stat-v">AI</div>
              <div className="tp-intro-stat-l">анализ</div>
            </div>
            <div className="tp-intro-stat">
              <div className="tp-intro-stat-v">10 сек</div>
              <div className="tp-intro-stat-l">результат</div>
            </div>
          </div>
        </div>
      </div>
      <div className="ai-niche">
        <div className="ai-niche-input-row">
        <input
          className="ai-niche-input"
          placeholder="Введи нишу, например: монтаж видео для фитнес-блогеров"
          value={query}
          onChange={e => setQuery(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && !loading && query.trim() && analyze()}
        />
        <button
          className="ai-niche-btn"
          onClick={() => analyze()}
          disabled={loading || !query.trim()}
        >
          {loading ? 'Анализ…' : 'Анализ →'}
        </button>
      </div>

      {loading && (
        <div className="ai-niche-result">
          <div className="ai-niche-loading">
            <div className="ai-niche-spinner"></div>
            Анализируем нишу через AI…
          </div>
        </div>
      )}

      {error && !loading && (
        <div className="ai-niche-result">
          <p style={{ color: 'var(--text-3)', fontSize: 14, margin: 0 }}>{error}</p>
        </div>
      )}

      {result && !loading && (
        <div className="ai-niche-result">
          <div className="ai-r-block">
            <div className="ai-r-title">Топ-10 тем для YouTube-парсинга</div>
            <div className="ai-r-topics">
              {(result.topics || []).map((t, i) => (
                <span key={i} className="ai-r-topic">{t}</span>
              ))}
            </div>
          </div>

          <div className="ai-r-block" style={{ marginTop: 22 }}>
            <div className="ai-r-title">Статистика ниши</div>
            <div className="ai-r-meta">
              <div className="ai-r-meta-item">
                <div className="ai-r-meta-v">{result.leads}</div>
                <div className="ai-r-meta-l">лидов в базе</div>
              </div>
              <div className="ai-r-meta-item">
                <div className="ai-r-meta-v">{result.reach}</div>
                <div className="ai-r-meta-l">охват каналов</div>
              </div>
              <div className="ai-r-meta-item">
                <div className="ai-r-meta-v">{result.reply_rate}</div>
                <div className="ai-r-meta-l">ср. ответов</div>
              </div>
              {result.competition && (
                <div className="ai-r-meta-item">
                  <div className="ai-r-meta-v" style={{fontSize:18}}>{result.competition}</div>
                  <div className="ai-r-meta-l">конкуренция</div>
                </div>
              )}
            </div>
          </div>

          {result.tip && (
            <div className="ai-r-block" style={{ marginTop: 22 }}>
              <div className="ai-r-title">Совет по аутричу</div>
              <p className="ai-r-tip">{result.tip}</p>
            </div>
          )}

          <div className="ai-r-rec" style={{ marginTop: 22 }}>
            <span className="ai-r-rec-text">Рекомендуемый тариф для этой ниши</span>
            <span className="ai-r-rec-plan">{result.plan}</span>
          </div>
        </div>
      )}

      {!loading && !result && !error && (
        <div className="ai-niche-empty">
          <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
            <circle cx="22" cy="22" r="21" stroke="rgba(255,138,60,.2)" strokeWidth="1.5" />
            <circle cx="22" cy="22" r="14" stroke="rgba(255,138,60,.12)" strokeWidth="1" />
            <path d="M16 22h12M22 16v12" stroke="var(--orange-300)" strokeWidth="1.5" strokeLinecap="round" />
          </svg>
          <p>Введи нишу и получи AI-разбор: топ-5 тем для парсинга, охват, конверт и рекомендацию тарифа — за 10 секунд</p>
        </div>
      )}
      </div>
    </div>
  );
}

// ── Tab D: Product Demo ───────────────────────────────────────────────────────
const DEMO_SCREENS = [
  {
    label: 'Dashboard',
    img:   '/landing/uploads/pasted-1779823894067-0.png',
    desc:  'Все ключевые метрики за 7D/30D/90D: лиды, контакты, ответы, воронка — в одном экране.',
  },
  {
    label: 'YouTube Leads',
    img:   '/landing/uploads/pasted-1779823904979-0.png',
    desc:  'AI генерирует до 200 тем по нише. Парсим каналы с фильтрами по просмотрам, подпискам, региону и типу контакта.',
  },
  {
    label: 'Верификация',
    img:   '/landing/uploads/pasted-1779823924578-0.png',
    desc:  'Прокси-пулы + TG-чекер отсекают мёртвые аккаунты. На выходе только живые валидные лиды.',
  },
  {
    label: 'Рассылки',
    img:   '/landing/uploads/pasted-1779823947506-0.png',
    desc:  'Статус кампании, прогресс, логи по каждому получателю и история всех запусков.',
  },
  {
    label: 'CRM Inbox',
    img:   '/landing/uploads/pasted-1779823995600-0.png',
    desc:  'Все переписки, сделки, воронка и контакты в одном месте. Отвечаешь прямо внутри Outforge.',
  },
];

function TabDemo() {
  const [active, setActive] = React.useState(0);
  const s = DEMO_SCREENS[active];
  return (
    <div className="demo-layout">
      {/* Left nav */}
      <div className="demo-nav">
        {DEMO_SCREENS.map((item, i) => (
          <button
            key={i}
            className={'demo-nav-item' + (i === active ? ' is-on' : '')}
            onClick={() => setActive(i)}
          >
            <span className="demo-nav-dot"></span>
            {item.label}
          </button>
        ))}
      </div>
      {/* Right: screenshot + desc */}
      <div className="demo-content">
        <div className="demo-screen-wrap">
          <div className="demo-screen-chrome">
            <div className="demo-screen-chrome-dots">
              <span style={{ background: '#ff5f56' }}></span>
              <span style={{ background: '#ffbd2e' }}></span>
              <span style={{ background: '#27c93f' }}></span>
            </div>
            <span className="mono muted" style={{ fontSize: 10, marginLeft: 8 }}>
              outforge.io · {s.label}
            </span>
          </div>
          <img key={active} src={s.img} alt={s.label} className="demo-screen-img" />
        </div>
        <p className="demo-desc">{s.desc}</p>
      </div>
    </div>
  );
}

// ── Main Tools Section ────────────────────────────────────────────────────────
function ToolsTabs() {
  const [tab, setTab] = React.useState(0);
  const ref = A.useReveal();

  const TABS = [
    { letter: 'A', label: 'Топ ниш' },
    { letter: 'B', label: 'Калькулятор ROI' },
    { letter: 'C', label: 'Разбор ниши · AI' },
    { letter: 'D', label: 'Демо интерфейса' },
  ];

  return (
    <section id="tools" className="tools" data-screen-label="tools">
      <div className="wrap">
        <div className="section-head reveal" ref={ref}>
          <span className="eyebrow"><span className="dot"></span>Полезное</span>
          <h2>Три инструмента. <span className="grad-text">Бесплатно.</span></h2>
          <p style={{ color: 'var(--text-2)', fontSize: 18, margin: 0 }}>
            Анализ ниши, расчёт дохода и AI-разбор — без регистрации.
          </p>
        </div>

        <div className="tools-tabs">
          {TABS.map((t, i) => (
            <button
              key={i}
              className={'tools-tab' + (tab === i ? ' is-on' : '')}
              onClick={() => setTab(i)}
            >
              {t.label}
            </button>
          ))}
        </div>

        <div className="tools-panel">
          {tab === 0 && <TabNiches />}
          {tab === 1 && <TabROI />}
          {tab === 2 && <TabAI />}
          {tab === 3 && <TabDemo />}
        </div>
      </div>
    </section>
  );
}

window.ToolsTabs = ToolsTabs;

// ── Modal wrapper (opened from nav) ──────────────────────────────────────────
function ToolsModal() {
  const { setToolsOpen, toolsOpen } = A.useApp();
  const [tab, setTab] = React.useState(typeof toolsOpen === 'number' ? toolsOpen : 0);

  const close = React.useCallback(() => setToolsOpen(null), []);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') close(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, []);

  const TABS = [
    { letter: 'A', label: 'Топ ниш' },
    { letter: 'B', label: 'Калькулятор ROI' },
    { letter: 'C', label: 'Разбор ниши · AI' },
  ];

  const TITLES = ['Топ ниш для поиска клиентов', 'Калькулятор ROI', 'Разбор ниши · AI'];

  return ReactDOM.createPortal(
    <div className="tp-page">

      {/* Page top bar */}
      <div className="tp-bar">
        <button className="tp-back" onClick={close}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M10 3L5 8l5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          Назад
        </button>
        <div className="tp-bar-title">
          <span className="eyebrow" style={{padding:'4px 12px', fontSize:10}}>
            <span className="dot"></span>Полезное
          </span>
          <span className="tp-bar-name">{TITLES[tab]}</span>
        </div>
        <button className="tp-close" onClick={close} aria-label="Закрыть">
          <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
            <path d="M2 2l11 11M13 2L2 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </button>
      </div>

      {/* Content */}
      <div className="tp-content wrap">
        {tab === 0 && <TabNiches />}
        {tab === 1 && <TabROI />}
        {tab === 2 && <TabAI />}
      </div>

    </div>,
    document.body
  );
}

window.ToolsModal = ToolsModal;