// ============= PLATFORM (replaces Tools) =============
function Platform() {
  const stats = [
    {
      v: '2.8М+', l: 'Лидов в базе',
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
          <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
        </svg>
      ),
    },
    {
      v: '148+', l: 'Ниш для парсинга',
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"/>
          <path d="m9.75 15.02 5.75-3.27-5.75-3.27v6.54z"/>
        </svg>
      ),
    },
    {
      v: '9.4%', l: 'Средний конверт',
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>
        </svg>
      ),
    },
    {
      v: '99.8%', l: 'Uptime платформы',
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        </svg>
      ),
    },
    {
      v: '<6 мин', l: 'Ответ поддержки',
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
        </svg>
      ),
    },
    {
      v: '0.3%', l: 'Бан-рейт аккаунтов',
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M20 6 9 17l-5-5"/>
        </svg>
      ),
    },
  ];

  const integrations = [
    { name: 'YouTube',    desc: 'Парсинг каналов по темам, фильтрам и AI-запросам', icon: <A.Ico.yt    style={{width:24,height:24}}/>, color: '#ff4444', bg: 'rgba(255,68,68,.12)',    border: 'rgba(255,68,68,.25)'    },
    { name: 'Telegram',   desc: 'Рассылки с ваших аккаунтов + TG Parser чатов',     icon: <A.Ico.tg    style={{width:24,height:24}}/>, color: '#29b6f6', bg: 'rgba(41,182,246,.12)',  border: 'rgba(41,182,246,.25)'  },
    { name: 'Gmail',      desc: 'Email-рассылки с прогревом и ротацией',             icon: <A.Ico.gmail style={{width:24,height:24}}/>, color: '#ea4335', bg: 'rgba(234,67,53,.12)',   border: 'rgba(234,67,53,.25)'   },
    { name: 'AI Engine',  desc: 'Генерация тем, оффера, ответы в контексте чата',   icon: <A.Ico.ai    style={{width:24,height:24}}/>, color: '#a855f7', bg: 'rgba(168,85,247,.12)',  border: 'rgba(168,85,247,.25)'  },
    { name: 'Proxy Pool', desc: 'Встроенный ротатор с мониторингом раз в 60 сек',   icon: <A.Ico.net   style={{width:24,height:24}}/>, color: '#14b8a6', bg: 'rgba(20,184,166,.12)',  border: 'rgba(20,184,166,.25)'  },
    { name: 'CRM Inbox',  desc: 'Все переписки, сделки и контакты в одном месте',   icon: <A.Ico.inbox style={{width:24,height:24}}/>, color: '#22c55e', bg: 'rgba(34,197,94,.12)',   border: 'rgba(34,197,94,.25)'   },
  ];

  return (
    <section id="platform" className="platform" data-screen-label="platform">
      <div className="wrap">
        {/* Stats row */}
        <div className="plat-stats">
          {stats.map((s, i) => (
            <div key={i} className="plat-stat">
              <div className="plat-stat-icon">{s.icon}</div>
              <div className="plat-stat-v grad-text">{s.v}</div>
              <div className="plat-stat-l">{s.l}</div>
            </div>
          ))}
        </div>

        <hr className="divider" style={{margin: '56px 0'}} />

        {/* Integrations */}
        <div className="section-head" style={{marginBottom: 48}}>
          <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}}>Outforge объединяет всё, что нужно для холодного аутрича: парсинг, верификацию, рассылку и CRM — без внешних интеграций.</p>
        </div>

        <div className="integ-grid">
          {integrations.map((it, i) => (
            <div key={i} className="integ-card card card-hover">
              <div className="integ-head">
                <span className="integ-icon">{it.icon}</span>
                <span className="integ-name">{it.name}</span>
                <span className="integ-dot"></span>
              </div>
              <p className="integ-desc">{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Platform = Platform;

// ============= LIVE DEMO =============
function VideoSection() {
  const { t } = A.useApp();
  const ref = A.useReveal();
  return (
    <section id="video" className="video" data-screen-label="video">
      <div className="wrap">
        <div className="section-head section-head-center reveal" ref={ref}>
          <span className="eyebrow"><span className="dot"></span>{t('video.eyebrow')}</span>
          <h2>{t('video.title1')} <span className="grad-text">{t('video.title2')}</span></h2>
          <p>{t('video.sub')}</p>
        </div>
        <div className="video-frame">
          <div className="video-glow"></div>
          <div className="video-screen">
            <div className="video-mock">
              <div className="vm-bg"></div>
              <div className="vm-grid">
                <div className="vm-card">
                  <div className="vm-card-h">YouTube Leads · live</div>
                  <div className="vm-card-rows">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <div className="vm-card-row" key={i} style={{ animationDelay: (i * 0.18) + 's' }}>
                        <span className="vm-avatar" style={{ background: ['#a855f7','#f59e0b','#3b82f6','#10b981','#fb923c'][i] }}></span>
                        <span className="vm-bar w-40"></span>
                        <span className="vm-bar w-20"></span>
                        <span className="vm-tag">@found</span>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="vm-card vm-stat">
                  <div className="vm-card-h">Метрики</div>
                  <div className="vm-big">3 359</div>
                  <div className="muted mono">+ 184 за час</div>
                  <svg viewBox="0 0 200 60" preserveAspectRatio="none" className="vm-spark">
                    <path d="M0 50 Q40 48 60 38 T120 22 T200 8" fill="none" stroke="url(#vmg)" strokeWidth="2"/>
                    <defs>
                      <linearGradient id="vmg" x1="0" x2="1" y1="0" y2="0">
                        <stop offset="0" stopColor="#ff8c3a"/><stop offset="1" stopColor="#ff4500"/>
                      </linearGradient>
                    </defs>
                  </svg>
                </div>
                <div className="vm-card vm-tg">
                  <div className="vm-card-h"><A.Ico.tg /> Telegram отправка</div>
                  <div className="vm-progress">
                    <div className="vm-progress-bar"></div>
                  </div>
                  <div className="mono muted">53 / 100 сообщений</div>
                </div>
              </div>
            </div>
            <div className="video-cap">{t('video.cap')}</div>
            <div className="video-progress"><span></span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.VideoSection = VideoSection;