<!DOCTYPE html>
<html lang="pt-BR" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial Completo - Viral Social Pro</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        * { font-family: 'Plus Jakarta Sans', sans-serif; }
        body { background: #0a0a0f; color: #e2e8f0; }
        .glass { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(10px); }
        .glass-purple { background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.2); }
        .insight-box { background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(59,130,246,0.1)); border-left: 4px solid #7c3aed; }
        .toc-link { transition: all 0.2s; }
        .toc-link:hover, .toc-link.active { color: #a78bfa; border-left-color: #7c3aed; }
        .hero-gradient { background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 50%, #06b6d4 100%); }
        .screenshot-frame { border: 2px solid rgba(124,58,237,0.3); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
        .section-number { background: linear-gradient(135deg, #7c3aed, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        @media (max-width: 1024px) { .toc-sidebar { display: none; } }
        .toc-mobile { display: none; }
        @media (max-width: 1024px) { .toc-mobile { display: block; } }
        html { scroll-behavior: smooth; }
    </style>
</head>
<body class="antialiased">

<!-- Hero -->
<div class="hero-gradient py-16 px-4 text-center relative overflow-hidden">
    <div class="absolute inset-0 bg-black/30"></div>
    <div class="relative z-10 max-w-4xl mx-auto">
        <div class="inline-flex items-center gap-2 bg-white/10 rounded-full px-4 py-2 text-sm mb-6">
            <i data-lucide="book-open" class="w-4 h-4"></i>
            Tutorial Completo
        </div>
        <h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4">Domine o Viral Social Pro</h1>
        <p class="text-lg text-white/80 max-w-2xl mx-auto mb-6">
            Aprenda a usar cada funcionalidade da plataforma e descubra estrategias comprovadas para viralizar seus videos nas redes sociais.
        </p>
        <a href="/" class="inline-flex items-center gap-2 bg-white/20 hover:bg-white/30 text-white rounded-xl px-6 py-3 font-semibold transition">
            <i data-lucide="arrow-left" class="w-4 h-4"></i> Voltar para o Dashboard
        </a>
    </div>
</div>

<div class="max-w-7xl mx-auto flex gap-8 px-4 py-8">

    <!-- TOC Sidebar -->
    <aside class="toc-sidebar w-64 flex-shrink-0">
        <div class="sticky top-4">
            <h3 class="text-sm font-bold text-gray-400 uppercase tracking-wider mb-4">Indice</h3>
            <nav class="space-y-1 text-sm max-h-[85vh] overflow-y-auto pr-2">
                <a href="#dashboard" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">1. Dashboard</a>
                <a href="#feed" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">2. Feed Viral</a>
                <a href="#discover" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">3. Descobrir</a>
                <a href="#scrape" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">4. Coletar Videos</a>
                <a href="#viral-scanner" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">5. Viral Scanner</a>
                <a href="#intelligence" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">6. Inteligencia Viral</a>
                <a href="#trends" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">7. Tendencias</a>
                <a href="#sounds" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">8. Sons & Musicas</a>
                <a href="#hashtags" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">9. Hashtags</a>
                <a href="#shop" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">10. TikTok Shop</a>
                <a href="#opportunities" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">11. Oportunidades</a>
                <a href="#competitors" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">12. Espiao de Concorrentes</a>
                <a href="#ideas" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">13. Banco de Ideias</a>
                <a href="#creators" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">14. Criadores</a>
                <a href="#calendar" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">15. Calendario</a>
                <a href="#downloads" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">16. Downloads</a>
                <a href="#scheduler" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">17. Agendador</a>
                <a href="#alerts" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">18. Alertas</a>
                <a href="#settings" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">19. Configuracoes</a>
                <a href="#strategy" class="toc-link block py-1.5 px-3 border-l-2 border-transparent text-gray-400 hover:text-white">20. Estrategia Master</a>
            </nav>
        </div>
    </aside>

    <!-- Mobile TOC -->
    <div class="toc-mobile fixed bottom-4 right-4 z-50" x-data="{ open: false }">
        <button @click="open = !open" class="bg-purple-600 hover:bg-purple-700 text-white rounded-full p-4 shadow-2xl">
            <i data-lucide="list" class="w-6 h-6"></i>
        </button>
        <div x-show="open" @click.away="open = false" class="absolute bottom-16 right-0 w-72 glass rounded-2xl p-4 max-h-[70vh] overflow-y-auto">
            <h3 class="text-sm font-bold text-gray-400 mb-3">Indice</h3>
            <nav class="space-y-1 text-sm">
                <a @click="open=false" href="#dashboard" class="block py-1.5 px-3 text-gray-300 hover:text-white">1. Dashboard</a>
                <a @click="open=false" href="#feed" class="block py-1.5 px-3 text-gray-300 hover:text-white">2. Feed Viral</a>
                <a @click="open=false" href="#discover" class="block py-1.5 px-3 text-gray-300 hover:text-white">3. Descobrir</a>
                <a @click="open=false" href="#scrape" class="block py-1.5 px-3 text-gray-300 hover:text-white">4. Coletar Videos</a>
                <a @click="open=false" href="#viral-scanner" class="block py-1.5 px-3 text-gray-300 hover:text-white">5. Viral Scanner</a>
                <a @click="open=false" href="#intelligence" class="block py-1.5 px-3 text-gray-300 hover:text-white">6. Inteligencia Viral</a>
                <a @click="open=false" href="#trends" class="block py-1.5 px-3 text-gray-300 hover:text-white">7. Tendencias</a>
                <a @click="open=false" href="#sounds" class="block py-1.5 px-3 text-gray-300 hover:text-white">8. Sons & Musicas</a>
                <a @click="open=false" href="#hashtags" class="block py-1.5 px-3 text-gray-300 hover:text-white">9. Hashtags</a>
                <a @click="open=false" href="#shop" class="block py-1.5 px-3 text-gray-300 hover:text-white">10. TikTok Shop</a>
                <a @click="open=false" href="#opportunities" class="block py-1.5 px-3 text-gray-300 hover:text-white">11. Oportunidades</a>
                <a @click="open=false" href="#competitors" class="block py-1.5 px-3 text-gray-300 hover:text-white">12. Espiao de Concorrentes</a>
                <a @click="open=false" href="#ideas" class="block py-1.5 px-3 text-gray-300 hover:text-white">13. Banco de Ideias</a>
                <a @click="open=false" href="#creators" class="block py-1.5 px-3 text-gray-300 hover:text-white">14. Criadores</a>
                <a @click="open=false" href="#calendar" class="block py-1.5 px-3 text-gray-300 hover:text-white">15. Calendario</a>
                <a @click="open=false" href="#downloads" class="block py-1.5 px-3 text-gray-300 hover:text-white">16. Downloads</a>
                <a @click="open=false" href="#scheduler" class="block py-1.5 px-3 text-gray-300 hover:text-white">17. Agendador</a>
                <a @click="open=false" href="#alerts" class="block py-1.5 px-3 text-gray-300 hover:text-white">18. Alertas</a>
                <a @click="open=false" href="#settings" class="block py-1.5 px-3 text-gray-300 hover:text-white">19. Configuracoes</a>
                <a @click="open=false" href="#strategy" class="block py-1.5 px-3 text-gray-300 hover:text-white">20. Estrategia Master</a>
            </nav>
        </div>
    </div>

    <!-- Main Content -->
    <main class="flex-1 min-w-0 space-y-16">

        <!-- 1. Dashboard -->
        <section id="dashboard">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">01</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Dashboard</h2>
                    <p class="text-gray-400 text-sm">Sua central de comando</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/dashboard.png" alt="Dashboard" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">O que e o Dashboard?</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    O Dashboard e a primeira tela que voce ve ao abrir a plataforma. Ele mostra um resumo completo de toda sua operacao:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Total de Videos</strong> - Quantos videos ja foram coletados e analisados</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Score Medio</strong> - A media do viral score de todos os videos</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Videos Virais</strong> - Quantos videos atingiram score acima de 70</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Top Videos</strong> - Os 12 videos com maior pontuacao viral</li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Use o Dashboard como seu "termometro diario". Abra-o toda manha para ver se novos videos virais foram detectados durante a noite pelo scanner automatico. Foque nos videos com score acima de 80 - eles representam padroes de conteudo que estao funcionando AGORA e que voce pode replicar imediatamente.
                </p>
            </div>
        </section>

        <!-- 2. Feed Viral -->
        <section id="feed">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">02</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Feed Viral</h2>
                    <p class="text-gray-400 text-sm">Scroll infinito dos melhores videos</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/feed.png" alt="Feed Viral" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Como funciona o Feed?</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    O Feed Viral e como um "TikTok dos virais". Ele mostra os videos coletados em formato de scroll infinito, ordenados por relevancia viral. Aqui voce pode:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> Navegar rapidamente pelos videos mais virais de todas as plataformas</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> Ver metricas de cada video (views, likes, comments, shares)</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> Filtrar por plataforma (TikTok, Instagram, YouTube)</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> Salvar videos em colecoes para referencia futura</li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Dedique 15 minutos por dia rolando o Feed Viral. Nao apenas assista - ANALISE. Preste atencao nos primeiros 3 segundos de cada video viral (o "hook"). Anote os padroes: que tipo de abertura eles usam? Pergunta? Afirmacao chocante? Antes/depois? Os hooks sao responsaveis por 80% do sucesso de um video viral.
                </p>
            </div>
        </section>

        <!-- 3. Descobrir -->
        <section id="discover">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">03</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Descobrir</h2>
                    <p class="text-gray-400 text-sm">Busca avancada com filtros</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/discover.png" alt="Descobrir" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Exploracao detalhada</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    A pagina Descobrir permite buscar e filtrar todos os videos coletados com criterios avancados:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Busca por texto</strong> - Pesquise por palavras na descricao ou hashtags</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Filtro por plataforma</strong> - TikTok, Instagram ou YouTube</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Score minimo</strong> - Filtre apenas videos acima de um score especifico</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Ordenacao</strong> - Por score viral, views, data ou engajamento</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Paginacao</strong> - Navegue por todas as paginas de resultados</li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Use a busca para pesquisar nichos especificos. Por exemplo, busque "receita" e filtre por score acima de 70 para ver quais tipos de receita estao viralizando. Depois, replique o formato com sua propria versao. O segredo nao e copiar o conteudo, mas copiar a ESTRUTURA do video viral.
                </p>
            </div>
        </section>

        <!-- 4. Coletar Videos -->
        <section id="scrape">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">04</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Coletar Videos</h2>
                    <p class="text-gray-400 text-sm">Importe videos de qualquer plataforma</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/scrape.png" alt="Coletar Videos" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Como coletar?</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    A pagina de coleta permite importar videos de diversas fontes para analise:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Por perfil</strong> - Cole o @usuario de qualquer criador do TikTok, Instagram ou YouTube</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Por busca</strong> - Busque por palavras-chave em cada plataforma</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Por hashtag</strong> - Colete videos de hashtags especificas</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Por URL</strong> - Cole a URL direta de um video</li>
                </ul>
                <p class="text-gray-400 text-sm mt-4">
                    Cada video coletado e automaticamente analisado pelo algoritmo de viral score, que calcula uma pontuacao de 0-100 baseada em views, likes, comentarios, compartilhamentos e taxa de engajamento.
                </p>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Colete videos dos seus 5 maiores concorrentes semanalmente. Ordene por viral score e estude os 3 videos de maior score de cada um. Pergunte-se: "O que esses videos tem em comum que os outros nao tem?" Voce vai comecar a identificar padroes invisiveis que separam conteudo viral de conteudo mediano.
                </p>
            </div>
        </section>

        <!-- 5. Viral Scanner -->
        <section id="viral-scanner">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">05</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Viral Scanner</h2>
                    <p class="text-gray-400 text-sm">A arma secreta para encontrar virais</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/viral_scanner.png" alt="Viral Scanner" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">O Scanner mais poderoso</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    O Viral Scanner e a funcionalidade mais avancada da plataforma. Ele combina scraping gratuito do TikTok Creative Center com a API do ScrapeCreators para encontrar videos virais automaticamente, gastando o minimo de creditos possivel.
                </p>
                <h4 class="font-semibold text-white mb-2 mt-4">18 Filtros Avancados:</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-gray-300">
                    <div class="flex items-center gap-2"><span class="text-purple-400">1.</span> Views minimas/maximas</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">2.</span> Likes minimos</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">3.</span> Comentarios minimos</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">4.</span> Compartilhamentos minimos</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">5.</span> Taxa de engajamento</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">6.</span> Viral Score minimo</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">7.</span> Nivel viral (Hot/Fire/Mega)</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">8.</span> Outlier (acima da media)</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">9.</span> Replicabilidade</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">10.</span> Duracao do video</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">11.</span> Tem produto (TikTok Shop)</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">12.</span> Hashtag especifica</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">13.</span> Palavra na descricao</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">14.</span> Tamanho do criador</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">15.</span> Views por seguidor</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">16.</span> Criador pequeno viral</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">17.</span> Publicado nas ultimas X horas</div>
                    <div class="flex items-center gap-2"><span class="text-purple-400">18.</span> Velocidade viral</div>
                </div>
                <h4 class="font-semibold text-white mb-2 mt-4">5 Presets Rapidos:</h4>
                <ul class="space-y-1 text-gray-300 text-sm">
                    <li><strong class="text-red-400">Mega Viral</strong> - Score 85+, 1M+ views</li>
                    <li><strong class="text-orange-400">Shop Viral</strong> - Videos com produto TikTok Shop</li>
                    <li><strong class="text-green-400">Small Creator</strong> - Criadores pequenos que viralizaram</li>
                    <li><strong class="text-blue-400">Trending Now</strong> - Publicados nas ultimas 24h com velocidade alta</li>
                    <li><strong class="text-yellow-400">Replicable</strong> - Alta replicabilidade, facil de reproduzir</li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    A estrategia mais poderosa e usar o filtro "Small Creator Viral" - ele encontra videos de criadores com menos de 10K seguidores que conseguiram mais de 100K views. Isso significa que o CONTEUDO viralizou, nao o criador. Se um criador pequeno conseguiu viralizar com aquele formato, voce tambem consegue! Configure o scanner automatico para rodar a cada 30 minutos e ser notificado quando um desses videos aparecer.
                </p>
            </div>
        </section>

        <!-- 6. Inteligencia Viral -->
        <section id="intelligence">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">06</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Inteligencia Viral</h2>
                    <p class="text-gray-400 text-sm">Analise profunda de padroes virais</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/intelligence.png" alt="Inteligencia Viral" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">4 Ferramentas de Inteligencia</h3>
                <ul class="space-y-4 text-gray-300">
                    <li>
                        <strong class="text-white">1. Padroes Virais</strong>
                        <p class="text-sm mt-1">Analisa automaticamente os padroes dos videos de maior sucesso: duracao ideal, formatos que funcionam, tipos de hooks, e melhores horarios de publicacao.</p>
                    </li>
                    <li>
                        <strong class="text-white">2. Gerador de Roteiros</strong>
                        <p class="text-sm mt-1">Gera roteiros automaticamente baseados nos padroes encontrados. Ele analisa a estrutura dos videos virais e sugere roteiros no mesmo formato.</p>
                    </li>
                    <li>
                        <strong class="text-white">3. Probabilidade Viral</strong>
                        <p class="text-sm mt-1">Calcule a probabilidade de um video viralizar ANTES de publicar. Insira as caracteristicas do seu video e receba um score de 0-100 com detalhamento de cada fator.</p>
                    </li>
                    <li>
                        <strong class="text-white">4. Heatmap de Engajamento</strong>
                        <p class="text-sm mt-1">Um mapa de calor 7x24 que mostra os melhores horarios para postar em cada dia da semana, baseado nos dados reais dos videos coletados.</p>
                    </li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    O Heatmap de Engajamento e subestimado pela maioria dos criadores. Publicar no horario certo pode significar a diferenca entre 1.000 e 100.000 views. O algoritmo do TikTok "testa" seu video com um grupo pequeno nas primeiras 1-2 horas. Se voce publicar quando sua audiencia esta ATIVA, o engajamento inicial sera maior e o algoritmo vai empurrar para mais pessoas.
                </p>
            </div>
        </section>

        <!-- 7. Tendencias -->
        <section id="trends">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">07</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Tendencias</h2>
                    <p class="text-gray-400 text-sm">Hashtags e padroes em alta</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/trends.png" alt="Tendencias" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Analise de Tendencias</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    A pagina de Tendencias analisa os ultimos 30 dias de dados para identificar:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Top Hashtags</strong> - As 30 hashtags mais usadas nos videos virais</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Padroes de Conteudo</strong> - Tipos de video que estao performando melhor</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Filtro por plataforma</strong> - Veja tendencias especificas de cada rede</li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Nao use apenas as hashtags mais populares - elas tem muita concorrencia. A estrategia ideal e combinar 2-3 hashtags grandes (1M+ posts) com 3-4 hashtags medias (100K-1M) e 2-3 hashtags menores mas emergentes. As hashtags emergentes sao as que estao CRESCENDO rapidamente - o algoritmo favorece conteudo que se alinha com tendencias em ascensao.
                </p>
            </div>
        </section>

        <!-- 8. Sons & Musicas -->
        <section id="sounds">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">08</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Sons & Musicas</h2>
                    <p class="text-gray-400 text-sm">Predicao de sons virais</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/sounds.png" alt="Sons & Musicas" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Sound Predictor</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    O Sound Predictor rastreia sons e musicas usadas nos videos coletados, classificando-os em 4 estagios:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-green-400 font-bold">Emergente</span> - Som comecando a aparecer em videos virais</li>
                    <li class="flex items-start gap-2"><span class="text-blue-400 font-bold">Trending</span> - Som em ascensao rapida, momento ideal para usar</li>
                    <li class="flex items-start gap-2"><span class="text-orange-400 font-bold">Pico</span> - Som no auge da popularidade</li>
                    <li class="flex items-start gap-2"><span class="text-red-400 font-bold">Declinio</span> - Som perdendo forca, evite usar</li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    O momento IDEAL para usar um som e quando ele esta na fase "Emergente" ou "Trending". Quando um som esta no "Pico", ja tem muita concorrencia e o algoritmo comeca a saturar. Sons emergentes sao ouro - o TikTok ADORA distribuir conteudo com sons novos que estao ganhando tracao. Monitore esta pagina diariamente e seja rapido para criar conteudo com sons emergentes.
                </p>
            </div>
        </section>

        <!-- 9. Hashtags -->
        <section id="hashtags">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">09</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Hashtags</h2>
                    <p class="text-gray-400 text-sm">Pesquisa e analise de hashtags</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/hashtags.png" alt="Hashtags" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Central de Hashtags</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    Pesquise hashtags em qualquer plataforma e veja dados detalhados como volume de posts, tendencia de crescimento, e videos associados. Use para construir sua estrategia de hashtags otimizada.
                </p>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Crie uma lista de 20-30 hashtags do seu nicho divididas em 3 grupos (grande, medio, pequeno). Rotacione entre combinacoes diferentes a cada post. O TikTok pode penalizar quem usa SEMPRE as mesmas hashtags - o algoritmo interpreta como spam. A variacao mostra que seu conteudo e "fresco" e diversificado.
                </p>
            </div>
        </section>

        <!-- 10. TikTok Shop -->
        <section id="shop">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">10</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">TikTok Shop Intelligence</h2>
                    <p class="text-gray-400 text-sm">Produtos virais e afiliados</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/shop.png" alt="TikTok Shop" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Inteligencia de E-commerce</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    O modulo TikTok Shop e uma central completa para quem trabalha com produtos e afiliados:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Busca de produtos</strong> - Pesquise no TikTok Shop por nome ou categoria</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Categorias BR</strong> - Moda, beleza, casa, eletronicos, esportes</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Cross-platform</strong> - Detecta videos virais que mostram produtos do Shop</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Revenue tracking</strong> - Acompanhe vendas e receita estimada de produtos</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Monitor</strong> - Monitore produtos e receba alertas de mudancas</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Analise de loja</strong> - Analise lojas completas de vendedores</li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    A mina de ouro do TikTok Shop e encontrar produtos que estao em ASCENSAO mas ainda nao saturados. Use o cross-platform detection para encontrar videos virais que mostram produtos. Se um video tem 500K+ views e o produto tem poucas avaliacoes, voce encontrou uma oportunidade de ouro - o produto esta comecando a viralizar e voce pode ser um dos primeiros afiliados a promove-lo.
                </p>
            </div>
        </section>

        <!-- 11. Oportunidades -->
        <section id="opportunities">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">11</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Oportunidades</h2>
                    <p class="text-gray-400 text-sm">Cross-platform, afiliados e ciclo de vida</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/opportunities.png" alt="Oportunidades" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">3 Tipos de Oportunidades</h3>
                <ul class="space-y-4 text-gray-300">
                    <li>
                        <strong class="text-white">1. Replicador Cross-Platform</strong>
                        <p class="text-sm mt-1">Encontra videos que viralizaram em uma plataforma mas ainda nao existem em outra. Ex: um video com 5M views no TikTok que ninguem adaptou pro Instagram Reels.</p>
                    </li>
                    <li>
                        <strong class="text-white">2. Affiliate Matcher</strong>
                        <p class="text-sm mt-1">Cruza videos virais com produtos do TikTok Shop para encontrar oportunidades de afiliado. Mostra videos que promovem produtos e a receita estimada.</p>
                    </li>
                    <li>
                        <strong class="text-white">3. Ciclo de Vida de Tendencias</strong>
                        <p class="text-sm mt-1">Classifica keywords e tendencias em 4 fases: Emergente, Crescimento, Pico e Declinio. Foque nas emergentes e em crescimento.</p>
                    </li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    O Replicador Cross-Platform e uma das estrategias mais subutilizadas. Conteudo que viraliza no TikTok tem altissima chance de viralizar no Instagram Reels e YouTube Shorts - mas a maioria dos criadores nao faz essa ponte. Identifique um formato viral no TikTok, adapte para sua linguagem, e publique no Reels. Voce chega PRIMEIRO antes da tendencia migrar naturalmente.
                </p>
            </div>
        </section>

        <!-- 12. Espiao de Concorrentes -->
        <section id="competitors">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">12</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Espiao de Concorrentes</h2>
                    <p class="text-gray-400 text-sm">Monitore e analise seus concorrentes</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/competitors.png" alt="Espiao de Concorrentes" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Monitoramento Competitivo</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    Adicione perfis de concorrentes para monitorar automaticamente:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Crescimento</strong> - Acompanhe seguidores, posts e engajamento ao longo do tempo</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Snapshots</strong> - Fotos periodicas das metricas para comparacao</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Graficos</strong> - Visualize a evolucao com graficos interativos</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Videos recentes</strong> - Veja os ultimos videos publicados por cada concorrente</li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Monitore nao apenas seus concorrentes DIRETOS, mas tambem criadores de OUTROS nichos que estao crescendo rapido. Muitas vezes, formatos virais de outros nichos podem ser adaptados para o seu. Se um criador de fitness esta crescendo 10K seguidores/semana com videos "antes e depois", esse formato pode funcionar para receitas, decoracao, ou qualquer nicho visual.
                </p>
            </div>
        </section>

        <!-- 13. Banco de Ideias -->
        <section id="ideas">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">13</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Banco de Ideias</h2>
                    <p class="text-gray-400 text-sm">Quadro Kanban para organizar ideias</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/ideas.png" alt="Banco de Ideias" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Organizacao Visual</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    O Banco de Ideias e um quadro Kanban para gerenciar suas ideias de conteudo em 4 colunas:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-gray-400 font-bold">Ideias</span> - Ideias brutas, inspiracoes, conceitos</li>
                    <li class="flex items-start gap-2"><span class="text-blue-400 font-bold">Planejado</span> - Ideias aprovadas com roteiro definido</li>
                    <li class="flex items-start gap-2"><span class="text-yellow-400 font-bold">Gravando</span> - Em producao ou edicao</li>
                    <li class="flex items-start gap-2"><span class="text-green-400 font-bold">Publicado</span> - Ja foi ao ar</li>
                </ul>
                <p class="text-gray-400 text-sm mt-4">
                    Cada ideia pode ter titulo, descricao, plataforma, prioridade, e link de referencia para o video original que inspirou.
                </p>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Nunca fique sem conteudo para publicar! Toda vez que encontrar um video viral no Feed ou Scanner, crie imediatamente uma ideia no Kanban com o link de referencia. Mantenha PELO MENOS 15 ideias na coluna "Ideias" e 5 na "Planejado". Assim voce sempre tera conteudo pronto para gravar, mesmo nos dias sem inspiracao. Consistencia e a chave - publique pelo menos 1x por dia.
                </p>
            </div>
        </section>

        <!-- 14. Criadores -->
        <section id="creators">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">14</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Criadores</h2>
                    <p class="text-gray-400 text-sm">Database de criadores monitorados</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/creators.png" alt="Criadores" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Gestao de Criadores</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    Veja todos os criadores que apareceram nos videos coletados. Filtre por plataforma, busque por nome, e marque criadores para monitoramento continuo. Perfeito para:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> Identificar criadores em ascensao no seu nicho</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> Encontrar potenciais parceiros para collabs</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> Estudar a estrategia de criadores de sucesso</li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Procure criadores com alta taxa de engajamento mas poucos seguidores - eles sao perfeitos para collabs acessiveis. Um criador com 5K seguidores e 15% de engajamento pode ser mais valioso que um com 500K seguidores e 1% de engajamento. Collabs com micro-influenciadores frequentemente resultam em conteudo mais autentico e com melhor performance no algoritmo.
                </p>
            </div>
        </section>

        <!-- 15. Calendario -->
        <section id="calendar">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">15</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Calendario de Conteudo</h2>
                    <p class="text-gray-400 text-sm">Planejamento semanal inteligente</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/calendar.png" alt="Calendario" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Plano Semanal Otimizado</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    O Calendario analisa seus dados para gerar automaticamente:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Melhores horarios</strong> - Os horarios com maior engajamento historico</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Plano semanal</strong> - Sugestao de conteudo para cada dia da semana</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Filtro por plataforma</strong> - Horarios otimizados para cada rede</li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Os melhores horarios para postar no Brasil geralmente sao: 7h-9h (ida ao trabalho), 12h-13h (almoco), e 19h-22h (pos-trabalho). Mas cada nicho e diferente! O calendario usa SEUS DADOS para encontrar os horarios que funcionam para o SEU publico. Quanto mais videos voce coletar, mais precisa sera a recomendacao. Publique nos 3 melhores horarios indicados por pelo menos 2 semanas e compare os resultados.
                </p>
            </div>
        </section>

        <!-- 16. Downloads -->
        <section id="downloads">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">16</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Downloads</h2>
                    <p class="text-gray-400 text-sm">Baixe videos para referencia</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/downloads.png" alt="Downloads" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Gerenciador de Downloads</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    Baixe videos de qualquer plataforma usando yt-dlp. Cole a URL do video e baixe em qualidade maxima. Gerencie todos os downloads em um so lugar com status, tamanho e opcao de re-download.
                </p>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Baixe videos virais de referencia para estudo detalhado. Assista frame por frame: como e a transicao? Qual a fonte usada? Como sao os primeiros 0.5 segundos? Os detalhes de producao que voce nao nota no scroll rapido sao exatamente os que fazem a diferenca entre um video bom e um video VIRAL.
                </p>
            </div>
        </section>

        <!-- 17. Agendador -->
        <section id="scheduler">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">17</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Agendador</h2>
                    <p class="text-gray-400 text-sm">Jobs automaticos do sistema</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/scheduler.png" alt="Agendador" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Automacao Completa</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    O Agendador controla todos os jobs automaticos da plataforma:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Viral Scanner</strong> - Busca automatica por videos virais</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Creative Center</strong> - Scraping gratuito de tendencias</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> <strong>Competitor Spy</strong> - Monitoramento periodico de concorrentes</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> Veja o status, proxima execucao, e historico de cada job</li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Configure o scanner automatico para rodar a cada 30-60 minutos durante o horario comercial. Assim voce captura tendencias RAPIDO e pode ser um dos primeiros a replicar um formato viral. O Creative Center pode rodar a cada 15 minutos sem custo nenhum - ele e GRATUITO. Combine ambos para maxima cobertura com minimo custo.
                </p>
            </div>
        </section>

        <!-- 18. Alertas -->
        <section id="alerts">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">18</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Alertas</h2>
                    <p class="text-gray-400 text-sm">Notificacoes inteligentes</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/alerts.png" alt="Alertas" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">Sistema de Alertas</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    Configure alertas personalizados para ser notificado quando eventos importantes acontecerem:
                </p>
                <ul class="space-y-2 text-gray-300">
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> Video Mega Viral detectado (score 90+)</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> Concorrente publicou novo conteudo</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> Nova tendencia emergente detectada</li>
                    <li class="flex items-start gap-2"><span class="text-purple-400 mt-1"><i data-lucide="check-circle" class="w-4 h-4"></i></span> Produto TikTok Shop em alta</li>
                </ul>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    Configure alertas para "Mega Viral" (score 90+) e "Small Creator Viral". Quando receber esses alertas, PARE tudo e analise o video imediatamente. Videos mega virais representam padroes que o algoritmo esta favorecendo NESTE MOMENTO. Quanto mais rapido voce replicar o formato, maior a chance de surfar na mesma onda de distribuicao do algoritmo.
                </p>
            </div>
        </section>

        <!-- 19. Configuracoes -->
        <section id="settings">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">19</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Configuracoes</h2>
                    <p class="text-gray-400 text-sm">Personalize toda a plataforma</p>
                </div>
            </div>
            <div class="screenshot-frame mb-6">
                <img src="/static/tutorial/settings.png" alt="Configuracoes" class="w-full" loading="lazy">
            </div>
            <div class="glass rounded-2xl p-6 mb-4">
                <h3 class="font-semibold text-white mb-3">79 Configuracoes em 13 Categorias</h3>
                <p class="text-gray-300 leading-relaxed mb-4">
                    A pagina de Configuracoes da controle total sobre o comportamento da plataforma:
                </p>
                <ul class="space-y-2 text-gray-300 text-sm">
                    <li><strong class="text-white">Geral</strong> - Idioma, tema, nome da instancia</li>
                    <li><strong class="text-white">API</strong> - Chaves do YouTube, Apify, ScrapeCreators</li>
                    <li><strong class="text-white">Scanner</strong> - Intervalo, keywords, limites, delay anti-bloqueio</li>
                    <li><strong class="text-white">Scraping</strong> - Limites de coleta, plataformas ativas</li>
                    <li><strong class="text-white">Alertas</strong> - Tipos de notificacao, thresholds</li>
                    <li><strong class="text-white">Backup</strong> - Frequencia, retencao, GitHub sync</li>
                </ul>
                <p class="text-gray-400 text-sm mt-4">
                    Todas as configuracoes podem ser exportadas/importadas via JSON e resetadas para os valores padrao.
                </p>
            </div>
            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">Insight de Viralizacao</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    As configuracoes mais importantes para otimizar sao as do Scanner: defina suas keywords principais (termos do seu nicho), ajuste o intervalo para 30 minutos, e coloque um limite diario de creditos para nao estourar o orcamento. Comece conservador (50 creditos/dia) e aumente conforme entender o retorno que cada scan traz em termos de conteudo viral encontrado.
                </p>
            </div>
        </section>

        <!-- 20. Estrategia Master -->
        <section id="strategy">
            <div class="flex items-center gap-3 mb-6">
                <span class="text-4xl font-extrabold section-number">20</span>
                <div>
                    <h2 class="text-2xl font-bold text-white">Estrategia Master de Viralizacao</h2>
                    <p class="text-gray-400 text-sm">A rotina completa para viralizar</p>
                </div>
            </div>

            <div class="glass-purple rounded-2xl p-6 mb-6">
                <h3 class="font-semibold text-white mb-4 text-lg">Rotina Diaria (30 minutos)</h3>
                <div class="space-y-3 text-gray-300">
                    <div class="flex gap-3">
                        <span class="text-purple-400 font-bold text-lg min-w-[24px]">1.</span>
                        <div><strong class="text-white">Dashboard</strong> (2 min) - Cheque novos videos virais detectados durante a noite</div>
                    </div>
                    <div class="flex gap-3">
                        <span class="text-purple-400 font-bold text-lg min-w-[24px]">2.</span>
                        <div><strong class="text-white">Viral Scanner</strong> (5 min) - Filtre por "Trending Now" e "Small Creator Viral"</div>
                    </div>
                    <div class="flex gap-3">
                        <span class="text-purple-400 font-bold text-lg min-w-[24px]">3.</span>
                        <div><strong class="text-white">Feed Viral</strong> (10 min) - Role o feed analisando hooks e padroes</div>
                    </div>
                    <div class="flex gap-3">
                        <span class="text-purple-400 font-bold text-lg min-w-[24px]">4.</span>
                        <div><strong class="text-white">Banco de Ideias</strong> (5 min) - Adicione 2-3 ideias baseadas no que viu</div>
                    </div>
                    <div class="flex gap-3">
                        <span class="text-purple-400 font-bold text-lg min-w-[24px]">5.</span>
                        <div><strong class="text-white">Sons & Musicas</strong> (3 min) - Verifique sons emergentes para usar hoje</div>
                    </div>
                    <div class="flex gap-3">
                        <span class="text-purple-400 font-bold text-lg min-w-[24px]">6.</span>
                        <div><strong class="text-white">Publicar</strong> (5 min) - Grave e publique no melhor horario indicado pelo Calendario</div>
                    </div>
                </div>
            </div>

            <div class="glass-purple rounded-2xl p-6 mb-6">
                <h3 class="font-semibold text-white mb-4 text-lg">Rotina Semanal (1 hora)</h3>
                <div class="space-y-3 text-gray-300">
                    <div class="flex gap-3">
                        <span class="text-purple-400 font-bold text-lg min-w-[24px]">1.</span>
                        <div><strong class="text-white">Inteligencia Viral</strong> - Analise padroes da semana e gere 3 roteiros</div>
                    </div>
                    <div class="flex gap-3">
                        <span class="text-purple-400 font-bold text-lg min-w-[24px]">2.</span>
                        <div><strong class="text-white">Tendencias</strong> - Identifique 5 hashtags emergentes para a proxima semana</div>
                    </div>
                    <div class="flex gap-3">
                        <span class="text-purple-400 font-bold text-lg min-w-[24px]">3.</span>
                        <div><strong class="text-white">Concorrentes</strong> - Analise o crescimento dos ultimos 7 dias</div>
                    </div>
                    <div class="flex gap-3">
                        <span class="text-purple-400 font-bold text-lg min-w-[24px]">4.</span>
                        <div><strong class="text-white">Oportunidades</strong> - Verifique cross-platform e afiliados</div>
                    </div>
                    <div class="flex gap-3">
                        <span class="text-purple-400 font-bold text-lg min-w-[24px]">5.</span>
                        <div><strong class="text-white">Calendario</strong> - Planeje os 7 proximos dias de conteudo</div>
                    </div>
                </div>
            </div>

            <div class="glass rounded-2xl p-6 mb-6">
                <h3 class="font-semibold text-white mb-4 text-lg">8 Regras de Ouro da Viralizacao</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="bg-white/5 rounded-xl p-4">
                        <div class="text-purple-400 font-bold mb-1">Regra #1</div>
                        <div class="text-sm text-gray-300"><strong class="text-white">Os primeiros 0.5 segundos decidem tudo.</strong> O algoritmo mede quantas pessoas param de rolar. Seu hook precisa ser magnetico - visual impactante, texto curioso, ou movimento inesperado.</div>
                    </div>
                    <div class="bg-white/5 rounded-xl p-4">
                        <div class="text-purple-400 font-bold mb-1">Regra #2</div>
                        <div class="text-sm text-gray-300"><strong class="text-white">Copie a estrutura, nao o conteudo.</strong> Viralizar nao e plagiar. E entender POR QUE um formato funciona e aplicar a mesma logica com seu conteudo original.</div>
                    </div>
                    <div class="bg-white/5 rounded-xl p-4">
                        <div class="text-purple-400 font-bold mb-1">Regra #3</div>
                        <div class="text-sm text-gray-300"><strong class="text-white">Consistencia supera perfeicao.</strong> Publique 1 video por dia, mesmo que imperfeito. O algoritmo favorece criadores consistentes. 30 videos medianos geram mais resultado que 3 videos "perfeitos".</div>
                    </div>
                    <div class="bg-white/5 rounded-xl p-4">
                        <div class="text-purple-400 font-bold mb-1">Regra #4</div>
                        <div class="text-sm text-gray-300"><strong class="text-white">Sons emergentes sao multiplicadores.</strong> Usar um som na fase emergente pode multiplicar seu alcance por 5-10x. O algoritmo favorece a adocao de novos sons.</div>
                    </div>
                    <div class="bg-white/5 rounded-xl p-4">
                        <div class="text-purple-400 font-bold mb-1">Regra #5</div>
                        <div class="text-sm text-gray-300"><strong class="text-white">Provoque interacao no final.</strong> Termine com uma pergunta, enquete, ou afirmacao controversa. Comentarios sao o sinal mais forte de viralidade para o algoritmo.</div>
                    </div>
                    <div class="bg-white/5 rounded-xl p-4">
                        <div class="text-purple-400 font-bold mb-1">Regra #6</div>
                        <div class="text-sm text-gray-300"><strong class="text-white">Cross-platform e dinheiro na mesa.</strong> Todo video que funciona em uma plataforma tem 70%+ de chance de funcionar em outra. Adapte e publique nas 3 plataformas.</div>
                    </div>
                    <div class="bg-white/5 rounded-xl p-4">
                        <div class="text-purple-400 font-bold mb-1">Regra #7</div>
                        <div class="text-sm text-gray-300"><strong class="text-white">Dados > Intuicao.</strong> Nao adivinhe o que funciona - use os dados do Viral Social Pro para tomar decisoes. O score viral, heatmap, e padroes revelam a verdade que a intuicao esconde.</div>
                    </div>
                    <div class="bg-white/5 rounded-xl p-4">
                        <div class="text-purple-400 font-bold mb-1">Regra #8</div>
                        <div class="text-sm text-gray-300"><strong class="text-white">Velocidade e tudo.</strong> Quando identificar uma tendencia emergente, crie conteudo em ate 24h. Depois de 48h a janela fecha e a concorrencia ja saturou o algoritmo.</div>
                    </div>
                </div>
            </div>

            <div class="insight-box rounded-xl p-5">
                <h4 class="font-semibold text-purple-300 mb-2">A Formula Final</h4>
                <p class="text-gray-300 text-sm leading-relaxed">
                    <strong class="text-white">Hook magnetico + Som emergente + Formato comprovado + Horario otimizado + Hashtags estrategicas = VIRAL.</strong><br><br>
                    Use o Viral Social Pro para encontrar cada um desses elementos: o Scanner encontra formatos comprovados, o Sound Predictor identifica sons emergentes, o Heatmap indica o horario ideal, e a analise de Tendencias revela as hashtags certas. Junte tudo e publique consistentemente. Os resultados virao.
                </p>
            </div>
        </section>

        <!-- Mobile Section -->
        <section id="mobile" class="mt-12">
            <div class="glass rounded-2xl p-6">
                <div class="flex flex-col md:flex-row gap-6 items-center">
                    <div class="flex-1">
                        <h3 class="text-xl font-bold text-white mb-3">Acesso Mobile</h3>
                        <p class="text-gray-300 text-sm leading-relaxed">
                            O Viral Social Pro e totalmente responsivo. Acesse de qualquer celular pelo navegador e tenha todas as funcionalidades na palma da mao. A navegacao mobile inclui um menu inferior com acesso rapido as 5 funcoes mais usadas.
                        </p>
                    </div>
                    <div class="w-48 flex-shrink-0 screenshot-frame">
                        <img src="/static/tutorial/mobile_dashboard.png" alt="Mobile" class="w-full" loading="lazy">
                    </div>
                </div>
            </div>
        </section>

    </main>
</div>

<!-- Footer -->
<footer class="border-t border-white/5 mt-16 py-8 text-center text-gray-500 text-sm">
    <p>Viral Social Pro - Tutorial Completo</p>
    <p class="mt-1">Feito para criadores que querem dominar o algoritmo.</p>
    <a href="/" class="inline-flex items-center gap-1 text-purple-400 hover:text-purple-300 mt-3">
        <i data-lucide="arrow-left" class="w-4 h-4"></i> Voltar ao Dashboard
    </a>
</footer>

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        lucide.createIcons();
    });

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                document.querySelectorAll('.toc-link').forEach(l => l.classList.remove('active'));
                const id = entry.target.id;
                document.querySelectorAll(`.toc-link[href="#${id}"]`).forEach(l => l.classList.add('active'));
            }
        });
    }, { threshold: 0.3 });

    document.querySelectorAll('section[id]').forEach(s => observer.observe(s));
</script>
</body>
</html>
