@component('v2-cms::components.box', ['title' => 'Metadados Institucionais'])
    <p class="text-muted mb-4">
        Informações vitais lidas por mecanismos de busca (Google, Bing) e utilizadas nos termos de aceite de privacidade,
        compartilhamento em redes sociais (Open Graph) e conformidade legal.
        Estes metadados são <strong>disseminados globalmente</strong> por todo o portal através do <code>SEOService</code>.
    </p>

    {{-- ═══════════════════════════════════════════════════════
         INFO — DISSEMINAÇÃO
         ═══════════════════════════════════════════════════════ --}}
    <div class="alert alert-info d-flex gap-3 p-3 mb-4 border-0 shadow-sm" role="alert">
        <i class="bi bi-diagram-3 fs-4 flex-shrink-0" aria-hidden="true"></i>
        <div>
            <h4 class="alert-heading h6 fw-bold mb-1">Como estes dados se disseminam?</h4>
            <p class="mb-2 small text-secondary">
                <strong>Cadeia de disseminação:</strong><br>
                <code>v2_portal_configs</code> → <code>PortalConfigsService</code> →
                <code>resources/V2/portal/metadata/</code> → <code>base.blade.php</code> →
                <strong>Todas as páginas do portal</strong>
            </p>
            <ul class="mb-0 small text-secondary ps-3">
                <li><code>titulo_site</code> → Aba do navegador, Google SERP, <code>og:title</code></li>
                <li><code>descricao</code> → Snippet nos resultados de busca, <code>og:description</code></li>
                <li><code>palavras_chaves</code> → Meta tag <code>keywords</code></li>
                <li><code>categoria_governo</code> → Classificação interna e futura integração</li>
                <li><code>cnpj_orgao</code> → Rodapés, termos de privacidade e documentos fiscais</li>
            </ul>
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════
         SEÇÃO 1 — IDENTIFICAÇÃO DO ÓRGÃO
         ═══════════════════════════════════════════════════════ --}}
    <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-building text-primary" aria-hidden="true"></i> Identificação do Órgão
        </legend>

        <div class="mb-3">
            <label class="form-label fw-bold" for="titulo_site">Título Oficial do Site (Nome da Instituição)</label>
            <div class="input-group">
                <span class="input-group-text bg-white" aria-hidden="true">
                    <i class="bi bi-globe"></i>
                </span>
                <input type="text" name="titulo_site" id="titulo_site" class="form-control"
                       placeholder="Loteria do Estado da Paraíba" value="{{ $configs['titulo_site'] ?? '' }}"
                       aria-describedby="tituloHelp">
            </div>
            <div class="form-text mt-1 d-flex align-items-center gap-1" id="tituloHelp">
                Aparece na barra do navegador (tag <code>&lt;title&gt;</code>) e no <code>og:title</code> do Open Graph.
            </div>
        </div>

        <div class="mb-0">
            <label class="form-label fw-bold" for="descricao">Descrição do Órgão (Meta Description Global)</label>
            <textarea name="descricao" id="descricao" rows="3" class="form-control"
                      placeholder="Portal oficial da Loteria do Estado da Paraíba, focado em transparência e resultados de sorteios."
                      aria-describedby="descHelp" maxlength="160">{{ $configs['descricao'] ?? '' }}</textarea>
            <div class="form-text mt-1 d-flex align-items-center gap-1" id="descHelp">
                Entre 120 e 160 caracteres é o ideal para SEO. Esta descrição aparece como snippet nos resultados do Google
                e como <code>og:description</code> no compartilhamento em redes sociais.
            </div>
        </div>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════
         SEÇÃO 2 — CLASSIFICAÇÃO GOVERNAMENTAL
         ═══════════════════════════════════════════════════════ --}}
    <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-tags text-success" aria-hidden="true"></i> Classificação Governamental
        </legend>

        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label fw-bold" for="categoria_governo">Categoria Governamental</label>
                <select name="categoria_governo" id="categoria_governo" class="form-select"
                        aria-describedby="catHelp">
                    <option value="prefeitura" {{ ($configs['categoria_governo'] ?? '') == 'prefeitura' ? 'selected' : '' }}>Prefeitura (Poder Executivo)</option>
                    <option value="camara" {{ ($configs['categoria_governo'] ?? '') == 'camara' ? 'selected' : '' }}>Câmara Municipal (Poder Legislativo)</option>
                    <option value="autarquia" {{ ($configs['categoria_governo'] ?? '') == 'autarquia' ? 'selected' : '' }}>Autarquia ou Instituto Independente</option>
                    <option value="sociedade-economia-mista" {{ ($configs['categoria_governo'] ?? '') == 'sociedade-economia-mista' ? 'selected' : '' }}>Sociedade de Economia Mista</option>
                </select>
                <div class="form-text mt-1" id="catHelp">Utilizado para classificação interna e futura integração com dados governamentais abertos.</div>
            </div>
            <div class="col-md-6">
                <label class="form-label fw-bold" for="cnpj_orgao">CNPJ do Órgão</label>
                <div class="input-group">
                    <span class="input-group-text bg-white" aria-hidden="true">
                        <i class="bi bi-file-earmark-binary"></i>
                    </span>
                    <input type="text" name="cnpj_orgao" id="cnpj_orgao" class="form-control"
                           placeholder="00.000.000/0001-00" value="{{ $configs['cnpj_orgao'] ?? '' }}"
                           inputmode="numeric" pattern="\d{2}\.\d{3}\.\d{3}/\d{4}-\d{2}"
                           title="Formato: 00.000.000/0001-00"
                           aria-describedby="cnpjHelp">
                </div>
                <div class="form-text mt-1" id="cnpjHelp">Utilizado em contratos, rodapés e termos de privacidade oficiais.</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 Metadados Institucionais
            </button>
        </div>
    @endslot
@endcomponent