@extends('layouts.admin.theme')
@section("title", env("APP_NAME") . " :: " . __("Conta Angra"))
@push('scripts')
    <link rel="stylesheet" href="{{ asset('pmar/css/conta-angra.css') }}">
    <script src="{{ asset('pmar/js/conta-angra.js') }}"></script>
@endpush
@section('content')

    <main class="conta-angra">

        @include("errors.messageFlash")

        @include('components.alerts._cadasturVencimentoContaAngra', [
            'empresasTurismo' => $empresasTurismoCadasturAlerta ?? collect(),
        ])

        {{-- Header com Saudação --}}
        <div class="ca-header">
            <div class="ca-header-content">
                <img src="{{ asset(auth()->user()->photo) }}" alt="{{ $user->firstName }}" class="ca-avatar">
                <div class="ca-greeting">
                    <span class="ca-hello">{{ __('Olá,') }}</span>
                    <h1 class="ca-name">{{ $user->firstName }}</h1>
                </div>
            </div>
            <div class="ca-search-wrapper">
                <div class="ca-search">
                    <i class="fa-solid fa-search ca-search-icon"></i>
                    <input
                        type="text"
                        id="searchServices"
                        class="ca-search-input"
                        placeholder="{{ __('Buscar serviço...') }}"
                        autocomplete="off"
                    >
                    <span class="ca-search-shortcut">Ctrl+K</span>
                </div>
            </div>
        </div>

        {{-- Container para resultados da busca (oculto por padrão) --}}
        <div id="searchResultsContainer" class="ca-search-results d-none">
            <div class="ca-services-grid" id="searchResultsGrid"></div>
        </div>

        {{-- Seção de Serviços / Sistemas --}}
        <section class="ca-section">
            <h2 class="ca-section-title">
                <i class="fa-solid fa-clipboard-list"></i>
                {{ __('Sistemas') }}
            </h2>

            <div class="ca-services-grid">
                @if(collect(auth()->user()->listaPermissoes())->contains("ADMIN"))
                    <a href="{{ route('admin.dashboard') }}" class="ca-service-card" data-name="{{ strtolower(__('Painel Administrativo')) }}">
                        <div class="ca-service-icon ca-icon-blue">
                            <i class="fa-solid fa-gauge-high"></i>
                        </div>
                        <div class="ca-service-info">
                            <h3 class="ca-service-name">{{ __('Painel Administrativo') }}</h3>
                            <p class="ca-service-desc">{{ __('Acesse o painel administrativo') }}</p>
                        </div>
                    </a>
                @endif

                <a href="{{ route('admin.contaAngra.chamados.index') }}" class="ca-service-card" data-name="{{ strtolower(__('Meus Chamados')) }}">
                    <div class="ca-service-icon ca-icon-blue position-relative">
                        @if(isset($unreadMessagesCount) && $unreadMessagesCount > 0)
                            <span class="badge bg-danger position-absolute top-0 end-0 translate-middle">
                                {{ $unreadMessagesCount > 99 ? '99+' : $unreadMessagesCount }}
                            </span>
                        @endif
                        <i class="fa-solid fa-headset"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Meus Chamados') }}</h3>
                        <p class="ca-service-desc">{{ __('Acompanhe suas solicitações') }}</p>
                    </div>
                </a>

                <a href="{{ route('admin.saude.fibromialgia.perfil.index') }}" class="ca-service-card" data-name="{{ strtolower(__('Fibromialgia')) }}">
                    <div class="ca-service-icon ca-icon-teal">
                        <i class="fa-solid fa-user-injured"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Fibromialgia') }}</h3>
                        <p class="ca-service-desc">{{ __('Cadastro e acompanhamento') }}</p>
                    </div>
                </a>

                <a href="https://angra.sei.rj.gov.br/sei/controlador_externo.php?acao=usuario_externo_logar&amp;id_orgao_acesso_externo=0"
                   class="ca-service-card ca-service-card-external" target="_blank" rel="noopener" data-name="{{ strtolower(__('SEI! Externo')) }}">
                    <span class="ca-external-badge" aria-label="{{ __('Link externo') }}">
                        <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
                    </span>
                    <div class="ca-service-icon ca-icon-purple">
                        <i class="fa-solid fa-file-signature"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('SEI! Externo') }}</h3>
                        <p class="ca-service-desc">{{ __('Acesse o sistema SEI! Externo') }}</p>
                    </div>
                </a>
            </div>
        </section>

        {{-- Seção Essenciais --}}
        <section class="ca-section">
            <h2 class="ca-section-title">
                <i class="fa-solid fa-star-of-life"></i>
                {{ __('Essenciais') }}
            </h2>

            <div class="ca-services-grid">
                <a href="https://angra.jtech.com.br/" class="ca-service-card ca-service-card-external" target="_blank" rel="noopener" data-name="{{ strtolower(__('Conta de Água')) }}">
                    <span class="ca-external-badge" aria-label="{{ __('Link externo') }}">
                        <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
                    </span>
                    <div class="ca-service-icon ca-icon-blue">
                        <i class="fa-solid fa-droplet"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Conta de Água') }}</h3>
                        <p class="ca-service-desc">{{ __('Consulte sua conta de água') }}</p>
                    </div>
                </a>

                <a href="https://www.eneldistribuicao.com.br/rj/AcessoRapidosegundavia.aspx" class="ca-service-card ca-service-card-external" target="_blank" rel="noopener" data-name="{{ strtolower(__('Conta de Luz')) }}">
                    <span class="ca-external-badge" aria-label="{{ __('Link externo') }}">
                        <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
                    </span>
                    <div class="ca-service-icon ca-icon-orange">
                        <i class="fa-solid fa-bolt"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Conta de Luz') }}</h3>
                        <p class="ca-service-desc">{{ __('Emita a segunda via da conta de luz') }}</p>
                    </div>
                </a>

                <a href="https://pge.rj.gov.br/divida-ativa" class="ca-service-card ca-service-card-external" target="_blank" rel="noopener" data-name="{{ strtolower(__('Débitos Estaduais')) }}">
                    <span class="ca-external-badge" aria-label="{{ __('Link externo') }}">
                        <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
                    </span>
                    <div class="ca-service-icon ca-icon-purple">
                        <i class="fa-solid fa-scale-balanced"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Débitos Estaduais') }}</h3>
                        <p class="ca-service-desc">{{ __('Consulte débitos com o Estado') }}</p>
                    </div>
                </a>

                <a href="https://siarm.angra.rj.gov.br/siarm/informacoes/demonstrativos-debitos" class="ca-service-card" target="_blank" rel="noopener" data-name="{{ strtolower(__('Débitos Municipais')) }}">
                    <div class="ca-service-icon ca-icon-teal">
                        <i class="fa-solid fa-building-columns"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Débitos Municipais') }}</h3>
                        <p class="ca-service-desc">{{ __('Consulte débitos com o município') }}</p>
                    </div>
                </a>

                <a href="https://siarm.angra.rj.gov.br/arrecadacao/cobranca/iptu" class="ca-service-card" target="_blank" rel="noopener" data-name="{{ strtolower(__('IPTU')) }}">
                    <div class="ca-service-icon ca-icon-green">
                        <i class="fa-solid fa-house-chimney"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('IPTU') }}</h3>
                        <p class="ca-service-desc">{{ __('Consulte e emita guias de IPTU') }}</p>
                    </div>
                </a>

                <a href="https://www.gov.br/pt-br/servicos/consultar-online-suas-infracoes-de-transito" class="ca-service-card ca-service-card-external" target="_blank" rel="noopener" data-name="{{ strtolower(__('Multas de Trânsito')) }}">
                    <span class="ca-external-badge" aria-label="{{ __('Link externo') }}">
                        <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
                    </span>
                    <div class="ca-service-icon ca-icon-pink">
                        <i class="fa-solid fa-car-burst"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Multas de Trânsito') }}</h3>
                        <p class="ca-service-desc">{{ __('Consulte suas infrações de trânsito') }}</p>
                    </div>
                </a>

                <a href="https://siarm.angra.rj.gov.br/siarm/informacoes/7" class="ca-service-card" target="_blank" rel="noopener" data-name="{{ strtolower(__('ITBI')) }}">
                    <div class="ca-service-icon ca-icon-blue">
                        <i class="fa-solid fa-file-contract"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('ITBI') }}</h3>
                        <p class="ca-service-desc">{{ __('Imposto sobre Transmissão de Bens Imóveis') }}</p>
                    </div>
                </a>

                <a href="https://siarm.angra.rj.gov.br/" class="ca-service-card" target="_blank" rel="noopener" data-name="{{ strtolower(__('Parcelamento de Débitos Tributários e não Tributários')) }}">
                    <div class="ca-service-icon ca-icon-teal">
                        <i class="fa-solid fa-credit-card"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Parcelamento de Débitos Tributários e não Tributários') }}</h3>
                        <p class="ca-service-desc">{{ __('Parcelamento de débitos municipais') }}</p>
                    </div>
                </a>

                <a href="https://www.spe.angra.rj.gov.br/senhaweb/login.aspx" class="ca-service-card" target="_blank" rel="noopener" data-name="{{ strtolower(__('Nota Fiscal Eletrônica')) }}">
                    <div class="ca-service-icon ca-icon-green">
                        <i class="fa-solid fa-receipt"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Nota Fiscal Eletrônica') }}</h3>
                        <p class="ca-service-desc">{{ __('Emita e consulte notas fiscais') }}</p>
                    </div>
                </a>
            </div>
        </section>

        {{-- Seção Informações Municipais --}}
        <section class="ca-section">
            <h2 class="ca-section-title">
                <i class="fa-solid fa-globe"></i>
                {{ __('Informações Municipais') }}
            </h2>

            <div class="ca-services-grid">
                <a href="https://www.angra.rj.gov.br/noticias" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-teal">
                        <i class="fa-solid fa-newspaper"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Notícias') }}</h3>
                        <p class="ca-service-desc">{{ __('Acompanhe as notícias do município') }}</p>
                    </div>
                </a>

                <a href="https://www.angra.rj.gov.br/boletim-oficial" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-blue">
                        <i class="fa-solid fa-newspaper"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Boletim Oficial') }}</h3>
                        <p class="ca-service-desc">{{ __('Boletim Oficial do Município') }}</p>
                    </div>
                </a>

                <a href="https://www.angra.rj.gov.br/boletim-meteorologico" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-green">
                        <i class="fa-solid fa-cloud-sun"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Boletim Meteorológico') }}</h3>
                        <p class="ca-service-desc">{{ __('Previsão do tempo e alertas meteorológicos') }}</p>
                    </div>
                </a>

                <a href="https://www.flickr.com/photos/prefeituradeangradosreis/albums/" class="ca-service-card ca-service-card-external" target="_blank" rel="noopener">
                    <span class="ca-external-badge" aria-label="{{ __('Link externo') }}">
                        <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
                    </span>
                    <div class="ca-service-icon ca-icon-purple">
                        <i class="fa-solid fa-images"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Galeria de Fotos de Angra') }}</h3>
                        <p class="ca-service-desc">{{ __('Fotos e imagens do município') }}</p>
                    </div>
                </a>

                <a href="https://angra.sei.rj.gov.br/sei/modulos/pesquisa/md_pesq_processo_pesquisar.php?acao_externa=protocolo_pesquisar&acao_origem_externa=protocolo_pesquisar&id_orgao_acesso_externo=0" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-pink">
                        <i class="fa-solid fa-search"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Consulta de Processos (SEI!)') }}</h3>
                        <p class="ca-service-desc">{{ __('Pesquise processos no SEI!') }}</p>
                    </div>
                </a>

                <a href="https://portal.angra.rj.gov.br/sad-consulta-processo.asp?IndexSigla=SAD" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-blue">
                        <i class="fa-solid fa-folder-open"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Consulta de Processos (PRODATA)') }}</h3>
                        <p class="ca-service-desc">{{ __('Pesquise processos no sistema PRODATA') }}</p>
                    </div>
                </a>

                <a href="https://portaldoservidor.angra.rj.gov.br/calendario" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-teal">
                        <i class="fa-solid fa-calendar-days"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Calendário Municipal') }}</h3>
                        <p class="ca-service-desc">{{ __('Calendário oficial do município') }}</p>
                    </div>
                </a>

                <a href="https://angra.rj.gov.br/calendariodeeventos" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-green">
                        <i class="fa-solid fa-calendar-check"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Calendário de Eventos') }}</h3>
                        <p class="ca-service-desc">{{ __('Eventos e atividades do município') }}</p>
                    </div>
                </a>

                <a href="https://angra.prodataweb.inf.br/sig/app.html#/transparencia/transparencia-folha-pagamento" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-purple">
                        <i class="fa-solid fa-user-tie"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Concursos e Processos seletivos') }}</h3>
                        <p class="ca-service-desc">{{ __('Editais e processos seletivos') }}</p>
                    </div>
                </a>

                <a href="https://portal.angra.rj.gov.br/licitacoes-procedimentos.asp?indexsigla=transp&instituicao=0&status=0&modalidade=0&ano=2025" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-orange">
                        <i class="fa-solid fa-gavel"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Licitações e procedimentos') }}</h3>
                        <p class="ca-service-desc">{{ __('Editais e processos licitatórios') }}</p>
                    </div>
                </a>

                <a href="https://angra.rj.gov.br/legislacao" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-pink">
                        <i class="fa-solid fa-book"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Legislação') }}</h3>
                        <p class="ca-service-desc">{{ __('Leis e decretos municipais') }}</p>
                    </div>
                </a>

                <a href="https://www.spe.angra.rj.gov.br/Ajuda/legislacao.aspx" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-blue">
                        <i class="fa-solid fa-scale-balanced"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Legislação Tributária') }}</h3>
                        <p class="ca-service-desc">{{ __('Leis e normas tributárias') }}</p>
                    </div>
                </a>

                <a href="https://portal.angra.rj.gov.br/sma-leis-urbanisticas.asp?IndexSigla=IMAAR" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-teal">
                        <i class="fa-solid fa-map"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Legislação Territorial - Licenciamento') }}</h3>
                        <p class="ca-service-desc">{{ __('Leis urbanísticas e de licenciamento') }}</p>
                    </div>
                </a>

                <a href="https://transparencia.angra.rj.gov.br/lgpd" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-orange">
                        <i class="fa-solid fa-shield-halved"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Proteção de Dados - LGPD') }}</h3>
                        <p class="ca-service-desc">{{ __('Lei Geral de Proteção de Dados') }}</p>
                    </div>
                </a>

                <a href="https://cartadeservicos.angra.rj.gov.br/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-teal">
                        <i class="fa-solid fa-clipboard-list"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Carta de Serviços') }}</h3>
                        <p class="ca-service-desc">{{ __('Conheça os serviços oferecidos à população') }}</p>
                    </div>
                </a>

                <a href="https://transparencia.angra.rj.gov.br/ouvidoria" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-orange">
                        <i class="fa-solid fa-comments"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Ouvidoria') }}</h3>
                        <p class="ca-service-desc">{{ __('Envie manifestações, elogios, reclamações e sugestões') }}</p>
                    </div>
                </a>

                <a href="https://siga.angra.rj.gov.br/" class="ca-service-card ca-service-card-external" target="_blank" rel="noopener">
                    <span class="ca-external-badge" aria-label="{{ __('Link externo') }}">
                        <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
                    </span>
                    <div class="ca-service-icon ca-icon-green">
                        <i class="fa-solid fa-map-location-dot"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Informações Geográficas de Angra') }}</h3>
                        <p class="ca-service-desc">{{ __('Mapa e informações geográficas do município') }}</p>
                    </div>
                </a>
            </div>
        </section>

        {{-- Seção Portais --}}
        <section class="ca-section">
            <h2 class="ca-section-title">
                <i class="fa-solid fa-globe"></i>
                {{ __('Portais') }}
            </h2>

            <div class="ca-services-grid">
                <a href="{{ route('paginas.home') }}" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-blue">
                        <i class="fa-solid fa-city"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Portal Oficial de Angra dos Reis') }}</h3>
                        <p class="ca-service-desc">{{ __('Site oficial da Prefeitura de Angra dos Reis') }}</p>
                    </div>
                </a>

                <a href="https://angradosreis.rio.br/" class="ca-service-card ca-service-card-external" target="_blank" rel="noopener">
                    <span class="ca-external-badge" aria-label="{{ __('Link externo') }}">
                        <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
                    </span>
                    <div class="ca-service-icon ca-icon-purple">
                        <i class="fa-solid fa-landmark"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Portal Institucional de Angra') }}</h3>
                        <p class="ca-service-desc">{{ __('Links institucionais do município') }}</p>
                    </div>
                </a>

                <a href="https://transparencia.angra.rj.gov.br/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-green">
                        <i class="fa-solid fa-eye"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Portal da Transparência') }}</h3>
                        <p class="ca-service-desc">{{ __('Acompanhe receitas, despesas e contratos públicos') }}</p>
                    </div>
                </a>

                <a href="https://siarm.angra.rj.gov.br/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-purple">
                        <i class="fa-solid fa-wallet"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Portal do Contribuinte') }}</h3>
                        <p class="ca-service-desc">{{ __('Acesse serviços tributários') }}</p>
                    </div>
                </a>

                <a href="https://angra.licenciamento.net.br/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-green">
                        <i class="fa-solid fa-building"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Portal de Licenciamento') }}</h3>
                        <p class="ca-service-desc">{{ __('Solicite e acompanhe licenças') }}</p>
                    </div>
                </a>

                <a href="https://angra.rj.gov.br/sei" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-orange">
                        <i class="fa-solid fa-file-signature"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Portal do SEI!') }}</h3>
                        <p class="ca-service-desc">{{ __('Sistema Eletrônico de Informações') }}</p>
                    </div>
                </a>

                <a href="http://visite.angra.rj.gov.br/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-teal">
                        <i class="fa-solid fa-map-location-dot"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Visite Angra') }}</h3>
                        <p class="ca-service-desc">{{ __('Portal de turismo e informações sobre a cidade') }}</p>
                    </div>
                </a>

                <a href="http://ppp.angra.rj.gov.br/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-blue">
                        <i class="fa-solid fa-handshake"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('PPP - Parcerias e Investimentos') }}</h3>
                        <p class="ca-service-desc">{{ __('Concessões, PPPs e investimentos do município') }}</p>
                    </div>
                </a>

                <a href="http://cidadeinteligente.angra.rj.gov.br/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-green">
                        <i class="fa-solid fa-microchip"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Cidade Inteligente') }}</h3>
                        <p class="ca-service-desc">{{ __('Tecnologia e inovação para serviços públicos') }}</p>
                    </div>
                </a>

                <a href="http://parquedacidade.angra.rj.gov.br/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-teal">
                        <i class="fa-solid fa-tree"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Parque da Cidade') }}</h3>
                        <p class="ca-service-desc">{{ __('Parque Natural Municipal da Mata Atlântica') }}</p>
                    </div>
                </a>

                <a href="http://planodiretor.angra.rj.gov.br/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-purple">
                        <i class="fa-solid fa-map"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Plano Diretor de Angra') }}</h3>
                        <p class="ca-service-desc">{{ __('Plano Diretor participativo de Angra dos Reis') }}</p>
                    </div>
                </a>

                <a href="https://parquetecmar.angra.rj.gov.br/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-orange">
                        <i class="fa-solid fa-flask"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Parque Tecnológico do Mar') }}</h3>
                        <p class="ca-service-desc">{{ __('Parque tecnológico voltado para o setor marítimo') }}</p>
                    </div>
                </a>

                <a href="https://angra.rj.gov.br/procureolugarcerto" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-pink">
                        <i class="fa-solid fa-hospital"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Procure o Lugar Certo') }}</h3>
                        <p class="ca-service-desc">{{ __('Encontre o serviço de saúde adequado') }}</p>
                    </div>
                </a>

                <a href="https://fundoangra.com.br/" class="ca-service-card ca-service-card-external" target="_blank" rel="noopener">
                    <span class="ca-external-badge" aria-label="{{ __('Link externo') }}">
                        <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
                    </span>
                    <div class="ca-service-icon ca-icon-blue">
                        <i class="fa-solid fa-building"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Fundo Imobiliário') }}</h3>
                        <p class="ca-service-desc">{{ __('Angra Fundo de Investimento Imobiliário') }}</p>
                    </div>
                </a>

                <a href="https://www.angra.rj.gov.br/mambubike/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-green">
                        <i class="fa-solid fa-bicycle"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('MambuBike') }}</h3>
                        <p class="ca-service-desc">{{ __('Sistema cicloviário no Parque Mambucaba') }}</p>
                    </div>
                </a>

                <a href="http://www.saaeangra.com.br/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-teal">
                        <i class="fa-solid fa-droplet"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Portal do SAAE') }}</h3>
                        <p class="ca-service-desc">{{ __('Serviço Autônomo de Água e Esgoto') }}</p>
                    </div>
                </a>

                <a href="https://maisagua.angra.rj.gov.br/" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-blue">
                        <i class="fa-solid fa-water"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Mais Água em Angra') }}</h3>
                        <p class="ca-service-desc">{{ __('Programa de abastecimento de água') }}</p>
                    </div>
                </a>

                <a href="http://angra.rj.gov.br/calendarioesportivo" class="ca-service-card" target="_blank" rel="noopener">
                    <div class="ca-service-icon ca-icon-orange">
                        <i class="fa-solid fa-trophy"></i>
                    </div>
                    <div class="ca-service-info">
                        <h3 class="ca-service-name">{{ __('Calendário Esportivo') }}</h3>
                        <p class="ca-service-desc">{{ __('Eventos e competições esportivas do município') }}</p>
                    </div>
                </a>
            </div>
        </section>

        {{-- Seção Minha Conta --}}
        <section class="ca-section">
            <h2 class="ca-section-title">
                <i class="fa-solid fa-user-circle"></i>
                {{ __('Minha Conta') }}
            </h2>

            <div class="ca-account-grid">
                <a href="{{ route('admin.profile') }}" class="ca-account-link" data-name="{{ strtolower(__('Meu Perfil')) }}">
                    <div class="ca-account-icon">
                        <i class="fa-solid fa-id-card"></i>
                    </div>
                    <div class="ca-account-info">
                        <span class="ca-account-label">{{ __('Meu Perfil') }}</span>
                        <span class="ca-account-value">{{ __('Dados pessoais') }}</span>
                    </div>
                    <i class="fa-solid fa-chevron-right ca-account-arrow"></i>
                </a>

                <a href="{{ route('admin.password') }}" class="ca-account-link" data-name="{{ strtolower(__('Alterar Senha')) }}">
                    <div class="ca-account-icon">
                        <i class="fa-solid fa-key"></i>
                    </div>
                    <div class="ca-account-info">
                        <span class="ca-account-label">{{ __('Alterar Senha') }}</span>
                        <span class="ca-account-value">{{ __('Senha de acesso') }}</span>
                    </div>
                    <i class="fa-solid fa-chevron-right ca-account-arrow"></i>
                </a>

                <a href="{{ route('admin.photo') }}" class="ca-account-link" data-name="{{ strtolower(__('Alterar Foto')) }}">
                    <div class="ca-account-icon">
                        <i class="fa-solid fa-camera"></i>
                    </div>
                    <div class="ca-account-info">
                        <span class="ca-account-label">{{ __('Alterar Foto') }}</span>
                        <span class="ca-account-value">{{ __('Foto de perfil') }}</span>
                    </div>
                    <i class="fa-solid fa-chevron-right ca-account-arrow"></i>
                </a>

                <a href="{{ route('admin.perfilEnderecos.index') }}" class="ca-account-link" data-name="{{ strtolower(__('Meu Endereço')) }}">
                    <div class="ca-account-icon">
                        <i class="fa-solid fa-location-dot"></i>
                    </div>
                    <div class="ca-account-info">
                        <span class="ca-account-label">{{ __('Meu Endereço') }}</span>
                        <span class="ca-account-value">{{ __('Endereço cadastrado') }}</span>
                    </div>
                    <i class="fa-solid fa-chevron-right ca-account-arrow"></i>
                </a>
            </div>
        </section>

        {{-- Seção de Informações --}}
        <section class="ca-section ca-info-section">
            <div class="ca-info-card">
                <div class="ca-info-icon">
                    <i class="fa-solid fa-shield-halved"></i>
                </div>
                <div class="ca-info-content">
                    <h4>{{ __('Sua conta está segura') }}</h4>
                    <p>{{ __('Todos os seus dados são protegidos e você pode gerenciá-los a qualquer momento.') }}</p>
                </div>
            </div>
        </section>
    </main>

    <div data-message-no-results="{{ __('Nenhum serviço encontrado') }}" data-message-try-other="{{ __('Tente buscar com outros termos') }}" class="d-none"></div>
@endsection