@extends('layouts.front.app')

@section('og')
<meta property="og:locale" content="{{ app()->getLocale() }}"/>
<meta property="og:type" content="home"/>
<meta property="og:title" content="{{ config('app.name') }} - Home"/>
<meta property="og:site_name" content="{{ config('app.name') }}"/>
<meta property="og:description" content="{{ config('site.description') }}"/>
@endsection

@section('content')

<section>
  <div class="container">
    <div class="text-center text-md-left my-4">
      <div class="row">
        
        <div class="col-lg bg-white py-4">
          <div class="row">
            <div class="col-lg-3 text-md-right text-center">
              <img src="{{ asset('storage/images/suporte.png') }}">
            </div>
            <div class="col-lg">
              <h5 class="font-weight-bold fosco-text mb-0">Precisa de ajuda?</h5>
              <h6 class="font-weight-bolder fosco-text mb-0">entre em contato conosco</h6>
            </div>
          </div>
        </div>
        
        <div class="col-lg bg-white py-4">
          <div class="row">
            <div class="col-lg-3 text-md-right text-center">
              <img src="{{ asset('storage/images/economia.png') }}">
            </div>
            <div class="col-lg">
              <h5 class="font-weight-bold fosco-text mb-0">Veja nossos produtos</h5>
              <h6 class="fosco-text font-weight-bolder mb-0">e aproveite as nossas ofertas</h6>
            </div>
          </div>
        </div>
        
        <div class="col-lg bg-white py-4">
          <div class="row">
            <div class="col-lg-3 text-md-right text-center">
              <img src="{{ asset('storage/images/pagamento.png') }}">
            </div>
            <div class="col-lg">
              <h5 class="font-weight-bold fosco-text mb-0">Pagamento Facilitado</h5>
              <h6 class="fosco-text font-weight-bolder mb-0">
                em até {{config('site.sem_juros')}}x sem juros
              </h6>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</section>

<section>
  
  {{-- Area 1 --}}
  <div class="container my-5">
    
    <div class="categoria">
      
      <h2 class="text-white font-weight-bolder font-nunito mb-md-n2 ml-1 py-1">
        <span class="primary px-3">Confira nossas promoções</span>
      </h2>
      
      @if($promocionais->count() > 0)
      
      <div class="d-lg-block d-none">
        <div class="carousel-secondary">
          @include(config('site.domain').'.front.products.product-carousel', ['products' => $promocionais])
        </div>
      </div>
      
      <div class="d-block d-lg-none">
        @include(config('site.domain').'.front.products.product-list-mobile', ['products' => $promocionais])
      </div>
      
      @else 
      
      <div class="alert alert-warning font-weight-bold mt-4">
        não há produtos cadastrados  
      </div>
      
      @endif
      
    </div> 
    
  </div>
  
  {{-- Area 2 --}}
  <div class="container mb-5 ">
    
    <div class="categoria">
      
      <h2 class="text-white font-weight-bolder font-nunito mb-md-n2 ml-1 py-1">
        <span class="primary px-3">Produtos Recentes</span>
      </h2>
      
      @if($novos->count() > 0)
      
      <div class="d-lg-block d-none">
        <div class="carousel-secondary">
          @include(config('site.domain').'.front.products.product-carousel', ['products' => $novos])
        </div>
      </div>
      
      <div class="d-block d-lg-none">
        @include(config('site.domain').'.front.products.product-list-mobile', ['products' => $novos])
      </div>
      
      @else 
      
      <div class="alert alert-warning font-weight-bold mt-4">
        não há produtos cadastrados  
      </div>
      
      @endif
      
    </div>
    
  </div>
  
  {{-- Area 3 --}}
  <div class="container">
    
    <div class="categoria">
      
      <h2 class="text-white font-weight-bolder font-nunito mb-md-n2 ml-1 py-1">
        <span class="primary px-3">Produtos em destaque</span>
      </h2>
      
      @if($novos->count() > 0)
      
      <div class="d-lg-block d-none">
        <div class="carousel-secondary">
          @include(config('site.domain').'.front.products.product-carousel', ['products' => $products])
        </div>
      </div>
      
      <div class="d-block d-lg-none">
        @include(config('site.domain').'.front.products.product-list-mobile', ['products' => $products])
      </div>
      
      @else 
      
      <div class="alert alert-warning font-weight-bold mt-4">
        não há produtos cadastrados  
      </div>

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

@endsection