@extends('layouts.admin')

@section('title', 'Manual de Uso')

@section('content')
<div class="container-fluid px-4">

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 text-gray-800"><i class="bi bi-book me-2"></i>Manual de Uso do Sistema</h1>
    </div>

    <!-- Table of Contents -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-list-ol me-2"></i>Sumário</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#acesso" class="text-primary">1. Acesso ao Painel</a></li>
                        <li class="mb-2"><a href="#dashboard" class="text-primary">2. Dashboard</a></li>
                        <li class="mb-2"><a href="#usuarios" class="text-primary">3. Gerenciamento de Usuários</a></li>
                        <li class="mb-2"><a href="#permissoes" class="text-primary">4. Permissões de Acesso</a></li>
                        <li class="mb-2"><a href="#contatos" class="text-primary">5. Mensagens de Contato</a></li>
                        <li class="mb-2"><a href="#assuntos" class="text-primary">6. Assuntos de Contato</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#servicos" class="text-primary">7. Serviços</a></li>
                        <li class="mb-2"><a href="#faq" class="text-primary">8. Perguntas Frequentes (FAQ)</a></li>
                        <li class="mb-2"><a href="#noticias" class="text-primary">9. Notícias</a></li>
                        <li class="mb-2"><a href="#downloads" class="text-primary">10. Central de Downloads</a></li>
                        <li class="mb-2"><a href="#produtos" class="text-primary">11. Produtos</a></li>
                        <li class="mb-2"><a href="#galerias" class="text-primary">12. Galerias de Imagens</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#paginas" class="text-primary">13. Páginas Institucionais</a></li>
                        <li class="mb-2"><a href="#marketing" class="text-primary">14. Marketing</a></li>
                        <li class="mb-2"><a href="#configuracoes" class="text-primary">15. Configurações do Sistema</a></li>
                        <li class="mb-2"><a href="#perfil" class="text-primary">16. Perfil e Preferências</a></li>
                        <li class="mb-2"><a href="#notificacoes" class="text-primary">17. Notificações</a></li>
                        <li class="mb-2"><a href="#dicas" class="text-primary">18. Dicas e Boas Práticas</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Section 1: Acesso ao Painel -->
    <div class="card shadow mb-4" id="acesso">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-lock me-2"></i>1. Acesso ao Painel Administrativo</h6>
        </div>
        <div class="card-body">
            <p>Para acessar o painel administrativo do seu site:</p>
            <ol>
                <li>Acesse o endereço <code>http://seusite.com.br/login</code></li>
                <li>Insira seu <strong>e-mail</strong> e <strong>senha</strong> cadastrados</li>
                <li>Clique em <strong>"Entrar"</strong></li>
                <li>Após o login, você será redirecionado para o Dashboard</li>
            </ol>
            <div class="alert alert-info">
                <i class="bi bi-info-circle me-1"></i>
                <strong>Primeiro acesso?</strong> Altere sua senha imediatamente em <strong>Configurações > Perfil</strong>.
            </div>
        </div>
    </div>

    <!-- Section 2: Dashboard -->
    <div class="card shadow mb-4" id="dashboard">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-speedometer2 me-2"></i>2. Dashboard</h6>
        </div>
        <div class="card-body">
            <p>O Dashboard é a página inicial do painel administrativo. Ele apresenta:</p>
            <ul>
                <li><strong>Métricas rápidas</strong>: Total de usuários, produtos, serviços, galerias, páginas e notícias</li>
                <li><strong>Atalhos rápidos</strong>: Links para as funcionalidades mais utilizadas</li>
                <li><strong>Sugestão de funcionalidades</strong>: Use o formulário "Sugerir Funcionalidade" para enviar solicitações ao suporte</li>
            </ul>
        </div>
    </div>

    <!-- Section 3: Usuários -->
    <div class="card shadow mb-4" id="usuarios">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-people me-2"></i>3. Gerenciamento de Usuários</h6>
        </div>
        <div class="card-body">
            <p><em>Disponível apenas para administradores.</em></p>
            <p>No menu <strong>Usuários</strong>, você pode:</p>
            <ul>
                <li><strong>Listar</strong> todos os usuários cadastrados no sistema</li>
                <li><strong>Criar</strong> novos usuários com tipo Admin ou Usuário comum</li>
                <li><strong>Editar</strong> dados de usuários existentes (nome, e-mail, tipo, avatar)</li>
                <li><strong>Excluir</strong> usuários (exceto o administrador principal)</li>
            </ul>

            <h6 class="mt-3"><i class="bi bi-tag me-1"></i>Tipos de Usuário</h6>
            <div class="table-responsive">
                <table class="table table-bordered table-sm">
                    <thead class="thead-light">
                        <tr>
                            <th>Tipo</th>
                            <th>Descrição</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span class="badge badge-primary">Admin</span></td>
                            <td>Acesso total ao painel, incluindo gerenciamento de usuários, tipos de usuário e todas as permissões</td>
                        </tr>
                        <tr>
                            <td><span class="badge badge-secondary">User</span></td>
                            <td>Acesso limitado baseado em permissões específicas atribuídas pelo administrador</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h6 class="mt-3">Tipos de Usuário Personalizados</h6>
            <p>No menu <strong>Tipos de Usuário</strong>, você pode criar tipos personalizados com combinações específicas de permissões para diferentes perfis de acesso.</p>
        </div>
    </div>

    <!-- Section 4: Permissões -->
    <div class="card shadow mb-4" id="permissoes">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-shield-check me-2"></i>4. Permissões de Acesso</h6>
        </div>
        <div class="card-body">
            <p>O sistema utiliza um modelo de permissões para controlar o acesso dos usuários. Ao editar um usuário, você pode atribuir permissões individuais:</p>
            <div class="table-responsive">
                <table class="table table-bordered table-sm">
                    <thead class="thead-light">
                        <tr>
                            <th>Permissão</th>
                            <th>Descrição</th>
                            <th>Seção no Painel</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td><code>pages</code></td><td>Gerenciar páginas institucionais</td><td>Páginas</td></tr>
                        <tr><td><code>news</code></td><td>Gerenciar notícias</td><td>Notícias</td></tr>
                        <tr><td><code>galleries</code></td><td>Gerenciar galerias e categorias</td><td>Galerias</td></tr>
                        <tr><td><code>products</code></td><td>Gerenciar produtos e categorias</td><td>Produtos</td></tr>
                        <tr><td><code>services</code></td><td>Gerenciar serviços</td><td>Serviços</td></tr>
                        <tr><td><code>contacts</code></td><td>Visualizar e responder mensagens de contato</td><td>Contatos</td></tr>
                        <tr><td><code>subjects</code></td><td>Gerenciar assuntos do formulário de contato</td><td>Assuntos</td></tr>
                        <tr><td><code>faqs</code></td><td>Gerenciar perguntas frequentes</td><td>FAQ</td></tr>
                        <tr><td><code>downloads</code></td><td>Gerenciar arquivos para download</td><td>Downloads</td></tr>
                        <tr><td><code>marketing</code></td><td>Acessar ferramentas de marketing, analytics e banners</td><td>Marketing</td></tr>
                        <tr><td><code>settings</code></td><td>Alterar configurações globais do site</td><td>Dados da Empresa</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="alert alert-warning">
                <i class="bi bi-exclamation-triangle me-1"></i>
                <strong>Atenção:</strong> Administradores possuem acesso total automaticamente, sem necessidade de permissões individuais.
            </div>
        </div>
    </div>

    <!-- Section 5: Contatos -->
    <div class="card shadow mb-4" id="contatos">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-envelope me-2"></i>5. Mensagens de Contato</h6>
        </div>
        <div class="card-body">
            <p>Todas as mensagens enviadas pelo formulário de contato do site são listadas no menu <strong>Contatos</strong>.</p>
            <h6 class="mt-2">Funcionalidades:</h6>
            <ul>
                <li><strong>Visualizar</strong>: Clique em uma mensagem para ver os detalhes completos (nome, e-mail, assunto, mensagem)</li>
                <li><strong>Responder</strong>: Digite sua resposta diretamente no painel. O cliente receberá um e-mail formatado com a resposta</li>
                <li><strong>Excluir</strong>: Remova mensagens antigas ou irrelevantes</li>
            </ul>
            <div class="alert alert-info">
                <i class="bi bi-lightbulb me-1"></i>
                <strong>Dica:</strong> Configure os assuntos do formulário de contato no menu <strong>Assuntos</strong> para organizar melhor as mensagens recebidas (ex: Orçamento, Suporte, Comercial).
            </div>
        </div>
    </div>

    <!-- Section 6: Assuntos -->
    <div class="card shadow mb-4" id="assuntos">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-tags me-2"></i>6. Assuntos de Contato</h6>
        </div>
        <div class="card-body">
            <p>No menu <strong>Assuntos</strong>, você gerencia as opções de assunto que aparecem no formulário de contato do site.</p>
            <ul>
                <li><strong>Criar</strong>: Adicione novos assuntos (ex: "Orçamento", "Suporte Técnico", "Parceria")</li>
                <li><strong>Editar</strong>: Altere o nome ou a descrição dos assuntos existentes</li>
                <li><strong>Ativar/Desativar</strong>: Assuntos desativados não aparecem no formulário, mas o histórico é mantido</li>
                <li><strong>Excluir</strong>: Remova assuntos não utilizados</li>
            </ul>
        </div>
    </div>

    <!-- Section 7: Serviços -->
    <div class="card shadow mb-4" id="servicos">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-briefcase me-2"></i>7. Serviços</h6>
        </div>
        <div class="card-body">
            <p>No menu <strong>Serviços</strong>, você gerencia os serviços oferecidos pela empresa.</p>
            <h6 class="mt-2">Como cadastrar um serviço:</h6>
            <ol>
                <li>Clique em <strong>"Novo Serviço"</strong></li>
                <li>Preencha o <strong>nome</strong> do serviço</li>
                <li>Adicione uma <strong>descrição</strong> detalhada (suporta formatação HTML)</li>
                <li>Defina se o serviço está <strong>ativo</strong> ou <strong>inativo</strong></li>
                <li>Marque como <strong>destaque</strong> para que apareça em primeiro lugar</li>
                <li>Clique em <strong>"Salvar"</strong></li>
            </ol>
            <div class="alert alert-info">
                <i class="bi bi-lightbulb me-1"></i>
                Serviços inativos não aparecem no site público, mas permanecem salvos no sistema.
            </div>
        </div>
    </div>

    <!-- Section 8: FAQ -->
    <div class="card shadow mb-4" id="faq">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-question-circle me-2"></i>8. Perguntas Frequentes (FAQ)</h6>
        </div>
        <div class="card-body">
            <p>No menu <strong>FAQ</strong>, você gerencia as perguntas frequentes exibidas no site.</p>
            <h6 class="mt-2">Como cadastrar:</h6>
            <ol>
                <li>Clique em <strong>"Nova Pergunta"</strong></li>
                <li>Digite a <strong>pergunta</strong></li>
                <li>Digite a <strong>resposta</strong></li>
                <li>Defina a <strong>ordem</strong> de exibição (números menores aparecem primeiro)</li>
                <li>Marque como <strong>ativa</strong> para que apareça no site</li>
                <li>Clique em <strong>"Salvar"</strong></li>
            </ol>
            <div class="alert alert-info">
                <i class="bi bi-lightbulb me-1"></i>
                <strong>Dica:</strong> Coloque as perguntas mais comuns com ordem menor (1, 2, 3...) para que apareçam primeiro.
            </div>
        </div>
    </div>

    <!-- Section 9: Notícias -->
    <div class="card shadow mb-4" id="noticias">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-newspaper me-2"></i>9. Notícias</h6>
        </div>
        <div class="card-body">
            <p>No menu <strong>Notícias</strong>, você gerencia artigos de notícias publicados no site.</p>

            <h6 class="mt-2">Como criar uma notícia:</h6>
            <ol>
                <li>Clique em <strong>"Nova Notícia"</strong></li>
                <li>Preencha o <strong>título</strong> da notícia</li>
                <li>O <strong>slug</strong> (endereço URL) é gerado automaticamente a partir do título, mas pode ser editado manualmente</li>
                <li>Escreva um <strong>resumo</strong> breve que aparecerá na listagem de notícias</li>
                <li>Escreva o <strong>conteúdo</strong> completo no editor</li>
                <li>Defina o <strong>autor</strong> da notícia</li>
                <li>Defina a <strong>data/hora de publicação</strong></li>
                <li>Faça upload da <strong>imagem principal</strong> (imagem de destaque)</li>
                <li>Configure os <strong>campos SEO</strong>:
                    <ul>
                        <li><strong>Título SEO</strong>: Título que aparece nos resultados do Google</li>
                        <li><strong>Meta Description</strong>: Descrição que aparece nos resultados de busca</li>
                        <li><strong>Palavras-chave</strong>: Termos relevantes para indexação</li>
                    </ul>
                </li>
                <li>Marque como <strong>ativa</strong> para publicar</li>
                <li>Clique em <strong>"Salvar"</strong></li>
            </ol>

            <h6 class="mt-3">Galeria de Imagens Adicionais</h6>
            <p>Após criar a notícia, você pode adicionar imagens adicionais na tela de edição:</p>
            <ol>
                <li>Na edição da notícia, use a seção <strong>"Adicionar Imagens"</strong></li>
                <li>Selecione uma ou mais imagens</li>
                <li>Adicione uma <strong>descrição/legenda</strong> para cada imagem</li>
                <li>As imagens podem ser visualizadas em carrossel na página da notícia no site público</li>
            </ol>

            <div class="alert alert-info">
                <i class="bi bi-lightbulb me-1"></i>
                <strong>Dica:</strong> Notícias desativadas não aparecem no site, mas permanecem salvas. Use esse recurso para rascunhos.
            </div>
        </div>
    </div>

    <!-- Section 10: Downloads -->
    <div class="card shadow mb-4" id="downloads">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-download me-2"></i>10. Central de Downloads</h6>
        </div>
        <div class="card-body">
            <p>No menu <strong>Downloads</strong>, você gerencia arquivos disponibilizados para os visitantes do site.</p>
            <h6 class="mt-2">Como cadastrar:</h6>
            <ol>
                <li>Clique em <strong>"Novo Download"</strong></li>
                <li>Preencha o <strong>nome</strong> do arquivo</li>
                <li>Adicione uma <strong>descrição</strong></li>
                <li>Selecione o <strong>tipo</strong>: Driver, Manual, Software ou Outro</li>
                <li>Faça o <strong>upload do arquivo</strong> (até 20MB)</li>
                <li>Defina se requer <strong>login</strong> para download</li>
                <li>Marque como <strong>ativo</strong></li>
                <li>Clique em <strong>"Salvar"</strong></li>
            </ol>
        </div>
    </div>

    <!-- Section 11: Produtos -->
    <div class="card shadow mb-4" id="produtos">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-box me-2"></i>11. Produtos</h6>
        </div>
        <div class="card-body">
            <p>No menu <strong>Produtos</strong>, você gerencia o catálogo de produtos.</p>

            <h6 class="mt-2">Categorias de Produtos</h6>
            <p>Antes de cadastrar produtos, crie as categorias:</p>
            <ol>
                <li>Acesse <strong>Produtos > Categorias</strong></li>
                <li>Clique em <strong>"Nova Categoria"</strong></li>
                <li>Preencha nome e descrição</li>
                <li>Clique em <strong>"Salvar"</strong></li>
            </ol>

            <h6 class="mt-3">Cadastrando um Produto</h6>
            <ol>
                <li>Acesse <strong>Produtos > Novo Produto</strong></li>
                <li>Preencha nome, descrição, preço e categoria</li>
                <li>Faça upload da imagem principal</li>
                <li>Adicione imagens adicionais à galeria do produto</li>
                <li>Marque como <strong>destaque</strong> se desejar</li>
                <li>Ative o produto e clique em <strong>"Salvar"</strong></li>
            </ol>
        </div>
    </div>

    <!-- Section 12: Galerias -->
    <div class="card shadow mb-4" id="galerias">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-images me-2"></i>12. Galerias de Imagens</h6>
        </div>
        <div class="card-body">
            <p>No menu <strong>Galerias</strong>, você gerencia álbuns de fotos organizados por categorias.</p>

            <h6 class="mt-2">Categorias de Galerias</h6>
            <p>As galerias são organizadas por categorias. No site público, o visitante navega pelas categorias no menu e visualiza as galerias de cada uma.</p>
            <ol>
                <li>Acesse <strong>Galerias > Categorias</strong></li>
                <li>Clique em <strong>"Nova Categoria"</strong></li>
                <li>Preencha nome e descrição</li>
                <li>Clique em <strong>"Salvar"</strong></li>
            </ol>

            <h6 class="mt-3">Criando uma Galeria</h6>
            <ol>
                <li>Clique em <strong>"Nova Galeria"</strong></li>
                <li>Preencha o <strong>título</strong> da galeria</li>
                <li>Adicione uma <strong>descrição</strong></li>
                <li>Selecione a <strong>categoria</strong></li>
                <li>Clique em <strong>"Salvar"</strong></li>
            </ol>

            <h6 class="mt-3">Adicionando Imagens</h6>
            <ol>
                <li>Abra a galeria para edição</li>
                <li>Na seção de upload, selecione uma ou mais imagens (até 5MB cada)</li>
                <li>Após o upload, você pode adicionar <strong>legendas/descrições</strong> para cada imagem</li>
                <li>Reordene as imagens conforme necessário</li>
            </ol>
        </div>
    </div>

    <!-- Section 13: Páginas -->
    <div class="card shadow mb-4" id="paginas">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-file-earmark-text me-2"></i>13. Páginas Institucionais</h6>
        </div>
        <div class="card-body">
            <p>No menu <strong>Páginas</strong>, você gerencia as páginas institucionais do site (Sobre Nós, Missão, etc.).</p>
            <h6 class="mt-2">Como criar uma página:</h6>
            <ol>
                <li>Clique em <strong>"Nova Página"</strong></li>
                <li>Preencha o <strong>título</strong> da página</li>
                <li>O <strong>slug</strong> é gerado automaticamente (ex: <code>/sobre-nos</code>)</li>
                <li>Escreva o <strong>conteúdo</strong> no editor visual</li>
                <li>Configure os <strong>campos SEO</strong>:
                    <ul>
                        <li><strong>Título SEO</strong>: Aparece na aba do navegador e nos resultados do Google</li>
                        <li><strong>Meta Description</strong>: Descrição exibida nos resultados de busca</li>
                    </ul>
                </li>
                <li>Marque como <strong>ativa</strong> para publicar</li>
                <li>Clique em <strong>"Salvar"</strong></li>
            </ol>
            <div class="alert alert-info">
                <i class="bi bi-lightbulb me-1"></i>
                <strong>Dica:</strong> Páginas ativas aparecem automaticamente no menu de navegação do site público.
            </div>
        </div>
    </div>

    <!-- Section 14: Marketing -->
    <div class="card shadow mb-4" id="marketing">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-megaphone me-2"></i>14. Marketing</h6>
        </div>
        <div class="card-body">
            <p>A seção de <strong>Marketing</strong> oferece ferramentas para divulgar seu negócio e analisar visitantes.</p>

            <h6 class="mt-2"><i class="bi bi-graph-up me-1"></i>Análise de Visitantes</h6>
            <ul>
                <li><strong>Gráfico de acessos</strong>: Visualize o tráfego dos últimos 7 dias</li>
                <li><strong>Geolocalização</strong>: Veja de quais países e cidades os visitantes acessam seu site</li>
                <li><strong>Páginas mais visitadas</strong>: Descubra quais conteúdos atraem mais visitantes</li>
            </ul>

            <h6 class="mt-3"><i class="bi bi-image me-1"></i>Banners da Home</h6>
            <ul>
                <li>Gerencie os banners que aparecem na página inicial do site</li>
                <li>Faça upload de imagens de alta qualidade (recomendado: 1920x600px)</li>
                <li>Defina título, subtítulo e link de redirecionamento para cada banner</li>
                <li>Controle a ordem e o status (ativo/inativo) de cada banner</li>
            </ul>

            <h6 class="mt-3"><i class="bi bi-share me-1"></i>Promover Produtos e Serviços</h6>
            <ul>
                <li>Selecione um produto ou serviço específico</li>
                <li>Obtenha links diretos para compartilhamento</li>
                <li>Use os botões de WhatsApp, Facebook e LinkedIn para divulgar rapidamente</li>
            </ul>

            <h6 class="mt-3"><i class="bi bi-envelope-heart me-1"></i>Email Marketing</h6>
            <ul>
                <li>Redija um comunicado com assunto e corpo do e-mail</li>
                <li>Vincule um produto ou serviço para inclusão automática de imagem e link</li>
                <li>Ao enviar, todos os usuários cadastrados receberão a mensagem formatada</li>
            </ul>
        </div>
    </div>

    <!-- Section 15: Configurações -->
    <div class="card shadow mb-4" id="configuracoes">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-gear me-2"></i>15. Configurações do Sistema</h6>
        </div>
        <div class="card-body">
            <p>No menu <strong>Dados da Empresa</strong>, você gerencia as configurações globais do site:</p>

            <h6 class="mt-2">Dados da Empresa</h6>
            <ul>
                <li><strong>Nome da empresa</strong>: Exibido no cabeçalho e rodapé do site</li>
                <li><strong>CNPJ</strong>: Informação legal da empresa</li>
                <li><strong>Endereço</strong>: Exibido no rodapé e na página de contato</li>
                <li><strong>Telefone</strong>: Utilizado também para o botão flutuante do WhatsApp</li>
                <li><strong>E-mail</strong>: E-mail principal de contato</li>
            </ul>

            <h6 class="mt-3">Redes Sociais</h6>
            <ul>
                <li>Configure os links do <strong>Facebook</strong>, <strong>Instagram</strong>, <strong>LinkedIn</strong> e <strong>YouTube</strong></li>
                <li>Os ícones das redes sociais aparecem automaticamente no rodapé do site</li>
            </ul>

            <h6 class="mt-3">WhatsApp</h6>
            <ul>
                <li><strong>Ativar/Desativar</strong>: Controle a exibição do botão flutuante</li>
                <li><strong>Horário de funcionamento</strong>: Defina horário de início, término e pausa para almoço</li>
                <li><strong>Mensagem padrão</strong>: Texto pré-preenchido quando o visitante clica no botão</li>
            </ul>

            <h6 class="mt-3">SEO Global</h6>
            <ul>
                <li><strong>Título padrão</strong>: Título exibido nas abas do navegador</li>
                <li><strong>Palavras-chave</strong>: Termos para indexação global do site</li>
            </ul>

            <h6 class="mt-3">Scripts de Rastreamento</h6>
            <ul>
                <li>Insira códigos como <strong>Google Analytics</strong> ou <strong>Facebook Pixel</strong></li>
                <li>Os scripts são injetados automaticamente em todas as páginas</li>
            </ul>

            <h6 class="mt-3">Modo Manutenção</h6>
            <ul>
                <li>Ative para exibir uma página de "Em Manutenção" para visitantes</li>
                <li>Enquanto ativo, administradores continuam tendo acesso ao painel</li>
            </ul>
        </div>
    </div>

    <!-- Section 16: Perfil -->
    <div class="card shadow mb-4" id="perfil">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-person-circle me-2"></i>16. Perfil e Preferências</h6>
        </div>
        <div class="card-body">
            <h6 class="mt-2"><i class="bi bi-pencil me-1"></i>Editar Perfil</h6>
            <p>Em <strong>Configurações > Perfil</strong>, você pode alterar:</p>
            <ul>
                <li><strong>Nome</strong> completo</li>
                <li><strong>E-mail</strong></li>
                <li><strong>Avatar</strong> (foto de perfil)</li>
                <li><strong>Senha</strong> de acesso</li>
            </ul>

            <h6 class="mt-3"><i class="bi bi-sliders me-1"></i>Preferências</h6>
            <p>Em <strong>Configurações > Preferências</strong>, você pode personalizar:</p>
            <ul>
                <li><strong>Modo escuro</strong>: Ative/desative o tema escuro no painel administrativo</li>
                <li><strong>Notificações por e-mail</strong>: Controle o recebimento de notificações</li>
            </ul>
        </div>
    </div>

    <!-- Section 17: Notificações -->
    <div class="card shadow mb-4" id="notificacoes">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-bell me-2"></i>17. Notificações</h6>
        </div>
        <div class="card-body">
            <p>O sistema envia notificações automáticas para os administradores. Elas aparecem no ícone de sino na barra superior.</p>

            <h6 class="mt-2">Eventos que geram notificações:</h6>
            <ul>
                <li><strong>Novo usuário cadastrado</strong>: Quando alguém se registra no site</li>
                <li><strong>Nova mensagem de contato</strong>: Quando um visitante envia uma mensagem</li>
                <li><strong>Conteúdo criado/alterado</strong>: Quando páginas, galerias, notícias, produtos ou serviços são criados ou modificados</li>
            </ul>

            <h6 class="mt-3">Gerenciando notificações:</h6>
            <ul>
                <li>Clique no <strong>ícone de sino</strong> na barra superior para ver as notificações não lidas</li>
                <li>Clique em uma notificação para ser redirecionado ao conteúdo relacionado</li>
                <li>Clique em <strong>"Marcar todas como lidas"</strong> para limpar a lista</li>
            </ul>
        </div>
    </div>

    <!-- Section 18: Dicas -->
    <div class="card shadow mb-4" id="dicas">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><i class="bi bi-stars me-2"></i>18. Dicas e Boas Práticas</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h6 class="mt-2"><i class="bi bi-search me-1"></i>SEO</h6>
                    <ul>
                        <li>Sempre preencha os campos de <strong>Título SEO</strong> e <strong>Meta Description</strong> em páginas e notícias</li>
                        <li>Use palavras-chave relevantes no conteúdo</li>
                        <li>Mantenha os slugs curtos e descritivos</li>
                        <li>Utilize imagens com textos alternativos</li>
                    </ul>

                    <h6 class="mt-3"><i class="bi bi-image me-1"></i>Imagens</h6>
                    <ul>
                        <li>Use imagens otimizadas para web (formato WebP ou JPEG comprimido)</li>
                        <li>Banners: resolução recomendada de <strong>1920x600px</strong></li>
                        <li>Imagens de galeria: limite de <strong>5MB</strong> por arquivo</li>
                        <li>Downloads: limite de <strong>20MB</strong> por arquivo</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h6 class="mt-2"><i class="bi bi-shield-check me-1"></i>Segurança</h6>
                    <ul>
                        <li>Altere a senha padrão após o primeiro acesso</li>
                        <li>Use senhas fortes com letras, números e caracteres especiais</li>
                        <li>Revise periodicamente as permissões dos usuários</li>
                        <li>Desative usuários que não precisam mais de acesso</li>
                    </ul>

                    <h6 class="mt-3"><i class="bi bi-clock-history me-1"></i>Manutenção</h6>
                    <ul>
                        <li>Ative o <strong>Modo Manutenção</strong> antes de fazer grandes alterações</li>
                        <li>Revise periodicamente as mensagens de contato</li>
                        <li>Mantenha o FAQ atualizado para reduzir chamados de suporte</li>
                        <li>Verifique os dados da empresa periodicamente</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Back to top -->
    <div class="text-center mb-4">
        <a href="#" class="btn btn-primary btn-sm">
            <i class="bi bi-arrow-up me-1"></i>Voltar ao topo
        </a>
    </div>

</div>
@endsection