{% extends "layouts/dashboard.twig" %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">{{ title }}</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}">{{ __('dashboard.title') }}</a></li>
        <li class="breadcrumb-item active">SEO</li>
    </ol>

    {% include '@seo/admin/nav.twig' ignore missing %}

    <div class="row">
        <div class="col-lg-3 d-none d-lg-block">
            <div class="list-group sticky-top" style="top: 100px; z-index: 1;">
                <a href="#visao-geral" class="list-group-item list-group-item-action">Visão Geral</a>
                <a href="#meta-tags" class="list-group-item list-group-item-action">Tags Meta</a>
                <a href="#redes-sociais" class="list-group-item list-group-item-action">Redes Sociais</a>
                <a href="#sitemap" class="list-group-item list-group-item-action">Sitemap XML</a>
                <a href="#redirecionamentos" class="list-group-item list-group-item-action">Redirecionamentos</a>
                <a href="#ia-seo" class="list-group-item list-group-item-action">IA de SEO</a>
            </div>
        </div>
        
        <div class="col-lg-9">
            <!-- Visão Geral -->
            <div class="card shadow mb-4" id="visao-geral">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">1. Visão Geral</h6>
                </div>
                <div class="card-body">
                    <p>O módulo de <strong>SEO (Search Engine Optimization)</strong> centraliza as configurações que ajudam o seu site a ser encontrado e bem posicionado no Google e outros buscadores.</p>
                </div>
            </div>

            <!-- Meta Tags -->
            <div class="card shadow mb-4" id="meta-tags">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">2. Tags Meta (Geral)</h6>
                </div>
                <div class="card-body">
                    <ul>
                        <li><strong>Título Meta:</strong> O título que aparece no Google. Ideal entre 50-60 caracteres.</li>
                        <li><strong>Descrição Meta:</strong> O resumo do site nos buscadores. Ideal até 160 caracteres.</li>
                        <li><strong>Palavras-chave:</strong> Termos que descrevem seu negócio.</li>
                    </ul>
                </div>
            </div>

            <!-- Sitemap -->
            <div class="card shadow mb-4" id="sitemap">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">3. Sitemap XML</h6>
                </div>
                <div class="card-body">
                    <p>O Sitemap é o "mapa" do seu site para os buscadores. Aqui você define quais módulos (Blog, Notícias, Guia) devem ser indexados e qual a frequência de atualização de cada um.</p>
                </div>
            </div>

            <!-- Redirecionamentos -->
            <div class="card shadow mb-4" id="redirecionamentos">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">4. Redirecionamentos (301/302)</h6>
                </div>
                <div class="card-body">
                    <p>Use esta ferramenta para redirecionar URLs antigas que não existem mais para novas páginas, evitando o erro 404 e mantendo a autoridade do link.</p>
                </div>
            </div>

            <!-- IA de SEO -->
            <div class="card shadow mb-4" id="ia-seo">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">5. IA de SEO</h6>
                </div>
                <div class="card-body">
                    <p>O botão <strong>"Gerar com IA"</strong> analisa todo o conteúdo do seu site localmente e sugere automaticamente as melhores Tags Meta e a estrutura do arquivo Robots.txt.</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}