{{-- 
    @intent Exibir mecanismo de pesquisa expansível
    @accessibility Usa tag semântica <search>, focus handling (e-MAG), aria-expanded, e vincula atalho de teclado #portal-search.
--}}
<search role="search">
    <div class="search-container position-relative">
        {{-- Botão Disparador --}}
        <button type="button" 
                class="header-search-btn js-toggle-search" 
                aria-expanded="false"
                aria-controls="search-dropdown"
                aria-label="Abrir formulário de pesquisa" 
                title="Pesquisar no portal">
            <i class="bi bi-search" aria-hidden="true"></i>
            <span class="visually-hidden">Abrir formulário de pesquisa</span>
        </button>

        {{-- Dropdown do Formulário --}}
        <div id="search-dropdown" 
             class="search-dropdown-menu shadow-lg d-none position-absolute end-0 bg-white p-3 rounded-2" 
             style="top: 120%; z-index: 1050; min-width: 320px; border: 1px solid var(--color-bg-canvas, #f0f0f0);">
            <form action="{{ url('busca') }}" method="GET" class="m-0 d-flex">
                <label for="portal-search" class="visually-hidden">Digite o que procura</label>
                <input 
                    type="search" 
                    name="q" 
                    id="portal-search"
                    placeholder="O que você procura?"
                    class="form-control js-portal-search-input border-end-0 shadow-none ps-3 rounded-start-pill"
                    style="border-color: var(--color-bg-canvas, #ddd); height: 44px;"
                    autocomplete="off"
                    required
                >
                <button type="submit" class="btn btn-primary px-3 rounded-end-pill" style="height: 44px;" aria-label="Executar busca">
                    <i class="bi bi-search" aria-hidden="true"></i>
                </button>
            </form>
        </div>
    </div>
</search>

@push('head-styles')
<style>
    .header-search-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        width: 44px;
        border-radius: 50%;
        border: 1px solid var(--bs-border-color);
        background-color: var(--color-bg-main);
        color: var(--tenant-primary, #444);
        font-size: 1.15rem;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        cursor: pointer;
    }

    .header-search-btn:hover {
        background-color: var(--tenant-primary, #1075ad);
        color: var(--bs-white) !important;
        border-color: var(--tenant-primary, #1075ad);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
    }

    .header-search-btn:focus,
    .js-portal-search-input:focus {
        outline: 3px solid var(--tenant-accent, #fbbf24);
        outline-offset: 2px;
        border-color: var(--tenant-primary, #1075ad);
    }
    
    .header-search-btn[aria-expanded="true"] {
        background-color: var(--tenant-primary, #1075ad);
        color: var(--bs-white) !important;
    }

    /* Ajuste para o placeholder */
    .js-portal-search-input::placeholder {
        color: var(--color-text-muted);
    }
</style>
@endpush

@push('scripts')
<script>
(function() {
    var searchBtn = document.querySelector('.js-toggle-search');
    var searchDropdown = document.getElementById('search-dropdown');
    if (searchBtn && searchDropdown) {
        window.addEventListener('scroll', function() {
            if (window.innerWidth < 992 && searchBtn.getAttribute('aria-expanded') === 'true') {
                searchBtn.click();
            }
        });
    }
})();
</script>
@endpush