@component('v2-cms::components.box', ['title' => 'Tema do Portal Público'])
    <p class="text-muted mb-4">
        Configure a identidade visual do <strong>portal público</strong>: cores, tipografia, aparência.
        As alterações refletem imediatamente em todas as páginas públicas após o salvamento.
    </p>

    {{-- ═══════════════════════════════════════════════════════════════════════
         SEÇÃO A — Cores da Marca
         ═══════════════════════════════════════════════════════════════════════ --}}
    <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-palette" aria-hidden="true"></i> Cores da Marca
        </legend>

        <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 Secundária</label>
                <div class="d-flex align-items-center gap-2">
                    <input type="color" name="theme_secondary_color" class="form-control form-control-color"
                           value="{{ $configs['theme_secondary_color'] ?? '#0a4c8c' }}"
                           class="cursor-pointer" style="width: 60px; height: 38px; padding: 2px;">
                    <code class="small text-muted">{{ $configs['theme_secondary_color'] ?? '#0a4c8c' }}</code>
                </div>
                <div class="form-text mt-1">Usada em hover states, gradientes e tons escuros secundários.</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>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════════════════════
         SEÇÃO B — 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-square" aria-hidden="true"></i> Superfícies
        </legend>

        <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>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════════════════════
         SEÇÃO C — Tipografia e Aparência
         ═══════════════════════════════════════════════════════════════════════ --}}
    <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-fonts" aria-hidden="true"></i> Tipografia e Aparência
        </legend>

        <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>
    </fieldset>

    {{-- ═══════════════════════════════════════════════════════════════════════
         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">Integração com o Portal</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
                <code>LayoutBaseComposer</code> &rarr; <code>base-struct/colors.blade.php</code>.
            </p>
        </div>
    </div>

    @slot('footer')
        <div class="d-flex justify-content-end">
            <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 do Portal
            </button>
        </div>
    @endslot
@endcomponent