<section class="ma-hero-block" aria-labelledby="ma-hero-title">
    <div class="container ma-hero-block__container">
        <div class="ma-hero">
            <img src="{{ asset('mobiangra-assets/images/banner-mobiangra.png') }}"
                class="ma-hero__banner"
                alt=""
                width="1920"
                height="640"
                decoding="async"
                fetchpriority="high"
                aria-hidden="true">
            <div class="ma-hero__overlay" aria-hidden="true"></div>

            <div class="ma-hero__container">
                <div class="ma-hero__panel">
                    <div class="ma-hero__content">
                        <h1 id="ma-hero-title" class="ma-hero__title">{{ __('Mobilidade que conecta Angra') }}</h1>
                        <p class="ma-hero__subtitle">
                            {{ __('Consulte horários, itinerários e acompanhe seu ônibus em tempo real.') }}
                        </p>

                        @if (($linhas ?? collect())->isNotEmpty())
                            <x-mobiangra.hero-linha-combobox :linhas="$linhas" />
                            <div id="horarios-linhas-content" class="d-none" aria-hidden="true"></div>
                        @else
                            <form class="ma-hero__search" id="ma-hero-search" action="{{ route('mobiangra.horarios') }}"
                                method="get" role="search">
                                <label class="visually-hidden" for="ma-search-input">{{ __('Buscar linha, bairro ou destino') }}</label>
                                <div class="ma-hero__search-inner">
                                    <i class="fa-solid fa-magnifying-glass ma-hero__search-icon" aria-hidden="true"></i>
                                    <input type="search" name="linha" id="ma-search-input" class="ma-hero__search-input"
                                        placeholder="{{ __('Digite a linha, bairro ou destino') }}"
                                        autocomplete="off" enterkeyhint="search">
                                    <button type="submit" class="btn ma-hero__search-btn d-none d-lg-inline-flex">
                                        {{ __('Buscar') }}
                                    </button>
                                </div>
                            </form>
                        @endif
                    </div>

                    <div class="ma-hero__actions-wrap d-none d-lg-block" aria-label="{{ __('Ações rápidas') }}">
                        <div class="ma-hero__actions-grid ma-hero__actions-grid--desktop">
                            <a href="{{ route('mobiangra.mapa') }}" class="ma-hero__action-card">
                                <span class="ma-hero__action-icon ma-hero__action-icon--blue" aria-hidden="true">
                                    <i class="fa-solid fa-map-location-dot"></i>
                                </span>
                                <span class="ma-hero__action-label">{{ __('Mapa em tempo real') }}</span>
                            </a>
                            <a href="{{ route('mobiangra.horarios') }}" class="ma-hero__action-card">
                                <span class="ma-hero__action-icon ma-hero__action-icon--green" aria-hidden="true">
                                    <i class="fa-solid fa-bus-simple"></i>
                                </span>
                                <span class="ma-hero__action-label">{{ __('Horários') }}</span>
                            </a>
                            <a href="{{ route('mobiangra.passageiro_cidadao') }}" class="ma-hero__action-card">
                                <span class="ma-hero__action-icon ma-hero__action-icon--blue" aria-hidden="true">
                                    <i class="fa-solid fa-id-card"></i>
                                </span>
                                <span class="ma-hero__action-label">{{ __('Passageiro Cidadão') }}</span>
                            </a>
                            <a href="{{ route('mobiangra.informacoes') }}" class="ma-hero__action-card">
                                <span class="ma-hero__action-icon ma-hero__action-icon--blue" aria-hidden="true">
                                    <i class="fa-solid fa-circle-info"></i>
                                </span>
                                <span class="ma-hero__action-label">{{ __('Informações ao Usuário') }}</span>
                            </a>
                            <a href="{{ route('mobiangra.fale_conosco') }}" class="ma-hero__action-card">
                                <span class="ma-hero__action-icon ma-hero__action-icon--purple" aria-hidden="true">
                                    <i class="fa-solid fa-comments"></i>
                                </span>
                                <span class="ma-hero__action-label">{{ __('Fale Conosco') }}</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ma-hero__extras d-lg-none" aria-label="{{ __('Ações rápidas') }}">
            <div class="ma-hero__actions-grid ma-hero__actions-grid--mobile">
                <a href="{{ route('mobiangra.mapa') }}" class="ma-hero__action-card ma-hero__action-card--featured">
                    <span class="ma-hero__action-icon ma-hero__action-icon--blue" aria-hidden="true">
                        <i class="fa-solid fa-map-location-dot"></i>
                    </span>
                    <span class="ma-hero__action-label">{{ __('Mapa em tempo real') }}</span>
                </a>
                <a href="{{ route('mobiangra.horarios') }}" class="ma-hero__action-card">
                    <span class="ma-hero__action-icon ma-hero__action-icon--green" aria-hidden="true">
                        <i class="fa-solid fa-bus-simple"></i>
                    </span>
                    <span class="ma-hero__action-label">{{ __('Horários') }}</span>
                </a>
                <a href="{{ route('mobiangra.passageiro_cidadao') }}" class="ma-hero__action-card">
                    <span class="ma-hero__action-icon ma-hero__action-icon--blue" aria-hidden="true">
                        <i class="fa-solid fa-id-card"></i>
                    </span>
                    <span class="ma-hero__action-label">{{ __('Passageiro Cidadão') }}</span>
                </a>
                <a href="{{ route('mobiangra.informacoes') }}" class="ma-hero__action-card">
                    <span class="ma-hero__action-icon ma-hero__action-icon--blue" aria-hidden="true">
                        <i class="fa-solid fa-circle-info"></i>
                    </span>
                    <span class="ma-hero__action-label">{{ __('Informações ao Usuário') }}</span>
                </a>
                <a href="{{ route('mobiangra.fale_conosco') }}" class="ma-hero__action-card">
                    <span class="ma-hero__action-icon ma-hero__action-icon--purple" aria-hidden="true">
                        <i class="fa-solid fa-comments"></i>
                    </span>
                    <span class="ma-hero__action-label">{{ __('Fale Conosco') }}</span>
                </a>
            </div>
        </div>
    </div>
</section>
