{{--
    @intent Conteúdo do manual do Editor Estrutural (incluído dentro do modal de ajuda).
    @vars Nenhuma — standalone, incluso via @include.
--}}

<h4 class="text-primary mb-3">Visão Geral</h4>
<p>
    O <strong>Editor Estrutural</strong> permite que a equipe de suporte personalize a estrutura do portal
    adicionando blocos de código personalizados em áreas estratégicas da página. Cada bloco aceita
    <strong>HTML, Blade, PHP, CSS e JavaScript</strong>, dando flexibilidade total para ajustar o layout,
    inserir componentes, ou injetar estilos e scripts.
</p>
<div class="alert alert-info">
    <i class="bi bi-info-circle-fill me-2"></i>
    <strong>Dica:</strong> Os blocos são processados como templates Blade. Isso significa que você pode
    usar diretivas Blade (<code>&#64;if</code>, <code>&#64;foreach</code>, <code>&#64;include</code>, etc.)
    e acessar variáveis do sistema.
</div>

<h4 class="text-primary mb-3 mt-4">Áreas Disponíveis</h4>
<p>Existem <strong>5 áreas</strong> onde os blocos podem ser inseridos. Cada área é processada em um ponto específico da página:</p>
<div class="table-responsive">
    <table class="table table-sm table-bordered" aria-label="Documentação">
        <thead class="table-light">
            <tr>
                <th>Área</th>
                <th>Posição no Portal</th>
                <th>Uso Típico</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>Header</strong></td>
                <td>Antes ou dentro do <code>&lt;header&gt;</code></td>
                <td>Barra superior, menu secundário, banner de topo</td>
            </tr>
            <tr>
                <td><strong>Main</strong></td>
                <td>Conteúdo extra entre header e footer</td>
                <td>Seções promocionais, chamadas para ação, destaques</td>
            </tr>
            <tr>
                <td><strong>Footer</strong></td>
                <td>Antes ou dentro do <code>&lt;footer&gt;</code></td>
                <td>Rodapé extra, newsletter, links adicionais</td>
            </tr>
            <tr>
                <td><strong>CSS Head</strong></td>
                <td>Após SEO no <code>&lt;head&gt;</code></td>
                <td>Estilos CSS customizados, fontes, meta tags adicionais</td>
            </tr>
            <tr>
                <td><strong>JS Foot</strong></td>
                <td>Antes do <code>&lt;/body&gt;</code></td>
                <td>Scripts JavaScript, analytics, widgets externos</td>
            </tr>
        </tbody>
    </table>
</div>

<h4 class="text-primary mb-3 mt-4">Componentes do Sistema</h4>
<p>
    O helper <code>&#123;!! sle_component('nome') !!&#125;</code> permite reutilizar componentes nativos do portal
    dentro dos seus blocos. Use <strong>sempre</strong> <code>&#123;!! !!&#125;</code> (não escapado) para que o HTML
    do componente seja renderizado corretamente.
</p>
<div class="table-responsive">
    <table class="table table-sm table-bordered" aria-label="Documentação">
        <thead class="table-light">
            <tr>
                <th>Componente</th>
                <th>View</th>
                <th>Descrição</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>header-logo</code></td>
                <td><code>v2-portal::header.header-logo</code></td>
                <td>Logo do header (com variante de alto contraste)</td>
            </tr>
            <tr>
                <td><code>header-nav</code></td>
                <td><code>v2-portal::header.header-nav</code></td>
                <td>Menu de navegação principal (até 3 níveis)</td>
            </tr>
            <tr>
                <td><code>header-search</code></td>
                <td><code>v2-portal::header.header-search-area</code></td>
                <td>Toggle de busca global</td>
            </tr>
            <tr>
                <td><code>header-accessibility</code></td>
                <td><code>v2-portal::header.header-accessibility</code></td>
                <td>Barra de acessibilidade eMAG</td>
            </tr>
            <tr>
                <td><code>footer-services</code></td>
                <td><code>v2-portal::footer.footer-services-area</code></td>
                <td>Grid de links do rodapé</td>
            </tr>
            <tr>
                <td><code>footer-logo</code></td>
                <td><code>v2-portal::footer.footer-logo</code></td>
                <td>Logos institucionais no rodapé</td>
            </tr>
            <tr>
                <td><code>footer-contact</code></td>
                <td><code>v2-portal::footer.footer-public-contact</code></td>
                <td>Bloco de contato (endereço, telefone, email)</td>
            </tr>
            <tr>
                <td><code>footer-social</code></td>
                <td><code>v2-portal::footer.footer-social-network</code></td>
                <td>Ícones de redes sociais</td>
            </tr>
            <tr>
                <td><code>footer-lai</code></td>
                <td><code>v2-portal::footer.footer-transparencia-lai</code></td>
                <td>Painel de Transparência (LAI)</td>
            </tr>
            <tr>
                <td><code>global-banner</code></td>
                <td><code>v2-portal::base-struct.global-banner</code></td>
                <td>Banner de comunicado global</td>
            </tr>
            <tr>
                <td><code>vlibras</code></td>
                <td><code>v2-portal::base-struct.vlibras</code></td>
                <td>Widget VLibras (LIBRAS)</td>
            </tr>
        </tbody>
    </table>
</div>

<h4 class="text-primary mb-3 mt-4">Variáveis Disponíveis</h4>
<p>As seguintes variáveis estão disponíveis dentro dos blocos durante a renderização:</p>
<div class="table-responsive">
    <table class="table table-sm table-bordered" aria-label="Documentação">
        <thead class="table-light">
            <tr>
                <th>Variável</th>
                <th>Tipo</th>
                <th>Descrição</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>$siteTitle</code></td>
                <td>string</td>
                <td>Título do site configurado no portal</td>
            </tr>
            <tr>
                <td><code>$portalTheme</code></td>
                <td>array</td>
                <td>Configurações do tema do portal (cores, logo, etc.)</td>
            </tr>
            <tr>
                <td><code>$layoutConfigs</code></td>
                <td>collection</td>
                <td>Configurações do Layout Base (modelo key/value)</td>
            </tr>
            <tr>
                <td><code>$contato</code></td>
                <td>array</td>
                <td>Dados de contato (endereço, telefone, email, horário)</td>
            </tr>
            <tr>
                <td><code>$headerLinks</code></td>
                <td>array</td>
                <td>Links configurados para o header do portal</td>
            </tr>
            <tr>
                <td><code>$footerLinks</code></td>
                <td>array</td>
                <td>Links configurados para o footer do portal</td>
            </tr>
            <tr>
                <td><code>$redes</code></td>
                <td>array</td>
                <td>Links de redes sociais (Facebook, YouTube, etc.)</td>
            </tr>
            <tr>
                <td><code>$logos</code></td>
                <td>array</td>
                <td>Logos institucionais (principal, negativo, alto contraste)</td>
            </tr>
            <tr>
                <td><code>$request</code></td>
                <td>Request</td>
                <td>Objeto de requisição HTTP atual do Laravel</td>
            </tr>
        </tbody>
    </table>
</div>

<h4 class="text-primary mb-3 mt-4">Sintaxe Blade Suportada</h4>
<p>Os blocos são compilados pelo motor Blade do Laravel. As seguintes diretivas são suportadas:</p>
<div class="table-responsive">
    <table class="table table-sm table-bordered" aria-label="Documentação">
        <thead class="table-light">
            <tr>
                <th>Diretiva</th>
                <th>Uso</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>&#64;if / &#64;elseif / &#64;else / &#64;endif</code></td>
                <td>Condicionais</td>
            </tr>
            <tr>
                <td><code>&#64;foreach / &#64;endforeach</code></td>
                <td>Laços de repetição</td>
            </tr>
            <tr>
                <td><code>&#64;php / &#64;endphp</code></td>
                <td>Bloco de código PHP puro</td>
            </tr>
            <tr>
                <td><code>@{{ $var }}</code></td>
                <td>Saída escapada (HTML seguro)</td>
            </tr>
            <tr>
                <td><code>&#123;!! $html !!&#125;</code></td>
                <td>Saída não-escapada (HTML bruto)</td>
            </tr>
            <tr>
                <td><code>&#64;include('view.name')</code></td>
                <td>Inclusão de outra view</td>
            </tr>
            <tr>
                <td><code>&#64;extends / &#64;yield / &#64;section</code></td>
                <td>Herança de templates</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="alert alert-warning mt-2">
    <i class="bi bi-exclamation-triangle-fill me-2"></i>
    <strong>Atenção:</strong> A diretiva <code>&#64;extends</code> dentro de um bloco pode causar
    conflitos com o layout principal do portal. Use-a com cuidado e apenas se souber exatamente
    o que está fazendo.
</div>

<h4 class="text-primary mb-3 mt-4">Segurança</h4>
<p>Siga estas recomendações para manter o portal seguro:</p>
<ul>
    <li><strong>XSS (Cross-Site Scripting):</strong> Sempre use <code>@{{ $var }}</code> (escapado) para dados que vêm de fontes externas ou do banco de dados. Use <code>&#123;!! $var !!&#125;</code> apenas para HTML confiável ou componentes do sistema.</li>
    <li><strong>Não use <code>eval()</code>:</strong> A função <code>eval()</code> é extremamente perigosa e não deve ser utilizada em nenhuma circunstância.</li>
    <li><strong>Teste antes de salvar:</strong> Sempre revise e teste seus blocos em um ambiente de homologação antes de aplicar em produção.</li>
    <li><strong>Use <code>sle_component()</code>:</strong> Para saída confiável de componentes do sistema, sempre utilize o helper <code>&#123;!! sle_component('nome') !!&#125;</code> com <code>&#123;!! !!&#125;</code>.</li>
</ul>

<h4 class="text-primary mb-3 mt-4">Boas Práticas</h4>
<ul>
    <li><strong>Mantenha os blocos pequenos e focados:</strong> Um bloco por funcionalidade. Não coloque tudo em um único bloco.</li>
    <li><strong>Use a área CSS Head para estilos:</strong> Coloque todo o CSS customizado na área <code>css_head</code> para manter a organização e o carregamento adequado.</li>
    <li><strong>Use a área JS Foot para scripts:</strong> Coloque todo o JavaScript na área <code>js_foot</code>, antes do fechamento do <code>&lt;/body&gt;</code>.</li>
    <li><strong>Teste em staging primeiro:</strong> Sempre valide as alterações em ambiente de homologação antes de publicar em produção.</li>
    <li><strong>Documente seus blocos:</strong> Use o campo <strong>"Nome do bloco"</strong> para identificar claramente a finalidade de cada bloco.</li>
</ul>

<h4 class="text-primary mb-3 mt-4">Exemplos</h4>

<h5 class="mt-3">1. Barra superior com saudação e data</h5>
<p>Insira este código na área <strong>Header</strong> para adicionar uma barra informativa acima do header principal.</p>
<pre class="bg-dark text-light p-3 rounded" style="font-size: var(--text-sm);"><code>@verbatim&lt;div class="top-bar bg-gradient py-2"&gt;
    &lt;div class="container"&gt;
        &lt;div class="d-flex justify-content-between align-items-center"&gt;
            &lt;span class="text-white small"&gt;
                &lt;i class="bi bi-clock me-1"&gt;&lt;/i&gt;
                {{ date('d/m/Y') }} — Bem-vindo ao {{ $siteTitle }}
            &lt;/span&gt;
            &lt;div&gt;
                &lt;a href="/acessibilidade" class="text-white small me-3"&gt;Acessibilidade&lt;/a&gt;
                &lt;a href="/mapa-do-site" class="text-white small"&gt;Mapa do Site&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;@endverbatim</code></pre>

<h5 class="mt-3">2. Seção CTA no Footer</h5>
<p>Insira este código na área <strong>Footer</strong> para criar uma chamada para ação antes do rodapé.</p>
<pre class="bg-dark text-light p-3 rounded" style="font-size: var(--text-sm);"><code>&lt;section class="bg-primary text-white py-5 mt-5"&gt;
    &lt;div class="container text-center"&gt;
        &lt;h2 class="fw-bold mb-3"&gt;Fale Conosco&lt;/h2&gt;
        &lt;p class="lead mb-4"&gt;Estamos prontos para atender você. Entre em contato pelos nossos canais oficiais.&lt;/p&gt;
        &lt;a href="/fale-conosco" class="btn btn-light btn-lg px-5 fw-bold"&gt;
            &lt;i class="bi bi-envelope me-2"&gt;&lt;/i&gt;Abrir Chamado
        &lt;/a&gt;
    &lt;/div&gt;
&lt;/section&gt;

&lt;hr class="my-0"&gt;</code></pre>

<h5 class="mt-3">3. Header personalizado usando componentes do sistema</h5>
<p>Insira este código na área <strong>Header</strong> para recriar e customizar o header usando componentes nativos.</p>
<pre class="bg-dark text-light p-3 rounded" style="font-size: var(--text-sm);"><code>@verbatim&lt;header class="site-header"&gt;
    &lt;div class="container"&gt;
        &lt;div class="d-flex align-items-center justify-content-between py-3"&gt;
            {!! sle_component('header-logo') !!}
            &lt;div class="d-flex align-items-center gap-3"&gt;
                {!! sle_component('header-search') !!}
                {!! sle_component('header-accessibility') !!}
            &lt;/div&gt;
        &lt;/div&gt;
        {!! sle_component('header-nav') !!}
    &lt;/div&gt;
&lt;/header&gt;@endverbatim</code></pre>

<div class="alert alert-info mt-4">
    <i class="bi bi-lightbulb-fill me-2"></i>
    <strong>Lembre-se:</strong> Você pode combinar componentes nativos (<code>sle_component()</code>) com
    HTML personalizado para criar layouts totalmente customizados. O céu é o limite!
</div>