@component('v2-cms::components.box', ['title' => 'SEO e Injeção de Scripts'])
    <p class="text-muted mb-4">
        Configure integrações de marketing, analytics e verificadores de SEO (Google Tag Manager, Pixel do Facebook).
        Estes dados são injetados automaticamente no <code>&lt;head&gt;</code> de todas as páginas do portal através do
        <strong>SEOService</strong> (v2-service-seo).
    </p>

    {{-- ═══════════════════════════════════════════════════════
         AVISO
         ═══════════════════════════════════════════════════════ --}}
    <div class="alert alert-warning d-flex gap-3 p-3 mb-4 border-0 shadow-sm" role="alert">
        <i class="bi bi-exclamation-triangle-fill fs-4 flex-shrink-0" aria-hidden="true"></i>
        <div>
            <h4 class="alert-heading h6 fw-bold mb-1">Atenção</h4>
            <p class="mb-0 small text-secondary">
                A injeção de scripts não validados nesta área pode quebrar o layout do portal.
                Sempre utilize o modo de visualização para testar.
            </p>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════
         SEÇÃO 1 — MECANISMOS DE BUSCA
         ═══════════════════════════════════════════════════════ --}}
    <fieldset class="mb-4 pb-3 border-bottom">
        <legend class="h5 fw-bold text-dark mb-3 w-100 d-flex align-items-center gap-2">
            <i class="bi bi-search-heart text-primary" aria-hidden="true"></i> Mecanismos de Busca
        </legend>

        <div class="mb-3">
            <label class="form-label fw-bold" for="google_analytics_id">Google Analytics ID (G-Tag)</label>
            <div class="input-group">
                <span class="input-group-text bg-white" aria-hidden="true">G-</span>
                <input type="text" name="google_analytics_id" id="google_analytics_id" class="form-control"
                       placeholder="XXXXXXXXXX" value="{{ $configs['google_analytics_id'] ?? '' }}"
                       aria-describedby="gaHelp">
            </div>
            <div class="form-text mt-1" id="gaHelp">
                Apenas o ID da Tag (Global Site Tag). Ex: <code>G-12345678</code>. Será carregado em <code>gtag.blade.php</code>.
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label fw-bold" for="palavras_chaves">Palavras-Chave Globais (Meta Keywords)</label>
            <input type="text" name="palavras_chaves" id="palavras_chaves" class="form-control"
                   placeholder="loteria, transparência, governo, licitações, resultados"
                   value="{{ $configs['palavras_chaves'] ?? '' }}"
                   aria-describedby="keywordsHelp">
            <div class="form-text mt-1" id="keywordsHelp">
                Palavras-chave separadas por vírgula. Serão inseridas na meta tag <code>keywords</code> de todas as páginas.
            </div>
        </div>

        <div class="mb-0">
            <label class="form-label fw-bold" for="global_meta_tokens">Tokens Globais de Metadados (Verification)</label>
            <textarea name="global_meta_tokens" id="global_meta_tokens" rows="3" class="form-control font-monospace small"
                      placeholder="&lt;meta name='google-site-verification' content='...'&gt;"
                      aria-describedby="tokensHelp">{{ $configs['global_meta_tokens'] ?? '' }}</textarea>
            <div class="form-text mt-1" id="tokensHelp">
                Utilizado para verificação de propriedade no Google Search Console, Bing Webmaster, etc.
            </div>
        </div>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════
         SEÇÃO 2 — INJEÇÃO DE SCRIPTS
         ═══════════════════════════════════════════════════════ --}}
    <fieldset class="mb-4">
        <legend class="h5 fw-bold text-dark mb-3 w-100 d-flex align-items-center gap-2">
            <i class="bi bi-code-slash text-success" aria-hidden="true"></i> Injeção de Scripts Customizados
        </legend>

        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label fw-bold" for="header_scripts">Scripts no Cabeçalho (<code>&lt;head&gt;</code>)</label>
                <textarea name="header_scripts" id="header_scripts" rows="6" class="form-control font-monospace small"
                          placeholder="&lt;!-- Google Tag Manager --&gt;"
                          aria-describedby="headerHelp">{{ $configs['header_scripts'] ?? '' }}</textarea>
                <div class="form-text mt-1" id="headerHelp">
                    Injetado dentro da tag <code>&lt;head&gt;</code> via <code>metaheader.blade.php</code>.
                    Útil para CSS customizado, Google Tag Manager, fontes externas.
                </div>
            </div>
            <div class="col-md-6">
                <label class="form-label fw-bold" for="footer_scripts">Scripts no Rodapé (antes do <code>&lt;/body&gt;</code>)</label>
                <textarea name="footer_scripts" id="footer_scripts" rows="6" class="form-control font-monospace small"
                          placeholder="&lt;!-- Scripts de performance --&gt;"
                          aria-describedby="footerHelp">{{ $configs['footer_scripts'] ?? '' }}</textarea>
                <div class="form-text mt-1" id="footerHelp">
                    Injetado antes do fechamento <code>&lt;/body&gt;</code> via <code>metafooter.blade.php</code>.
                    Recomendado para scripts que não devem bloquear o carregamento principal.
                </div>
            </div>
        </div>
    </fieldset>

    @slot('footer')
        <div class="d-flex justify-content-end">
            <button type="submit" class="btn btn-primary fw-bold px-3 d-inline-flex align-items-center gap-1">
                <i class="bi bi-save" aria-hidden="true"></i> Salvar Configurações de SEO
            </button>
        </div>
    @endslot
@endcomponent