<?php
// /admin/manual.php
require 'db.php';

// 🛡️ BLOQUEIO DE SEGURANÇA: Só permite visualizar se estiver logado
if (!isset($_SESSION['admin_logado'])) {
    header("Location: login.php");
    exit;
}

// O nome da página para marcar como 'active' na sidebar
$pagina_atual = 'manual.php';

// 👻 ARMA ANTI-FANTASMA DO CLOUDFLARE (Cache Busting)
// Essa função adiciona a data exata da modificação do arquivo no final da URL.
// Se você trocar a imagem no cPanel, a URL muda e o Cloudflare é obrigado a baixar a nova.
function getImagemComCache($caminho) {
    if (file_exists($caminho)) {
        return $caminho . '?v=' . filemtime($caminho);
    }
    return $caminho . '?v=' . time();
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manual de Operação | VoxCore CMS 2.3</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="admin.css">
    <style>
        :root {
            --primary-manual: #059669; /* Verde para diferenciar das edições */
            --bg-card: #ffffff;
        }
        .manual-header {
            background-color: #064e3b;
            color: white;
            padding: 2rem;
            border-radius: 12px;
            margin-bottom: 2rem;
            text-align: center;
        }
        .step-box {
            background: var(--bg-card);
            border-left: 5px solid var(--primary-manual);
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            margin-bottom: 3rem;
        }
        .step-number {
            background: var(--primary-manual);
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: bold;
            text-transform: uppercase;
        }
        .manual-img {
            width: 100%;
            max-width: 800px;
            height: auto;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            margin: 1.5rem 0;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .box-welcome {
            background-color: #ecfdf5;
            border: 1px solid #a7f3d0;
            color: #065f46;
            padding: 1.5rem;
            border-radius: 8px;
            margin-bottom: 2rem;
        }
        .step-box ul {
            margin-top: 15px;
            color: #334155;
        }
        .step-box li {
            margin-bottom: 8px;
        }
    </style>

    <?php 
        // No admin, o caminho volta uma pasta para achar a imagem na raiz /img/
        $stmt_fav_adm = $pdo->query("SELECT valor FROM configs WHERE chave = 'favicon_admin'");
        $fav_adm_path = $stmt_fav_adm->fetchColumn() ?: 'img/favicon_admin.png';
    ?>
    
    <link rel="icon" href="../<?= $fav_adm_path ?>?v=<?= time() ?>" type="image/png">

</head>
<body>

<div class="d-flex">
    <?php include 'sidebar.php'; ?>

    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content pt-4">
        
        <div class="manual-header">
            <h1 class="h2"><i class="fas fa-book-open"></i> Manual de Operação VoxCore</h1>
            <p class="mb-0">Guia oficial para gestão de conteúdos, identidade e segurança</p>
        </div>

        <div class="box-welcome">
            <h5><i class="fas fa-info-circle"></i> Bem-vindo Manual de Operação do VoxCore CMS 2.3!</h5>
            <p class="mb-0">Este manual foi criado para ajudar você e sua equipe a manter o site atualizado. Utilize o menu lateral à esquerda para navegar entre os módulos enquanto consulta estas instruções.</p>
        </div>

        <div class="step-box">
            <span class="step-number">Módulo 1</span>
            <h3 class="mt-2">Dashboard & Segurança</h3>
            <p>O <strong>Início</strong> é a sua central de comando. No final do menu lateral, encontrará a opção <strong>Alterar Senha</strong>. Mantenha os seus acessos sempre protegidos.</p>
            <img src="<?= getImagemComCache('../img/manual/01.png') ?>" class="manual-img" alt="Tutorial Dashboard">
        </div>

        <div class="step-box">
            <span class="step-number">Módulo 2</span>
            <h3 class="mt-2">Configurações Globais & Cores</h3>
            <p>Gerencie as suas redes sociais, contatos e a <strong>identidade visual</strong> do site. Você tem controle total sobre as <strong>Cores do Cabeçalho</strong>:</p>
            <ul>
                <li><strong>Barra de Fundo:</strong> Escolha a cor do topo do site. O fundo da sua logomarca no painel mudará em tempo real para você testar a legibilidade!</li>
                <li><strong>Fonte do Menu:</strong> Escolha a cor dos links (Início, Biografia, etc).</li>
                <li><strong>Botão de Destaque:</strong> Define a cor do botão especial de ação no menu.</li>
            </ul>
            <img src="<?= getImagemComCache('../img/manual/02.png') ?>" class="manual-img" alt="Tutorial Configurações">
        </div>

        <div class="step-box">
            <span class="step-number">Módulo 3</span>
            <h3 class="mt-2">Imagens de Fundo (Página Inicial)</h3>
            <p>Altere os papéis de parede do site sem depender de suporte técnico. Envie a foto na área de Configurações Gerais:</p>
            <ul>
                <li><strong>Imagem Desktop:</strong> Exibida em computadores. O sistema alinha a foto pelo topo automaticamente, garantindo que a sua cabeça não seja cortada.</li>
                <li><strong>Imagem Mobile:</strong> Você pode enviar uma versão vertical separada, garantindo o enquadramento perfeito na tela dos celulares.</li>
            </ul>
            <img src="<?= getImagemComCache('../img/manual/03.png') ?>" class="manual-img" alt="Tutorial Imagem Home">
        </div>

        <div class="step-box">
            <span class="step-number">Módulo 4</span>
            <h3 class="mt-2">Biografia Oficial</h3>
            <p>Utilize o editor de texto rico para formatar a história do artista. O sistema salva e publica as alterações automaticamente.</p>
            <img src="<?= getImagemComCache('../img/manual/04.png') ?>" class="manual-img" alt="Tutorial Biografia">
        </div>

        <div class="step-box">
            <span class="step-number">Módulo 5</span>
            <h3 class="mt-2">Galeria, Mídias & Títulos Personalizados</h3>
            <p>Aqui você faz o upload dos <strong>Voice Reels (MP3)</strong>, do <strong>Vídeo de Destaque</strong> e organiza os <strong>Cards Visuais</strong>. Agora o site adapta-se à sua profissão: você pode alterar os <strong>Títulos das Seções</strong> diretamente no topo da página (ex: trocar "Voice Reel" por "Minhas Demos" ou "Cinema" por "Videoclipes").</p>
            <img src="<?= getImagemComCache('../img/manual/05.png') ?>" class="manual-img" alt="Tutorial Galeria">
        </div>

        <div class="step-box">
            <span class="step-number">Módulo 6</span>
            <h3 class="mt-2">O Portfólio Mágico</h3>
            <p>Cole listas brutas na caixa da esquerda, clique em "Limpar e Formatar" e publique o resultado na caixa da direita. O <strong>Título da Página de Portfólio</strong> pode ser alterado livremente na aba de Configurações Gerais.</p>
            <img src="<?= getImagemComCache('../img/manual/06.png') ?>" class="manual-img" alt="Tutorial Portfólio">
        </div>

        <div class="step-box">
            <span class="step-number">Módulo 7</span>
            <h3 class="mt-2">Perguntas Frequentes (FAQ)</h3>
            <p>Cadastre e edite as dúvidas comuns dos fãs e contratantes de forma simples. Elas aparecerão automaticamente na sua página de Contato.</p>
            <img src="<?= getImagemComCache('../img/manual/07.png') ?>" class="manual-img" alt="Tutorial FAQ">
        </div>

        <div class="step-box" style="margin-bottom: 5rem;">
            <span class="step-number">Módulo 8</span>
            <h3 class="mt-2">Servidor de E-mail (Sistema Anti-SPAM)</h3>
            <p>Para garantir que 100% das mensagens enviadas pelo formulário cheguem até você, o VoxCore utiliza um sistema de envio SMTP Autenticado profissional.</p>
            <ul>
                <li>Acesse <strong>Configurações Gerais</strong> > Servidor de E-mail (SMTP).</li>
                <li>Preencha o <strong>Host</strong> (ex: smtp.hostinger.com), <strong>Porta</strong> (465 ou 587), <strong>Usuário</strong> e <strong>Senha</strong> fornecidos pela sua empresa de hospedagem.</li>
                <li>Defina na mesma tela o seu <strong>E-mail Principal</strong> (quem recebe a mensagem oficial) e o <strong>E-mail CC</strong> (uma cópia secundária para a sua agência ou assessor).</li>
            </ul>
            <img src="<?= getImagemComCache('../img/manual/08.png') ?>" class="manual-img" alt="Tutorial SMTP">
        </div>

    </main>
</div>

<?php include 'footer_admin.php'; ?>
</body>
</html>