@extends('templates.theme-five')

@section('titulo-pagina')
    @empty($site->informacao->nome_comercial)
        Áreas de atuação
    @else
        {{ $site->informacao->nome_comercial }} - Áreas de atuação
    @endif
@endsection

@section('menu-areas')
    active
@endsection

@section('header')
    <div class="text-end">
        <h1>Áreas de atuação</h1>
    </div>
@endsection

@section('imagem-header')
    {{$site ->adicional->imagem_principal ? route('mostrarImagemAdicional', ['nomeDoArquivo' => $site ->adicional->imagem_principal, 'user'=>$site->user->id ]) : 'teste'}}
@endsection

@section('container')
    <section class="container mt-4">
        <div class="row justify-content-center">
            <div class="col-10 h6">
                {!!$conteudos['texto_sobre_atuacao'][0] -> descricao ?? '' !!}
            </div>
        </div>
    </section>

    <section class="container">
    <div class="row area-atuacao justify-content-center ">
        <div class="col-10">
            <div class="row ">
                @foreach($site->informacao->areas as $area)
                    <div class="area-itens-2 col-12 col-md-6 mt-3 mt-sm-0 ">
                        <div class="item d-flex align-items-end flex-column  " style="height:200px;">
                            <h3 class="mt-auto ">
                                {{$area->nome}}
                            </h3>
                            <span class="mascara"></span>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')
    <script>

    </script>
@endsection