@component('v2-cms::components.box', ['title' => 'Temas e Cores — Portal e CMS'])
    <p class="text-muted mb-4">
        Configure a identidade visual do <strong>portal público</strong> e do <strong>painel administrativo (CMS)</strong>
        separadamente. As alterações refletem imediatamente após o salvamento.
    </p>

    {{-- ═══════════════════════════════════════════════════════════════════════
         SEÇÃO A — TEMA DO PORTAL (cores, tipografia, superfícies)
         ═══════════════════════════════════════════════════════════════════════ --}}
    <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-globe2" aria-hidden="true"></i> Tema do Portal
            <span class="badge bg-info fw-normal ms-1" style="font-size: var(--text-xs);">PÚBLICO</span>
        </legend>

        {{-- Grupo A: Cores da Marca --}}
        <div class="mb-3">
            <h6 class="fw-bold text-secondary mb-2" style="font-size: var(--text-sm); letter-spacing: 0.5px;">
                <i class="bi bi-palette me-1"></i> Cores da Marca
            </h6>
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-bold">Cor Primária</label>
                    <div class="d-flex align-items-center gap-2">
                        <input type="color" name="theme_primary_color" class="form-control form-control-color"
                               value="{{ $configs['theme_primary_color'] ?? '#1075ad' }}"
                               class="cursor-pointer" style="width: 60px; height: 38px; padding: 2px;">
                        <code class="small text-muted">{{ $configs['theme_primary_color'] ?? '#1075ad' }}</code>
                    </div>
                    <div class="form-text mt-1">Cor principal usada em cabeçalhos e elementos de destaque.</div>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold">Cor de Destaque (Accent)</label>
                    <div class="d-flex align-items-center gap-2">
                        <input type="color" name="theme_accent_color" class="form-control form-control-color"
                               value="{{ $configs['theme_accent_color'] ?? '#fece50' }}"
                               class="cursor-pointer" style="width: 60px; height: 38px; padding: 2px;">
                        <code class="small text-muted">{{ $configs['theme_accent_color'] ?? '#fece50' }}</code>
                    </div>
                    <div class="form-text mt-1">Cor usada para hover, badges e indicadores interativos.</div>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold">Cor de Links</label>
                    <div class="d-flex align-items-center gap-2">
                        <input type="color" name="theme_link_color" class="form-control form-control-color"
                               value="{{ $configs['theme_link_color'] ?? '#1075ad' }}"
                               class="cursor-pointer" style="width: 60px; height: 38px; padding: 2px;">
                        <code class="small text-muted">{{ $configs['theme_link_color'] ?? '#1075ad' }}</code>
                    </div>
                    <div class="form-text mt-1">Cor aplicada a todos os links do portal.</div>
                </div>
            </div>
        </div>

        {{-- Grupo B: Superfícies --}}
        <div class="mb-3">
            <h6 class="fw-bold text-secondary mb-2" style="font-size: var(--text-sm); letter-spacing: 0.5px;">
                <i class="bi bi-square me-1"></i> Superfícies
            </h6>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold">Fundo Principal (Body)</label>
                    <div class="d-flex align-items-center gap-2">
                        <input type="color" name="theme_bg_main" class="form-control form-control-color"
                               value="{{ $configs['theme_bg_main'] ?? '#ffffff' }}"
                               class="cursor-pointer" style="width: 60px; height: 38px; padding: 2px;">
                        <code class="small text-muted">{{ $configs['theme_bg_main'] ?? '#ffffff' }}</code>
                    </div>
                    <div class="form-text mt-1">Cor de fundo principal do corpo da página.</div>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold">Fundo Secundário (Canvas)</label>
                    <div class="d-flex align-items-center gap-2">
                        <input type="color" name="theme_bg_canvas" class="form-control form-control-color"
                               value="{{ $configs['theme_bg_canvas'] ?? '#f8f9fa' }}"
                               class="cursor-pointer" style="width: 60px; height: 38px; padding: 2px;">
                        <code class="small text-muted">{{ $configs['theme_bg_canvas'] ?? '#f8f9fa' }}</code>
                    </div>
                    <div class="form-text mt-1">Cor de fundo para cards, sidebars e áreas secundárias.</div>
                </div>
            </div>
        </div>

        {{-- Grupo C: Tipografia e Aparência --}}
        <div class="mb-0">
            <h6 class="fw-bold text-secondary mb-2" style="font-size: var(--text-sm); letter-spacing: 0.5px;">
                <i class="bi bi-fonts me-1"></i> Tipografia e Aparência
            </h6>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold">Fonte da Família</label>
                    <select name="theme_font_family" class="form-select">
                        @php $currentFont = $configs['theme_font_family'] ?? ''; @endphp
                        <option value="'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" {{ $currentFont == "'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" ? 'selected' : '' }}>Nunito Sans (Padrão)</option>
                        <option value="'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" {{ $currentFont == "'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" ? 'selected' : '' }}>Open Sans</option>
                        <option value="'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" {{ $currentFont == "'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" ? 'selected' : '' }}>Lato</option>
                        <option value="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" {{ $currentFont == "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" ? 'selected' : '' }}>System UI (Padrão do SO)</option>
                    </select>
                    <div class="form-text mt-1">Fonte principal utilizada em todo o portal.</div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <label class="form-label fw-bold">Tamanho Base</label>
                    <select name="theme_font_size_base" class="form-select">
                        @php $currentSize = $configs['theme_font_size_base'] ?? '16'; @endphp
                        <option value="14" {{ $currentSize == '14' ? 'selected' : '' }}>14px</option>
                        <option value="15" {{ $currentSize == '15' ? 'selected' : '' }}>15px</option>
                        <option value="16" {{ $currentSize == '16' ? 'selected' : '' }}>16px (Padrão)</option>
                        <option value="17" {{ $currentSize == '17' ? 'selected' : '' }}>17px</option>
                        <option value="18" {{ $currentSize == '18' ? 'selected' : '' }}>18px (Acessível)</option>
                    </select>
                </div>
                <div class="col-md-3 col-sm-6">
                    <label class="form-label fw-bold">Arredondamento</label>
                    <select name="theme_border_radius" class="form-select">
                        @php $currentRadius = $configs['theme_border_radius'] ?? '4px'; @endphp
                        <option value="0px" {{ $currentRadius == '0px' ? 'selected' : '' }}>Sem arredondamento</option>
                        <option value="2px" {{ $currentRadius == '2px' ? 'selected' : '' }}>2px (Suave)</option>
                        <option value="4px" {{ $currentRadius == '4px' ? 'selected' : '' }}>4px (Padrão)</option>
                        <option value="6px" {{ $currentRadius == '6px' ? 'selected' : '' }}>6px (Arredondado)</option>
                        <option value="8px" {{ $currentRadius == '8px' ? 'selected' : '' }}>8px (Bastante arredondado)</option>
                    </select>
                </div>
            </div>
            <div class="row g-3 mt-1">
                <div class="col-md-6">
                    <label class="form-label fw-bold">Intensidade da Sombra</label>
                    <select name="theme_shadow_intensity" class="form-select">
                        @php $currentShadow = $configs['theme_shadow_intensity'] ?? 'none'; @endphp
                        <option value="none" {{ $currentShadow == 'none' ? 'selected' : '' }}>Nenhuma (Plano)</option>
                        <option value="0 1px 3px rgba(0,0,0,0.12)" {{ $currentShadow == '0 1px 3px rgba(0,0,0,0.12)' ? 'selected' : '' }}>Sutil</option>
                        <option value="0 2px 6px rgba(0,0,0,0.15)" {{ $currentShadow == '0 2px 6px rgba(0,0,0,0.15)' ? 'selected' : '' }}>Média (Padrão)</option>
                        <option value="0 4px 12px rgba(0,0,0,0.18)" {{ $currentShadow == '0 4px 12px rgba(0,0,0,0.18)' ? 'selected' : '' }}>Elevada</option>
                    </select>
                    <div class="form-text mt-1">Sombra aplicada a cards e boxes de destaque.</div>
                </div>
            </div>
        </div>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════════════════════
         SEÇÃO B — TEMA DO CMS (White Label: identidade, favicon, cores)
         ═══════════════════════════════════════════════════════════════════════ --}}
    <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-gear-wide-connected" aria-hidden="true"></i> Tema do CMS
            <span class="badge bg-secondary fw-normal ms-1" style="font-size: var(--text-xs);">ADMIN</span>
        </legend>

        {{-- Grupo A: Identidade da Marca (CMS) --}}
        <div class="mb-3">
            <h6 class="fw-bold text-secondary mb-2" style="font-size: var(--text-sm); letter-spacing: 0.5px;">
                <i class="bi bi-building me-1"></i> Identidade da Marca
            </h6>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold">Nome da Empresa / Marca</label>
                    <input type="text" name="cms_brand_name" class="form-control"
                           value="{{ $configs['cms_brand_name'] ?? 'Maxima' }}"
                           placeholder="Ex: Maxima">
                    <div class="form-text mt-1">Exibido na barra lateral e na tela de login do CMS.</div>
                </div>
                <div class="col-md-6">
                    @php
                        $currentLogo = $configs['cms_brand_logo'] ?? null;
                        $currentLogoId = $currentLogo ? \Illuminate\Support\Facades\DB::table('v2_gallery_media')->where('file_path', $currentLogo)->value('id') : '';
                    @endphp
                    @include('v2-service-media::components.media-input', [
                        'name' => 'cms_brand_logo',
                        'label' => 'Logo da Empresa (CMS)',
                        'accept' => 'image/*',
                        'help' => 'Recomendado: PNG com fundo transparente. Altura ideal: 60px.',
                        'currentUrl' => $currentLogo ? v2_storage_url($currentLogo) : '',
                        'currentAlt' => '',
                        'currentId' => $currentLogoId,
                        'ownerModule' => 'support_configs'
                    ])
                </div>
            </div>
        </div>

        {{-- Grupo B: Favicon (upload direto de .ico, SEM galeria) --}}
        <div class="mb-3">
            <h6 class="fw-bold text-secondary mb-2" style="font-size: var(--text-sm); letter-spacing: 0.5px;">
                <i class="bi bi-browser-chrome me-1"></i> Favicon
            </h6>
            <div class="row g-3">
                <div class="col-md-7">
                    @php
                        $currentFavicon = $configs['cms_favicon'] ?? null;
                        $faviconUrl = $currentFavicon ? v2_storage_url($currentFavicon) : '';
                    @endphp
                    <div class="mb-3">
                        <label for="cms_favicon" class="form-label fw-bold">Ícone de Aba (Favicon)</label>
                        <input type="file"
                               name="cms_favicon"
                               id="cms_favicon"
                               class="form-control"
                               accept=".ico,image/x-icon,image/vnd.microsoft.icon"
                               aria-describedby="temas-cms-favicon-help">
                        @if($faviconUrl)
                            <div class="mt-2 d-flex align-items-center gap-3">
                                <img src="{{ $faviconUrl }}"
                                     alt="Favicon atual"
                                     loading="lazy"
                                     class="border rounded shadow-sm"
                                     style="width:32px; height:32px; object-fit:contain; image-rendering:pixelated;">
                                <span class="small text-muted">
                                    <i class="bi bi-check-circle-fill text-success me-1"></i>
                                    Favicon atual (32×32)
                                </span>
                            </div>
                        @else
                            <div class="mt-2 small text-muted">
                                <i class="bi bi-info-circle me-1"></i>
                                Nenhum favicon personalizado. Será usado o fallback <code>favicon.ico</code> padrão.
                            </div>
                        @endif
                        <div id="temas-cms-favicon-help" class="form-text mt-2">
                            <i class="bi bi-info-circle-fill me-1"></i>
                            <strong>Formato obrigatório:</strong> ICO (<code>.ico</code>).
                            O arquivo é salvo diretamente no storage, sem passar pela galeria de mídias.
                        </div>
                    </div>
                </div>
                <div class="col-md-5 d-flex align-items-start pt-4">
                    <div class="bg-light border rounded p-3 w-100">
                        <div class="small fw-bold text-dark mb-2">
                            <i class="bi bi-info-circle me-1"></i> Especificações Técnicas do ICO
                        </div>
                        <ul class="small text-secondary ps-3 mb-0" style="line-height: 1.8;">
                            <li><strong class="text-dark">Formato obrigatório:</strong> ICO (<code>.ico</code>)</li>
                            <li><strong class="text-dark">Dimensão exata:</strong> 32×32 pixels (máxima compatibilidade)</li>
                            <li><strong class="text-dark">Profundidade de cor:</strong> 32 bits (True Color com alpha) ou 24 bits</li>
                            <li>Incluir resolução <strong class="text-dark">16×16</strong> como fallback (mesmo arquivo .ico pode conter múltiplos sizes)</li>
                            <li>Não usar PNG ou JPEG — a extensão deve ser <code>.ico</code></li>
                            <li>Tamanho máximo recomendado: <strong class="text-dark">100 KB</strong></li>
                            <li>Ferramentas sugeridas: RealWorld Icon Editor, GIMP (com plugin .ico), ImageMagick, favicon.io</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        {{-- Grupo C: Cores do Tema CMS --}}
        <div class="mb-0">
            <h6 class="fw-bold text-secondary mb-2" style="font-size: var(--text-sm); letter-spacing: 0.5px;">
                <i class="bi bi-palette me-1"></i> Cores do Tema CMS
            </h6>
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-bold">Barra Lateral (Fundo)</label>
                    <div class="d-flex align-items-center gap-2">
                        <input type="color" name="cms_sidebar_bg" class="form-control form-control-color"
                               value="{{ $configs['cms_sidebar_bg'] ?? '#222d32' }}"
                               class="cursor-pointer" style="width: 60px; height: 40px; padding: 2px;">
                        <code class="small text-muted">{{ $configs['cms_sidebar_bg'] ?? '#222d32' }}</code>
                    </div>
                    <div class="form-text mt-1">Cor de fundo da navegação lateral. Padrão: <code>#222d32</code></div>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold">Destaque (Brand Primary)</label>
                    <div class="d-flex align-items-center gap-2">
                        <input type="color" name="cms_brand_primary" class="form-control form-control-color"
                               value="{{ $configs['cms_brand_primary'] ?? '#3c8dbc' }}"
                               class="cursor-pointer" style="width: 60px; height: 40px; padding: 2px;">
                        <code class="small text-muted">{{ $configs['cms_brand_primary'] ?? '#3c8dbc' }}</code>
                    </div>
                    <div class="form-text mt-1">Header, botões e links do CMS. Padrão: <code>#3c8dbc</code></div>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold">Fundo da Tela (Body)</label>
                    <div class="d-flex align-items-center gap-2">
                        <input type="color" name="cms_body_bg" class="form-control form-control-color"
                               value="{{ $configs['cms_body_bg'] ?? '#ecf0f5' }}"
                               class="cursor-pointer" style="width: 60px; height: 40px; padding: 2px;">
                        <code class="small text-muted">{{ $configs['cms_body_bg'] ?? '#ecf0f5' }}</code>
                    </div>
                    <div class="form-text mt-1">Área de conteúdo principal. Padrão: <code>#ecf0f5</code></div>
                </div>
            </div>
        </div>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════════════════════
         AÇÕES: Salvar (Portal + CMS) + Restaurar Padrões do CMS
         ═══════════════════════════════════════════════════════════════════════ --}}
    <div class="d-flex justify-content-between align-items-center pt-3 border-top">
        <button type="submit" class="btn btn-primary fw-bold d-inline-flex align-items-center gap-1">
            <i class="bi bi-save"></i> Salvar Tema (Portal + CMS)
        </button>
        <button type="button" class="btn btn-outline-secondary fw-bold d-inline-flex align-items-center gap-1"
                onclick="document.getElementById('reset-cms-form').requestSubmit()"
                title="Restaura apenas as configurações do CMS para os valores padrão">
            <i class="bi bi-arrow-counterclockwise"></i> Restaurar Padrões do CMS
        </button>
    </div>

    {{-- ═══════════════════════════════════════════════════════════════════════
         INFO TÉCNICA — CSS Variables
         ═══════════════════════════════════════════════════════════════════════ --}}
    <div class="alert alert-info d-flex gap-2 p-3 mt-4 mb-0" role="alert">
        <i class="bi bi-info-circle-fill fs-5 flex-shrink-0 mt-1"></i>
        <div>
            <h4 class="alert-heading h6 fw-bold mb-1">Como funciona a integração?</h4>
            <p class="mb-0 small text-secondary">
                As cores do <strong>Tema do Portal</strong> são lidas da tabela <code>v2_portal_configs</code> e injetadas
                como variáveis CSS nativas no <code>&lt;head&gt;</code> de todas as páginas públicas via View Composer.
                As cores do <strong>Tema do CMS</strong> vêm da tabela <code>v2_cms_theme_configs</code> e são aplicadas
                ao painel administrativo.
            </p>
        </div>
    </div>
@endcomponent