@section('title', __('home.title') . ' - ' . config('app.name'))
@section('description', __('home.description'))
@section('tags', __('home.tags'))
@section('image', asset('/img/logo.png'))

@extends('layouts.app')

@section('head')

@endsection



@section('content')


@php
$servicos = [
  [
    "title" => __('solucoes.servicos.projeto_execucao.title'),
    "image" => "img/icon2.png",
    "text" => __('solucoes.servicos.projeto_execucao.text')
  ],
  [
    "title" => __('solucoes.servicos.usinagem.title'),
    "image" => "img/icon3.png",
    "text" => __('solucoes.servicos.usinagem.text')
  ],
  [
    "title" => __('solucoes.servicos.manutencao_preventiva.title'),
    "image" => "img/icon4.png",
    "text" => __('solucoes.servicos.manutencao_preventiva.text')
  ],
  [
    "title" => __('solucoes.servicos.manutencao_corretiva.title'),
    "image" => "img/icon5.png",
    "text" => __('solucoes.servicos.manutencao_corretiva.text')
  ],
  [
    "title" => __('solucoes.servicos.texturizacao.title'),
    "image" => "img/icon6.png",
    "text" => __('solucoes.servicos.texturizacao.text')
  ],
  [
    "title" => __('solucoes.servicos.gravacao_laser.title'),
    "image" => "img/icon7.png",
    "text" => __('solucoes.servicos.gravacao_laser.text')
  ],
  [
    "title" => __('solucoes.servicos.solda_laser.title'),
    "image" => "img/icon8.png",
    "text" => __('solucoes.servicos.solda_laser.text')
  ],
  [
    "title" => __('solucoes.servicos.tratamentos_superficiais.title'),
    "image" => "img/icon9.png",
    "text" => __('solucoes.servicos.tratamentos_superficiais.text')
  ],
  [
    "title" => __('solucoes.servicos.polimento_tecnico.title'),
    "image" => "img/icon10.png",
    "text" => __('solucoes.servicos.polimento_tecnico.text')
  ],
];
@endphp

