@if (count(@$solucoes) > 0)
<section class="c-solucoes">
    <div class="container c-solucoes__wrap">
        <div class="c-solucoes__header">
            <div class="c-solucoes__header__item">
                <h2 class="c-solucoes__header__title">{{ __('messages.home_titulo_solucao') }}</h2>
            </div>
            <div class="c-solucoes__header__item">
                <p>{{ __('messages.home_subtitulo_solucao') }}</p>
            </div>
        </div>
        <div class="c-solucoes__tab">
            <nav class="c-solucoes__tab__nav">
                <div>
                @if ($solucoes)
                    @foreach($solucoes as $key => $sol)

                        <a class="c-solucoes__tab__toggle c-button --secondary js-tab-toggle {{($key == 0) ? 'is-active' : ''}}" href="#">{{@$sol->solucao->shortname}}</a>
                    @endforeach
                @endif
                </div>
            </nav>
            <div class="c-solucoes__tab__items">
                @if ($solucoes)

                    @foreach($solucoes as $key => $sol)
                        <div class="c-solucoes__tab__item js-tab-box {{($key == 0) ? 'is-active' : ''}}">
                            <div class="c-solucoes__tab__content">
                                <div class="c-solucoes__tab__info">
                                    <h3 class="c-solucoes__tab__title">{{$sol->titulo}}</h3>
                                    {!!$sol->description!!}
                                    @if ($sol->btncta)
                                        <a class="c-button" href="{{$sol->btnlinkcta}}">{{$sol->btncta}}</a>
                                    @endif
                                </div>
                                <div class="c-solucoes__tab__cover">
                                    @php $imageSol = ($sol->image != '') ? url('storage/solucaoHome/'.$sol->image) : asset('assets/img/content/illustration.png'); @endphp
                                    <img src="{{$imageSol}}" alt="{{ $sol->solucao->name }}">
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif

            </div>
        </div>
    </div>
</section>
@endif
