<section class="ma-features" aria-labelledby="ma-features-title">
    <div class="container">
        <h2 id="ma-features-title" class="visually-hidden">{{ __('Serviços do MobiAngra') }}</h2>
        <div class="ma-features__grid">
            <x-mobiangra.feature-alertas-card :alertas="$alertasDestaque ?? collect()" />

            <article class="ma-features__card">
                <span class="ma-features__icon ma-features__icon--purple" aria-hidden="true">
                    <i class="fa-solid fa-route"></i>
                </span>
                <h3 class="ma-features__title">{{ __('Itinerários') }}</h3>
                <p class="ma-features__text">
                    {{ __('Veja o trajeto completo de cada linha e seus pontos de parada.') }}
                </p>
                <a href="{{ route('mobiangra.itinerarios') }}" class="ma-features__link">
                    {{ __('Ver itinerários') }}
                    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                </a>
            </article>

            <article class="ma-features__card">
                <span class="ma-features__icon ma-features__icon--orange" aria-hidden="true">
                    <i class="fa-solid fa-star"></i>
                </span>
                <h3 class="ma-features__title">{{ __('Linhas Favoritas') }}</h3>
                <p class="ma-features__text">
                    {{ __('Acesse rapidamente as linhas que você marcou como favoritas no mapa.') }}
                </p>
                <a href="{{ route('mobiangra.mapa', ['modo' => 'favoritas']) }}" class="ma-features__link">
                    {{ __('Ver favoritas') }}
                    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                </a>
            </article>
        </div>
    </div>
</section>
