@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 d-none d-lg-block">
      <div class="row mt-n5 px-2">
        
        @php
        $menuMain = $menu->getMenuListAll();
        
        foreach ($menuMain as $key => $grupo) {
          
          switch (str_slug($grupo->grupo_grupo, '-')) {
            case 'ferramentas':
            $ferramentas = $grupo;
            break;
            
            case 'hidraulica':
            $hidraulica = $grupo;
            break;
            
            case 'iluminacao':
            $iluminacao = $grupo;
            break;
            
            case 'materiais-de-construcao':
            $materiais = $grupo;
            break;
            
            default:
            break;
          }
        }
        @endphp
        
        <div class="col-lg px-1">
          <div class="new-border">
            <div class="color-img cat-1">
              <div class="titulo">
                <h4 class="font-weight-bolder text-center white-text my-3">Ferramentas</h4>
              </div>
              <div class="thumb text-center">
                <img src="{{asset("/storage/images/pdt-3.png")}}" class="img-fluid">
              </div>
            </div>
            
            <div class="pt-5 pb-3 mt-5">
              <div class="text-center">
                <a href="{{ route('front.list.grupo', [str_slug($ferramentas->grupo_grupo, '-'), $ferramentas->grupo_id]) }}" class="btn btn-md rounded elegant-color font-weight-bold  white-text px-5">
                  VISUALIZAR <i class="fas fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div>
            
          </div>
        </div>
        
        <div class="col-lg px-1">
          <div class="new-border">
            <div class="color-img cat-1">
              <div class="titulo">
                <h4 class="font-weight-bolder text-center white-text my-3">Hidráulica</h4>
              </div>
              <div class="thumb text-center">
                <img src="{{asset("/storage/images/pdt-3.png")}}" class="img-fluid">
              </div>
            </div>
            
            <div class="pt-5 pb-3 mt-5">
              <div class="text-center">
                <a href="{{ route('front.list.grupo', [str_slug($hidraulica->grupo_grupo, '-'), $hidraulica->grupo_id]) }}" class="btn btn-md rounded elegant-color font-weight-bold white-text px-5">
                  VISUALIZAR <i class="fas fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div>
            
          </div>
        </div>
        
        <div class="col-lg px-1">
          <div class="new-border">
            <div class="color-img cat-1">
              <div class="titulo">
                <h4 class="font-weight-bolder text-center white-text my-3">Iluminação</h4>
              </div>
              <div class="thumb text-center">
                <img src="{{asset("/storage/images/pdt-3.png")}}" class="img-fluid">
              </div>
            </div>
            
            <div class="pt-5 pb-3 mt-5">
              <div class="text-center">
                <a href="{{ route('front.list.grupo', [str_slug($iluminacao->grupo_grupo, '-'), $iluminacao->grupo_id]) }}" class="btn btn-md rounded elegant-color font-weight-bold white-text px-5">
                  VISUALIZAR <i class="fas fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div>
            
          </div>
        </div>
        
        <div class="col-lg px-1">
          <div class="new-border">
            <div class="color-img cat-1">
              <div class="titulo">
                <h4 class="font-weight-bolder text-center white-text my-3">Material de Construção</h4>
              </div>
              <div class="thumb text-center">
                <img src="{{asset("/storage/images/pdt-3.png")}}" class="img-fluid">
              </div>
            </div>
            
            <div class="pt-5 pb-3 mt-5">
              <div class="text-center">
                <a href="{{ route('front.list.grupo', [str_slug($materiais->grupo_grupo, '-'), $materiais->grupo_id]) }}" class="btn btn-md rounded elegant-color font-weight-bold white-text px-5">
                  VISUALIZAR <i class="fas fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div>
            
          </div>
        </div>
        
      </div>
    </div>
  </section>
  --}}
  
  <section>
    <div class="container">
      <div class="text-center text-md-left mt-5">
        <div class="row">
          
          <div class="col-lg">
            <div class="row">
              <div class="col-lg-3 text-md-right text-center">
                <img src="{{ asset('storage/images/frete_.png') }}">
              </div>
              <div class="col-lg">
                <h5 class="font-weight-bold fosco-text">RETIRE NA LOJA</h5>
                <h6 class="fosco-text font-weight-bolder">veja as condições</h6>
              </div>
            </div>
          </div>
          
          {{-- <div class="col-lg">
            <div class="row">
              <div class="col-lg-3 text-md-right text-center">
                <img src="{{ asset('storage/images/parcelamento.png') }}">
              </div>
              <div class="col-lg">
                <h5 class="font-weight-bold fosco-text">ATÉ {!! config('cart.parc_sem_juros')!!}x S/ JUROS</h5>
                <h6 class="fosco-text font-weight-bolder">no cartão de crédito</h6>
              </div>
            </div>
          </div> --}}
          
          <div class="col-lg">
            <div class="row">
              <div class="col-lg-3 text-md-right text-center">
                <img src="{{ asset('storage/images/preco.png') }}">
              </div>
              <div class="col-lg">
                <h5 class="font-weight-bold fosco-text">PREÇO EXCLUSIVO</h5>
                <h6 class="fosco-text font-weight-bolder">para compras no site</h6>
              </div>
            </div>
          </div>
          
          <div class="col-lg">
            <div class="row">
              <div class="col-lg-3 text-md-right text-center">
                <img src="{{ asset('storage/images/promocao.png') }}">
              </div>
              <div class="col-lg">
                <h5 class="font-weight-bold fosco-text">PROMOÇÕES</h5>
                <h6 class="fosco-text font-weight-bolder">toda semana</h6>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </section>
  
  <section>
    
    {{-- Area 1 --}}
    <div class="container">
      <div class="cat-3">
        
        <div class="title d-flex mt-5 justify-content-center font-weight-bold">
          <h2 class="fosco-text text-center font-nunito">Produtos em destaque</h2>
        </div>
        
        <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>
        
      </div>
    </div>
    
    {{-- Area 2 --}}
    <div class="container">
      <div class="cat-1">
        
        <div class="title d-flex mt-5 justify-content-center font-weight-bold">
          <h2 class="fosco-text text-center font-nunito">Confira nossas promoções</h2>
        </div>
        
        <div class="row d-lg-block d-none">
          <div class="carousel-secondary d-flex align-items-stretch">
            @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>
        
      </div>
      
    </div>
    
    {{-- Area 3 --}}
    <div class="container">
      <div class="cat-2">
        
        <div class="title d-flex mt-5 justify-content-center font-weight-bold">
          <h2 class="fosco-text text-center font-nunito">Produtos recentes</h2>
        </div>
        
        <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>
        
      </div>
    </div>
            
  </section>
  
  @endsection