<div id="root" >

    <section id="banner">
        <div class="swiper SlideSwiper desktop_only">
            <div class="swiper-wrapper ">
              @foreach ($slides as $slide)
              <div class="swiper-slide ">
                <img src="{{Storage::url($slide->image_desktop)}}" class="" style="height: 85vh;width:100%" alt="Imagem 1">
               </div>
              @endforeach
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        <div class="swiper SlideSwiper mobile_only">
            <div class="swiper-wrapper ">
              @foreach ($slides as $slide)
               <div class="swiper-slide ">
                 <img src="{{Storage::url($slide->image_mobile)}}" class="" style="height: 85vh;width:100%" alt="Imagem 1">
               </div>
              @endforeach
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
    </section>




    <div class="container my-5">
        <section id="servicos">
            <h6 class="text-center mb-2">{{ __('home.servicos') }}</h6>
            <h1 class="text-center ft-2-2" style="color: #002E63">{{ __('home.solutions_header') }}</h1>

            <div class="" style="position: relative">
                <div class="swiper SolucoesSwiper my-5">
                    <div class="swiper-wrapper">
                        @foreach ($servicos as $servico)
                         <div class="swiper-slide h-auto">
                            <a href="{{route("solucoes")}}" style="text-decoration: none">
                              <div class="box-solucoes p-4 h-100">
                                  <div class="">
                                   <img src="{{asset($servico["image"])}}" class="img-fluid" alt="">
                                  </div>
                                  <h1 class="ft-2-4 mt-3" style="color: #002E63">{{$servico["title"]}}</h1>
                                  <p>{{$servico["text"]}}</p>
                               </div>
                            </a>
                          </div>
                        @endforeach
                    </div>
                  </div>
                <div class="swiper-arrow-next"><ion-icon name="chevron-forward"></ion-icon></div>
                <div class="swiper-arrow-prev"><ion-icon name="chevron-back"></ion-icon></div>
            </div>

        </section>
    </div>

    <div class="container my-5 pt-md-5">
        <div class="row">
            <div class="col-md-6 my-3">
                <h1 class="ft-2-4" style="color:#002E63;">{{ __('home.quem_somos_title') }}</h1>
                <p class="mt-3">
                    {{ __('home.quem_somos_paragraph') }}
                </p>

                <div class="">
                    <a href="{{route("sobre")}}" class="btn btn-blue mt-3">{{ __('home.quem_somos_botao') }}</a>
                    <a href="https://api.whatsapp.com/send?phone=55{{ config('app.whatsapp') }}" target="_Blank" class="btn btn-whats ms-3 mt-3">{{ __('home.fale_conosco') }}</a>
                </div>
            </div>
            <div class="col-md-6 my-3">
               <div class='d-flex justify-content-center'><img src='{{asset("img/img8.png")}}' alt="Quem Somos" class='img-fluid'> </div>
            </div>
         </div>

         <div class="row justify-content-center mt-5">
            <div class="col-md-2 my-3">
                <h1 class="text-center text-black mb-0 ft-2-2">110</h1>
                <p class="text-black text-center">clientes satisfeitos</p>
            </div>
            <div class="col-md-2 my-3">
                <h1 class="text-center text-black mb-0 ft-2-2">+50</h1>
                <p class="text-black text-center">projetos concluídos</p>
            </div>
            <div class="col-md-2 my-3">
                <h1 class="text-center text-black mb-0 ft-2-2">214</h1>
                <p class="text-black text-center">manutenções realizadas</p>
            </div>
         </div>
    </div>

    <section id="galeria">
        <div class="container py-5">
            <div class="row h-auto pb-5 justify-content-center">
                  <div class="col-md-8 col-6 my-2">
                    <img src="{{asset("img/img2.png")}}" class="img-fluid w-100 h-100" alt="Imagem 1" style="max-height: 250px">
                  </div>
                  <div class="col-md-4 col-6 my-2">
                    <img src="{{asset("img/img1.png")}}" class="img-fluid w-100 h-100" alt="Imagem 2" style="max-height: 250px">
                  </div>
                  {{--  --}}
                  <div class="col-md-6 col-6 my-2">
                    <img src="{{asset("img/img3.png")}}" class="img-fluid w-100 h-100" alt="Imagem 3" style="max-height: 250px">
                  </div>
                  <div class="col-md-3 col-6 my-2">
                    <img src="{{asset("img/img4.png")}}" class="img-fluid w-100 h-100" alt="Imagem 4" style="max-height: 250px">
                  </div>
                  <div class="col-md-3 col-6 my-2">
                    <img src="{{asset("img/img5.png")}}" class="img-fluid w-100 h-100" alt="Imagem 5" style="max-height: 250px">
                  </div>
                  {{--  --}}
                  <div class="col-md-4 col-6 my-2">
                    <img src="{{asset("img/img6.png")}}" class="img-fluid w-100 h-100" alt="Imagem 6" style="max-height: 250px">
                  </div>
                  <div class="col-md-8 col-12 my-2">
                    <img src="{{asset("img/img7.png")}}" class="img-fluid w-100 h-100" alt="Imagem 7" style="max-height: 250px">
                  </div>
            </div>
        </div>
    </section>
</div>

<script>
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        slidesPerView:1,
        loop:true,
      centeredSlides: true,
      navigation: {
        nextEl: ".arow-next",
        prevEl: ".arow-prev",
      },
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
    });
    var swiper = new Swiper(".SolucoesSwiper", {
        spaceBetween: 30,
        loop:true,
      navigation: {
        nextEl: ".swiper-arrow-next",
        prevEl: ".swiper-arrow-prev",
      },
      breakpoints: {
        640: {
          slidesPerView: 2,
          spaceBetween: 30,
        },
        768: {
          slidesPerView: 3,
          spaceBetween: 30,
        },
        1024: {
          slidesPerView: 4,
          spaceBetween: 30,
        },
      },
    });
    var swiper2 = new Swiper(".SlideSwiper", {
        spaceBetween: 30,
        slidesPerView:1,
        loop:true,
      centeredSlides: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      effect:"fade",
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
    });

    const handlePhone = (event) => {
  let input = event.target
  input.value = phoneMask(input.value)
}

const phoneMask = (value) => {
  if (!value) return ""
  value = value.replace(/\D/g,'')
  value = value.replace(/(\d{2})(\d)/,"($1) $2")
  value = value.replace(/(\d)(\d{4})$/,"$1-$2")
  return value
}
  </script>

<script>
    $("#formContato").submit(function() {
        event.preventDefault();
        console.log($(this).serialize());
        $.ajax({
            type: "POST",
            url: "{{ route('Contato:contato') }}",
            data: $(this).serialize(),
            dataType: "json",
            success: function(response) {
                alert("Obrigado! Recebemos seu e-mail, entraremos em contato em breve!");
            },
            error: function(response) {
                alert("Ocorreu um erro ao enviar seu e-mail. Por favor, tente novamente.");
                console.log(response);
            }
        });
    });
</script>
@endsection