<?php
// admin/help.php
$pageTitle = 'Ajuda e Documentação';
$pageHeader = 'Manual do Administrador';
$currentPage = 'help';

require_once '../includes/config.php';
require_once '../includes/db.php';
require_once '../includes/functions.php';
require_once '../includes/auth.php';

// Requer autenticação
$auth->requireAuth();

// Incluir o header
require_once 'inc/header.php';
?>

<style>
    :root {
        --primary-color: #4F46E5;
        --secondary-color: #7C3AED;
        --accent-color: #EC4899;
        --dark-color: #1F2937;
        --light-color: #F8FAFC;
        --text-color: #1F2937;
        --border-color: #E5E7EB;
        --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        --success-color: #10B981;
        --warning-color: #F59E0B;
        --info-color: #3B82F6;
    }

    .help-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .help-card {
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        border: none;
        background: white;
        margin-bottom: 2rem;
        overflow: hidden;
    }

    .help-section {
        padding: 2rem;
        border-bottom: 1px solid var(--border-color);
    }

    .help-section:last-child {
        border-bottom: none;
    }

    .help-section h2 {
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .help-section h3 {
        font-size: 1.2rem;
        font-weight: 600;
        margin: 1.5rem 0 1rem;
        color: var(--dark-color);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .help-toc {
        background: var(--light-color);
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .help-toc h3 {
        margin-top: 0;
    }

    .help-toc ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .help-toc li {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
    }

    .help-toc li i {
        color: var(--primary-color);
        margin-right: 0.5rem;
        font-size: 0.75rem;
    }

    .help-toc a {
        color: var(--dark-color);
        text-decoration: none;
        transition: all 0.2s ease;
        flex: 1;
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
    }

    .help-toc a:hover {
        background: rgba(79, 70, 229, 0.1);
        color: var(--primary-color);
    }

    .step-list {
        list-style-type: none;
        padding: 0;
        margin: 1.5rem 0;
        counter-reset: step-counter;
    }

    .step-list li {
        position: relative;
        margin-bottom: 1.5rem;
        padding-left: 3rem;
        counter-increment: step-counter;
    }

    .step-list li::before {
        content: counter(step-counter);
        position: absolute;
        left: 0;
        top: 0;
        width: 2rem;
        height: 2rem;
        background: var(--primary-color);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }

    .note-box {
        background: rgba(59, 130, 246, 0.1);
        border-left: 4px solid var(--info-color);
        padding: 1rem 1.5rem;
        border-radius: 0 10px 10px 0;
        margin: 1.5rem 0;
    }

    .note-box.warning {
        background: rgba(245, 158, 11, 0.1);
        border-left-color: var(--warning-color);
    }

    .note-box.success {
        background: rgba(16, 185, 129, 0.1);
        border-left-color: var(--success-color);
    }

    .note-box p:last-child {
        margin-bottom: 0;
    }

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
        margin-top: 1.5rem;
    }

    .feature-card {
        background: white;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 1.5rem;
        transition: all 0.3s ease;
    }

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .feature-icon {
        width: 50px;
        height: 50px;
        background: var(--gradient);
        border-radius: 10px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .feature-card h4 {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .feature-card p {
        color: #6B7280;
        font-size: 0.95rem;
        margin-bottom: 0;
    }

    .accordion-item {
        border: 1px solid var(--border-color);
        border-radius: 10px;
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .accordion-header {
        background: #F9FAFB;
        padding: 1rem 1.5rem;
        cursor: pointer;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .accordion-body {
        padding: 1.5rem;
        border-top: 1px solid var(--border-color);
        display: none;
    }

    .accordion-item.active .accordion-body {
        display: block;
    }

    .accordion-item.active .accordion-icon {
        transform: rotate(180deg);
    }

    .search-box {
        position: relative;
        margin-bottom: 2rem;
    }

    .search-box input {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 3rem;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        font-size: 1rem;
    }

    .search-box i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6B7280;
    }

    .image-preview {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        margin: 1.5rem 0;
    }

    @media (max-width: 768px) {
        .help-section {
            padding: 1.5rem;
        }

        .feature-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="container-fluid py-4">
    <div class="help-container">
        <!-- Cabeçalho com pesquisa -->
        <div class="help-card">
            <div class="help-section">
                <div class="text-center mb-4">
                    <h1 class="mb-3">Centro de Ajuda do Painel Administrativo</h1>
                    <p class="text-muted">Guia completo para usar todas as funcionalidades do painel de administração</p>
                </div>
                
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="helpSearch" placeholder="Pesquisar na documentação..." class="form-control">
                </div>
                
                <!-- Índice -->
                <div class="help-toc">
                    <h3><i class="fas fa-list"></i> Conteúdo</h3>
                    <ul>
                        <li><i class="fas fa-circle"></i><a href="#introducao">Introdução ao Painel</a></li>
                        <li><i class="fas fa-circle"></i><a href="#paginas">Gerenciamento de Páginas</a></li>
                        <li><i class="fas fa-circle"></i><a href="#gerador">Gerador de Conteúdo</a></li>
                        <li><i class="fas fa-circle"></i><a href="#api">Configuração da API Claude</a></li>
                        <li><i class="fas fa-circle"></i><a href="#usuarios">Administração de Usuários</a></li>
                        <li><i class="fas fa-circle"></i><a href="#configuracoes">Configurações do Sistema</a></li>
                        <li><i class="fas fa-circle"></i><a href="#relatorios">Relatórios e Estatísticas</a></li>
                        <li><i class="fas fa-circle"></i><a href="#faq">Perguntas Frequentes</a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- Introdução -->
        <div class="help-card" id="introducao">
            <div class="help-section">
                <h2><i class="fas fa-info-circle"></i> Introdução ao Painel</h2>
                
                <p>O painel administrativo foi desenvolvido para facilitar a criação e gerenciamento de cursos gratuitos com múltiplas etapas. O sistema usa a API Claude para geração de conteúdo inteligente, oferecendo uma experiência eficiente para administradores.</p>
                
                <div class="feature-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <h4>Gerenciamento de Páginas</h4>
                        <p>Crie, edite e publique páginas para suas sequências de captura de leads.</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-magic"></i>
                        </div>
                        <h4>Geração de Conteúdo</h4>
                        <p>Use IA para criar títulos, textos e chamadas para ação persuasivos.</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <h4>Estatísticas e Conversões</h4>
                        <p>Acompanhe o desempenho das suas páginas e funis de conversão.</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <h4>Gestão de Usuários</h4>
                        <p>Controle o acesso ao painel com diferentes níveis de permissão.</p>
                    </div>
                </div>
                
                <div class="note-box">
                    <p><strong>Dica:</strong> Ao acessar o painel pela primeira vez, recomendamos passar por cada módulo para se familiarizar com as funcionalidades.</p>
                </div>
            </div>
        </div>
        
        <!-- Gerenciamento de Páginas -->
        <div class="help-card" id="paginas">
            <div class="help-section">
                <h2><i class="fas fa-file-alt"></i> Gerenciamento de Páginas</h2>
                
                <p>O sistema utiliza um fluxo de páginas em sequência para converter visitantes em leads. Cada página tem um propósito específico dentro da jornada do usuário.</p>
                
                <h3><i class="fas fa-sitemap"></i> Estrutura do Fluxo de Páginas</h3>
                
                <ol class="step-list">
                    <li><strong>Landing Page (PA)</strong>: Página inicial que atrai o visitante e apresenta o curso gratuito, com foco em despertar interesse.</li>
                    <li><strong>Primeira Etapa</strong>: Fornece o primeiro conteúdo valioso para estabelecer confiança e gerar engajamento inicial.</li>
                    <li><strong>Segunda Etapa</strong>: Aprofunda o conteúdo e aumenta o valor percebido do material gratuito.</li>
                    <li><strong>Terceira Etapa</strong>: Oferece conteúdo avançado e prepara o visitante para a conversão final.</li>
                    <li><strong>Página de Registro</strong>: Página final onde o lead se cadastra para receber o conteúdo completo ou oferta principal.</li>
                </ol>
                
                <h3><i class="fas fa-plus-circle"></i> Como Criar uma Nova Página</h3>
                
                <ol class="step-list">
                    <li>No menu lateral, clique em <strong>Páginas</strong> e depois em <strong>Nova Página</strong>.</li>
                    <li>Selecione o tipo de página que deseja criar (Landing, Etapa 1, 2, 3 ou Registro).</li>
                    <li>Você pode criar a página manualmente ou usar a API Claude para gerar conteúdo automaticamente.</li>
                    <li>Para geração automática, insira o título e palavras-chave, e clique em "Gerar com API Claude".</li>
                    <li>Revise e edite o conteúdo gerado conforme necessário.</li>
                    <li>Configure os detalhes adicionais como imagem destacada, CTA, etc.</li>
                    <li>Clique em "Salvar" para criar a página (como rascunho) ou marque "Publicar imediatamente".</li>
                </ol>
                
                <div class="note-box warning">
                    <p><strong>Importante:</strong> Certifique-se de que o fluxo entre as páginas seja consistente. Cada página deve levar naturalmente à próxima, com CTAs claros e relevantes.</p>
                </div>
                
                <h3><i class="fas fa-edit"></i> Edição e Publicação</h3>
                
                <p>Para editar páginas existentes:</p>
                
                <ol class="step-list">
                    <li>Acesse <strong>Páginas > Listar Páginas</strong> no menu lateral.</li>
                    <li>Utilize os filtros para encontrar a página desejada (por tipo, status, etc).</li>
                    <li>Clique no ícone de edição ao lado da página que deseja modificar.</li>
                    <li>Realize as alterações necessárias e clique em "Salvar".</li>
                    <li>Para publicar uma página em rascunho, marque a opção "Publicar" e salve.</li>
                </ol>
                
                <div class="note-box success">
                    <p><strong>Dica:</strong> Use a função "Visualizar" para ver como a página ficará antes de publicá-la oficialmente.</p>
                </div>
            </div>
        </div>
        
        <!-- Gerador de Conteúdo -->
        <div class="help-card" id="gerador">
            <div class="help-section">
                <h2><i class="fas fa-magic"></i> Gerador de Conteúdo</h2>
                
                <p>O Gerador de Conteúdo é uma ferramenta poderosa que utiliza a API Claude para criar títulos, chamadas para ação (CTAs) e palavras-chave para suas páginas de forma automatizada.</p>
                
                <h3><i class="fas fa-lightbulb"></i> Como Usar o Gerador</h3>
                
                <ol class="step-list">
                    <li>Acesse o <strong>Gerador de Conteúdo</strong> no menu lateral.</li>
                    <li>Insira a palavra-chave principal do curso (ex: "Curso de carretillero").</li>
                    <li>Clique em <strong>Gerar Conteúdo</strong> para iniciar o processo.</li>
                    <li>O sistema gerará automaticamente 3 opções de títulos, 3 opções de CTAs e 5 palavras-chave relacionadas.</li>
                    <li>Use as abas para alternar entre os diferentes tipos de página (Landing, Etapa 1, 2, 3 e Registro).</li>
                    <li>Clique no ícone de cópia ao lado de qualquer sugestão para copiá-la para a área de transferência.</li>
                    <li>Se desejar, clique em <strong>Criar Página</strong> para usar as sugestões selecionadas diretamente em uma nova página.</li>
                </ol>
                
                <div class="note-box">
                    <p><strong>Dica:</strong> Quanto mais específica for sua palavra-chave, mais relevantes serão as sugestões geradas pela IA.</p>
                </div>
                
                <h3><i class="fas fa-cogs"></i> Personalizando o Conteúdo Gerado</h3>
                
                <p>Mesmo usando o gerador, é importante revisar e personalizar o conteúdo:</p>
                
                <ul>
                    <li>Ajuste os títulos para incluir termos específicos do seu nicho ou mercado.</li>
                    <li>Personalize os CTAs para refletir o tom de voz da sua marca.</li>
                    <li>Use as palavras-chave geradas para otimizar o SEO da sua página.</li>
                    <li>Combine diferentes sugestões para criar algo único e ainda mais relevante.</li>
                </ul>
                
                <div class="note-box warning">
                    <p><strong>Importante:</strong> O conteúdo gerado pela IA deve ser sempre revisado e aprimorado para garantir consistência com sua marca e proposta de valor.</p>
                </div>
            </div>
        </div>
        
        <!-- Configuração da API Claude -->
        <div class="help-card" id="api">
            <div class="help-section">
                <h2><i class="fas fa-robot"></i> Configuração da API Claude</h2>
                
                <p>A API Claude é o motor de inteligência artificial que permite a geração automática de conteúdo. Configurá-la corretamente é essencial para o funcionamento do sistema.</p>
                
                <h3><i class="fas fa-key"></i> Obtendo e Configurando sua Chave API</h3>
                
                <ol class="step-list">
                    <li>Obtenha uma chave API válida da Anthropic em <a href="https://console.anthropic.com/" target="_blank">console.anthropic.com</a>.</li>
                    <li>Acesse <strong>Configurações > API Claude</strong> no menu lateral do painel.</li>
                    <li>Insira sua chave API no campo apropriado (formato: sk-ant-api02-xxxxx...).</li>
                    <li>Selecione o modelo desejado. Recomendamos:
                        <ul>
                            <li><strong>Claude 3 Opus</strong>: Para a mais alta qualidade de conteúdo (mais lento)</li>
                            <li><strong>Claude 3 Sonnet</strong>: Bom equilíbrio entre qualidade e velocidade</li>
                            <li><strong>Claude 3 Haiku</strong>: Para geração mais rápida (qualidade um pouco inferior)</li>
                        </ul>
                    </li>
                    <li>Clique em <strong>Testar Conexão</strong> para verificar se a configuração está funcionando.</li>
                    <li>Salve as configurações ao finalizar.</li>
                </ol>
                
                <div class="note-box warning">
                    <p><strong>Importante:</strong> Sua chave API é confidencial. Não a compartilhe ou exponha em locais públicos. O sistema armazena a chave de forma segura.</p>
                </div>
                
                <h3><i class="fas fa-sliders-h"></i> Ajustando Parâmetros da API</h3>
                
                <p>Para usuários avançados, é possível ajustar alguns parâmetros da API para personalizar a geração de conteúdo:</p>
                
                <ul>
                    <li><strong>Temperatura</strong>: Controla a criatividade das respostas (valores mais altos = mais criativo).</li>
                    <li><strong>Máximo de Tokens</strong>: Limita o tamanho do texto gerado.</li>
                    <li><strong>Modelo</strong>: Determina qual versão do Claude será utilizada.</li>
                </ul>
                
                <p>Estes parâmetros podem ser ajustados diretamente no arquivo <code>includes/claude-api.php</code> por um desenvolvedor.</p>
                
                <div class="note-box">
                    <p><strong>Dica:</strong> Monitorando seu uso da API, você pode otimizar custos e desempenho, ajustando o modelo e os parâmetros conforme necessário.</p>
                </div>
            </div>
        </div>
        
        <!-- Administração de Usuários -->
        <div class="help-card" id="usuarios">
            <div class="help-section">
                <h2><i class="fas fa-users"></i> Administração de Usuários</h2>
                
                <p>O sistema permite criar e gerenciar diferentes usuários com acesso ao painel administrativo, cada um com seu nível de permissão.</p>
                
                <h3><i class="fas fa-user-plus"></i> Criando Novos Usuários</h3>
                
                <ol class="step-list">
                    <li>Acesse <strong>Usuários > Novo Usuário</strong> no menu lateral (requer permissão de administrador).</li>
                    <li>Preencha os campos obrigatórios: Nome, E-mail e Senha.</li>
                    <li>Selecione o nível de acesso:
                        <ul>
                            <li><strong>Administrador</strong>: Acesso completo a todas as funcionalidades.</li>
                            <li><strong>Editor</strong>: Pode criar e editar conteúdo, mas não tem acesso a configurações avançadas.</li>
                        </ul>
                    </li>
                    <li>Clique em <strong>Salvar</strong> para criar o usuário.</li>
                </ol>
                
                <h3><i class="fas fa-user-edit"></i> Gerenciando Usuários Existentes</h3>
                
                <p>Para gerenciar usuários:</p>
                
                <ol class="step-list">
                    <li>Acesse <strong>Usuários > Listar Usuários</strong> no menu lateral.</li>
                    <li>Para editar um usuário, clique no ícone de edição correspondente.</li>
                    <li>Para desativar um usuário sem excluí-lo, defina seu status como "Inativo".</li>
                    <li>Para excluir um usuário, clique no ícone de exclusão e confirme a ação.</li>
                </ol>
                
                <div class="note-box warning">
                    <p><strong>Importante:</strong> A exclusão de um usuário é permanente e não pode ser desfeita. Considere desativá-lo em vez de excluí-lo.</p>
                </div>
                
                <h3><i class="fas fa-shield-alt"></i> Segurança e Boas Práticas</h3>
                
                <ul>
                    <li>Crie senhas fortes com pelo menos 8 caracteres, incluindo números, letras maiúsculas e símbolos.</li>
                    <li>Atribua apenas as permissões necessárias para cada usuário realizar suas funções.</li>
                    <li>Revise periodicamente a lista de usuários para garantir que apenas pessoas autorizadas tenham acesso.</li>
                    <li>Instrua os usuários a fazerem logout ao terminar de usar o sistema, especialmente em computadores compartilhados.</li>
                </ul>
            </div>
        </div>
        
        <!-- Configurações do Sistema -->
        <div class="help-card" id="configuracoes">
            <div class="help-section">
                <h2><i class="fas fa-cogs"></i> Configurações do Sistema</h2>
                
                <p>As configurações do sistema permitem personalizar diversos aspectos da plataforma para atender às suas necessidades específicas.</p>
                
                <h3><i class="fas fa-globe"></i> Configurações Gerais</h3>
                
                <p>Para acessar e modificar as configurações gerais:</p>
                
                <ol class="step-list">
                    <li>Acesse <strong>Configurações</strong> no menu lateral (requer permissão de administrador).</li>
                    <li>Na aba <strong>Geral</strong>, você pode configurar:
                        <ul>
                            <li>Nome do site: Aparece no título das páginas e e-mails.</li>
                            <li>URL do site: Endereço base do seu site.</li>
                            <li>E-mail administrativo: Para notificações do sistema.</li>
                            <li>Fuso horário: Para exibição correta de datas e horários.</li>
                        </ul>
                    </li>
                    <li>Clique em <strong>Salvar Configurações Gerais</strong> após fazer alterações.</li>
                </ol>
                
                <h3><i class="fas fa-upload"></i> Configurações de Upload</h3>
                
                <p>Para configurar como os arquivos são carregados no sistema:</p>
                
                <ol class="step-list">
                    <li>Na aba <strong>Uploads</strong>, você pode definir:
                        <ul>
                            <li>Tamanho máximo de upload: Limite para arquivos enviados (em MB).</li>
                            <li>Extensões permitidas: Tipos de arquivo que podem ser enviados.</li>
                        </ul>
                    </li>
                    <li>Clique em <strong>Salvar Configurações de Upload</strong> para aplicar as alterações.</li>
                </ol>
                
                <h3><i class="fas fa-database"></i> Configurações de Cache</h3>
                
                <p>O cache melhora o desempenho do sistema armazenando temporariamente dados frequentemente acessados:</p>
                
                <ol class="step-list">
                    <li>Na aba <strong>Cache</strong>, você pode:
                        <ul>
                            <li>Ativar ou desativar o sistema de cache.</li>
                            <li>Definir o tempo de vida do cache (em minutos).</li>
                            <li>Limpar o cache existente, se necessário.</li>
                        </ul>
                    </li>
                    <li>Clique em <strong>Salvar Configurações de Cache</strong> para aplicar as alterações.</li>
                </ol>
                
                <div class="note-box">
                    <p><strong>Dica:</strong> A ativação do cache é altamente recomendada para melhorar a velocidade do sistema, especialmente em ambientes de produção.</p>
                </div>
                
                <div class="note-box warning">
                    <p><strong>Importante:</strong> Após fazer alterações nas configurações, pode ser necessário limpar o cache para que algumas delas entrem em vigor imediatamente.</p>
                </div>
            </div>
        </div>
        
        <!-- Relatórios e Estatísticas -->
        <div class="help-card" id="relatorios">
            <div class="help-section">
                <h2><i class="fas fa-chart-bar"></i> Relatórios e Estatísticas</h2>
                
                <p>O sistema oferece estatísticas detalhadas sobre o desempenho das suas páginas e funis de conversão, permitindo análises e otimizações baseadas em dados.</p>
                
                <h3><i class="fas fa-tachometer-alt"></i> Dashboard Principal</h3>
                
                <p>O Dashboard oferece uma visão geral do desempenho do sistema:</p>
                
                <ul>
                    <li><strong>Total de Páginas</strong>: Número total de páginas no sistema.</li>
                    <li><strong>Páginas Publicadas</strong>: Quantas páginas estão ativas e visíveis para os visitantes.</li>
                    <li><strong>Páginas em Rascunho</strong>: Páginas em desenvolvimento ou revisão.</li>
                    <li><strong>Visualizações</strong>: Total de visitas nas páginas nos últimos 30 dias.</li>
                    <li><strong>Gráfico de Visitas</strong>: Distribuição das visitas nos últimos 7 dias.</li>
                    <li><strong>Páginas por Tipo</strong>: Distribuição de páginas por categoria.</li>
                </ul>
                
                <h3><i class="fas fa-chart-line"></i> Relatório de Desempenho</h3>
                
                <p>Para acessar relatórios mais detalhados:</p>
                
                <ol class="step-list">
                    <li>Acesse <strong>Relatórios</strong> no menu lateral.</li>
                    <li>Selecione o período de análise (7 dias, 30 dias, personalizado).</li>
                    <li>Visualize métricas detalhadas, como:
                        <ul>
                            <li>Taxa de conversão por página e por funil completo.</li>
                            <li>Tempo médio de permanência nas páginas.</li>
                            <li>Taxa de abandonos em cada etapa do funil.</li>
                            <li>Origem dos visitantes (tráfego orgânico, direto, referência).</li>
                        </ul>
                    </li>
                    <li>Utilize os filtros para analisar dados específicos por curso, tipo de página, etc.</li>
                </ol>
                
                <h3><i class="fas fa-file-export"></i> Exportação de Dados</h3>
                
                <p>Para exportar seus relatórios:</p>
                
                <ol class="step-list">
                    <li>Configure o relatório com os filtros e período desejados.</li>
                    <li>Clique no botão <strong>Exportar</strong> no canto superior direito.</li>
                    <li>Selecione o formato desejado (CSV, PDF ou Excel).</li>
                    <li>O arquivo será gerado e disponibilizado para download automaticamente.</li>
                </ol>
                
                <div class="note-box success">
                    <p><strong>Dica:</strong> Analise regularmente seus relatórios para identificar pontos de melhoria no funil de conversão e otimizar o desempenho das suas páginas.</p>
                </div>
            </div>
        </div>
        
        <!-- Perguntas Frequentes -->
        <div class="help-card" id="faq">
            <div class="help-section">
                <h2><i class="fas fa-question-circle"></i> Perguntas Frequentes</h2>
                
                <div class="accordion-list">
                    <div class="accordion-item">
                        <div class="accordion-header">
                            Como posso melhorar a taxa de conversão do meu funil?
                            <i class="fas fa-chevron-down accordion-icon"></i>
                        </div>
                        <div class="accordion-body">
                            <p>Para melhorar a taxa de conversão:</p>
                            <ul>
                                <li>Utilize títulos mais persuasivos e chamadas para ação claras.</li>
                                <li>Garanta que cada página forneça valor real ao visitante.</li>
                                <li>Otimize a velocidade de carregamento das páginas.</li>
                                <li>Teste diferentes versões de elementos-chave (A/B testing).</li>
                                <li>Mantenha um design limpo e responsivo para todos os dispositivos.</li>
                                <li>Utilize depoimentos e provas sociais para aumentar a credibilidade.</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <div class="accordion-header">
                            Por que meu conteúdo gerado pela API não está saindo como esperado?
                            <i class="fas fa-chevron-down accordion-icon"></i>
                        </div>
                        <div class="accordion-body">
                            <p>Existem várias razões possíveis:</p>
                            <ul>
                                <li>A palavra-chave pode ser muito genérica - tente ser mais específico.</li>
                                <li>Verifique se a API está configurada corretamente com uma chave válida.</li>
                                <li>Tente ajustar o modelo utilizado - Claude 3 Opus geralmente fornece os melhores resultados.</li>
                                <li>Para conteúdos muito específicos, considere editar os prompts no arquivo claude-api.php.</li>
                            </ul>
                            <p>Se o problema persistir, tente regenerar o conteúdo ou criar a página manualmente.</p>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <div class="accordion-header">
                            Como posso restaurar uma página excluída acidentalmente?
                            <i class="fas fa-chevron-down accordion-icon"></i>
                        </div>
                        <div class="accordion-body">
                            <p>Infelizmente, a exclusão de páginas é permanente no sistema atual. Recomendamos:</p>
                            <ul>
                                <li>Em vez de excluir, defina páginas como "Rascunho" quando quiser removê-las temporariamente.</li>
                                <li>Realize backups regulares do banco de dados para permitir restauração em casos críticos.</li>
                                <li>Se a página foi criada recentemente com a API, você pode tentar regenerá-la com os mesmos parâmetros.</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <div class="accordion-header">
                            Posso usar o sistema para criar múltiplos funis para diferentes cursos?
                            <i class="fas fa-chevron-down accordion-icon"></i>
                        </div>
                        <div class="accordion-body">
                            <p>Sim! O sistema foi projetado para gerenciar múltiplos funis de cursos em paralelo:</p>
                            <ul>
                                <li>Cada curso pode ter seu próprio conjunto de 5 páginas (Landing até Registro).</li>
                                <li>Use a funcionalidade de "Cursos" para criar e organizar diferentes ofertas.</li>
                                <li>Ao criar páginas, associe-as ao curso correspondente.</li>
                                <li>Os relatórios permitem filtrar por curso para analisar o desempenho individual.</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <div class="accordion-header">
                            O sistema está lento. Como posso melhorar o desempenho?
                            <i class="fas fa-chevron-down accordion-icon"></i>
                        </div>
                        <div class="accordion-body">
                            <p>Para otimizar o desempenho:</p>
                            <ul>
                                <li>Ative o sistema de cache em Configurações > Cache.</li>
                                <li>Otimize as imagens antes de fazer upload (comprima-as sem perder qualidade).</li>
                                <li>Limpe regularmente o cache e registros antigos para reduzir o tamanho do banco de dados.</li>
                                <li>Verifique com seu provedor de hospedagem se os recursos do servidor são adequados.</li>
                                <li>Use o modelo Claude 3 Haiku em vez de Opus para geração mais rápida de conteúdo.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Sistema de pesquisa
    const searchInput = document.getElementById('helpSearch');
    const allSections = document.querySelectorAll('.help-section');
    const allAccordionItems = document.querySelectorAll('.accordion-item');
    
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase().trim();
        
        if (searchTerm.length > 2) {
            // Busca nas seções
            allSections.forEach(section => {
                const sectionContent = section.textContent.toLowerCase();
                const sectionTitle = section.querySelector('h2')?.textContent.toLowerCase() || '';
                
                if (sectionContent.includes(searchTerm) || sectionTitle.includes(searchTerm)) {
                    section.closest('.help-card').style.display = 'block';
                    
                    // Destaca texto correspondente
                    highlightText(section, searchTerm);
                } else {
                    if (!section.classList.contains('accordion-body')) {
                        section.closest('.help-card').style.display = 'none';
                    }
                }
            });
            
            // Expande accordions relevantes
            allAccordionItems.forEach(item => {
                const accordionContent = item.textContent.toLowerCase();
                const accordionBody = item.querySelector('.accordion-body');
                
                if (accordionContent.includes(searchTerm)) {
                    item.classList.add('active');
                    highlightText(accordionBody, searchTerm);
                } else {
                    item.classList.remove('active');
                }
            });
        } else {
            // Reset view
            allSections.forEach(section => {
                section.closest('.help-card').style.display = 'block';
                removeHighlights(section);
            });
            
            allAccordionItems.forEach(item => {
                item.classList.remove('active');
                removeHighlights(item);
            });
        }
    });
    
    // Função para destacar texto
    function highlightText(element, term) {
        removeHighlights(element);
        
        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
        const allTextNodes = [];
        let currentNode;
        
        while (currentNode = walker.nextNode()) {
            allTextNodes.push(currentNode);
        }
        
        allTextNodes.forEach(textNode => {
            const text = textNode.nodeValue.toLowerCase();
            const index = text.indexOf(term);
            
            if (index >= 0 && textNode.parentNode.nodeName !== 'SCRIPT') {
                const highlightSpan = document.createElement('span');
                highlightSpan.className = 'highlight-text';
                highlightSpan.style.backgroundColor = 'rgba(79, 70, 229, 0.2)';
                highlightSpan.style.borderRadius = '2px';
                
                const before = textNode.nodeValue.substring(0, index);
                const highlight = textNode.nodeValue.substring(index, index + term.length);
                const after = textNode.nodeValue.substring(index + term.length);
                
                const beforeNode = document.createTextNode(before);
                const highlightNode = document.createTextNode(highlight);
                const afterNode = document.createTextNode(after);
                
                highlightSpan.appendChild(highlightNode);
                
                const fragment = document.createDocumentFragment();
                fragment.appendChild(beforeNode);
                fragment.appendChild(highlightSpan);
                fragment.appendChild(afterNode);
                
                textNode.parentNode.replaceChild(fragment, textNode);
            }
        });
    }
    
    // Função para remover destaques
    function removeHighlights(element) {
        const highlights = element.querySelectorAll('.highlight-text');
        highlights.forEach(highlight => {
            const parent = highlight.parentNode;
            parent.replaceChild(document.createTextNode(highlight.textContent), highlight);
            parent.normalize();
        });
    }
    
    // Accordion Functionality
    const accordionHeaders = document.querySelectorAll('.accordion-header');
    
    accordionHeaders.forEach(header => {
        header.addEventListener('click', function() {
            const accordionItem = this.parentElement;
            accordionItem.classList.toggle('active');
        });
    });
    
    // Scroll to section on link click
    document.querySelectorAll('.help-toc a').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href').substring(1);
            const targetElement = document.getElementById(targetId);
            
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 20,
                    behavior: 'smooth'
                });
            }
        });
    });
});
</script>

<?php require_once 'inc/footer.php'; ?>