@extends('layout.app')

@section('title', $page->title)
@section('description', $page->description)

@section('body')
    <div class="intro-section">
        <div class="main-header">
            <div class="main-header_content">
                <a href="{{ route('home.show') }}" aria-current="page" class="main-header_content_logo w-inline-block w--current">
                    <img src="{{ Storage::url(json_decode(setting('site.site_logo_svg'))[0]->download_link) }}" width="178" height="100%" alt="Logo" class="lazy">
                </a>
                <div class="main-header_content_menu">
                    <a href="{{ route('search.index', ["categoria" => ['Apartamento', 'Casa', 'Sítio']]) }}" class="main-header_content_menu_item w-inline-block">
                        <img src="/images/imovel-icon_2.svg" width="14" alt="" class="main-header_content_phone-icon">
                        <div class="main-header_content_phone-text">Aluguéis Residenciais</div>
                    </a>
                    <a href="{{ route('search.index', ["categoria" => ['Área', 'Hotel', 'Loja', 'Prédio Comercial', 'Salas/Conjuntos']]) }}" class="main-header_content_menu_item w-inline-block">
                        <img src="/images/icone-ponto-comercial_1.svg" width="21" alt="" class="main-header_content_phone-icon">
                        <div class="main-header_content_phone-text">Aluguéis Comerciais</div>
                    </a>
                    <a href="#" class="favorite-menu main-header_content_menu_item w-inline-block">
                        <img src="/images/favorito-icon.svg" width="16" alt="" class="main-header_content_phone-icon">
                        <div class="main-header_content_phone-text">Meus Favoritos</div>
                    </a>
                </div>
            </div>
        </div>
        @include('partials.menu.mobileTransparent')
        <div class="intro-section_content">
            <div class="container container-100">
                <div class="search-box_align">
                    <div class="search-box">
                        @include('partials.menu.searchContent')
                    </div>
                </div>
                <h1 class="intro-section_content_h1">Aluguel de imóveis em Gramado!</h1>
            </div>
        </div>
    </div>
    <div class="infos-section">
        <div class="container">
            <div class="infos-section_content">
                <div class="infos-section_content_left">
                    <h2 class="infos-section_content_left_h2">Procure, visite e administre o seu aluguel online.</h2>
                    <p class="infos-section_content_left_p">A Mapa do Imóvel oferece o processo de aluguel completo pelo site. Pesquise o imóvel perfeito, agende a visita e envie todos os documentos necessários pelo próprio smartphone.</p>
                </div>
                <div class="infos-section_content_right">
                    <div class="infos-section_content_right_item">
                        <div class="infos-section_content_right_item_bullet">
                            <div class="infos-section_content_right_item_bullet_txt">1</div>
                        </div>
                        <p class="infos-section_content_right_item_txt">Faça a sua pesquisa de imóveis na Serra Gaúcha.</p>
                    </div>
                    <div class="infos-section_content_right_item">
                        <div class="infos-section_content_right_item_bullet">
                            <div class="infos-section_content_right_item_bullet_txt">2</div>
                        </div>
                        <p class="infos-section_content_right_item_txt">Gostou de um imóvel? Agende a visita diretamente pelo site.</p>
                    </div>
                    <div class="infos-section_content_right_item">
                        <div class="infos-section_content_right_item_bullet">
                            <div class="infos-section_content_right_item_bullet_txt">3</div>
                        </div>
                        <p class="infos-section_content_right_item_txt">Decidiu pelo aluguel? A Mapa facilita todo o processo de locação pra você.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="infos-section_footer">
            <div class="container">
                <div class="infos-section_footer_content">
                    <h2 class="infos-section_content_left_h2">Você também pode alugar o seu imóvel conosco.</h2>
                    <p class="infos-section_content_left_p">Para você que tem um imóvel na Serra Gaúcha e tem interesse em alugar, a Mapa administra as visitas e tira fotos profissionais para divulgar.</p>
                    <a href="{{ route('rentProperty.show') }}" class="button pink w-inline-block">
                        <img src="/images/imovel-icon.svg" width="16" alt="" class="button_icon">
                        <div class="button_text">Quero alugar meu imóvel</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="list-section">
        <div class="container-properties">
            @if(count($properties) > 4)
                <h2 class="search-page_header_h1"><strong>Confira os </strong>nossos destaques</h2>
                <div class="list-section_row">
                    @foreach($properties as $property)
                        @if(is_array($property))
                            @include('partials.propertyBox')
                        @endif
                    @endforeach
                </div>
            @else
                <h2 class="section-h2">Não há imóveis em destaque</h2>
            @endif
        </div>
    </div>
@endsection