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

@extends('layouts.app')

@section('head')

@endsection

@section('content')

<div id="root">
   <section id="header" class="py-5">
      <h1 class="text-white text-center">{{ __('sobre.header') }}</h1>
   </section>
   <div class="container my-5">
      <div class="row">
         <div class="col-md-6 my-3">
             <h1 class="text-black ft-2-4">{{ __('sobre.intro_title') }}</h1>
             <p class="mt-3">
                {{ __('sobre.intro_paragraph') }}
             </p>
         </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">{{ __('sobre.estatisticas.clientes') }}</h1>
            <p class="text-black text-center">{{ __('sobre.estatisticas.texto_clientes') }}</p>
        </div>
        <div class="col-md-2 my-3">
            <h1 class="text-center text-black mb-0">+50</h1>
            <p class="text-black text-center">{{ __('sobre.estatisticas.texto_projetos') }}</p>
        </div>
        <div class="col-md-2 my-3">
            <h1 class="text-center text-black mb-0">214</h1>
            <p class="text-black text-center">{{ __('sobre.estatisticas.texto_manutencoes') }}</p>
        </div>
     </div>
   </div>
   {{-- <section id="nova-surface" class="py-5">
      <div class="container">
         <h2 class="text-center text-black">{{ __('sobre.nova_surface_title') }}</h2>
         <p class="text-black">{{ __('sobre.nova_surface_description') }}</p>
         <div class="row">
            <div class="col-md-6 my-3">
               <h3 class="text-black">{{ __('sobre.nova_surface_fundacao') }}</h3>
               <p class="text-black">{{ __('sobre.nova_surface_fundacao_text') }}</p>
               <h3 class="text-black">{{ __('sobre.nova_surface_localizacao') }}</h3>
               <p class="text-black">{{ __('sobre.nova_surface_localizacao_text') }}</p>
               <h3 class="text-black">{{ __('sobre.nova_surface_competencias') }}</h3>
               <ul class="text-black">
                  <li>{{ __('sobre.nova_surface_competencias_1') }}</li>
                  <li>{{ __('sobre.nova_surface_competencias_2') }}</li>
                  <li>{{ __('sobre.nova_surface_competencias_3') }}</li>
               </ul>
               <h3 class="text-black">{{ __('sobre.nova_surface_especializacao') }}</h3>
               <p class="text-black">{{ __('sobre.nova_surface_especializacao_text') }}</p>
            </div>
            <div class="col-md-6 my-3">
               <h3 class="text-black">{{ __('sobre.nova_surface_servicos') }}</h3>
               <ul class="text-black">
                  <li>{{ __('sobre.nova_surface_servicos_1') }}</li>
                  <li>{{ __('sobre.nova_surface_servicos_2') }}</li>
                  <li>{{ __('sobre.nova_surface_servicos_3') }}</li>
               </ul>
               <h3 class="text-black">{{ __('sobre.nova_surface_tecnologia') }}</h3>
               <ul class="text-black">
                  <li>{{ __('sobre.nova_surface_tecnologia_1') }}</li>
                  <li>{{ __('sobre.nova_surface_tecnologia_2') }}</li>
                  <li>{{ __('sobre.nova_surface_tecnologia_3') }}</li>
               </ul>
               <h3 class="text-black">{{ __('sobre.nova_surface_parcerias') }}</h3>
               <p class="text-black">{{ __('sobre.nova_surface_parcerias_text') }}</p>
            </div>
         </div>
         <div class="row">
            <div class="col-md-6 my-3">
               <h3 class="text-black">{{ __('sobre.nova_surface_infraestrutura') }}</h3>
               <ul class="text-black">
                  <li>{{ __('sobre.nova_surface_infraestrutura_1') }}</li>
                  <li>{{ __('sobre.nova_surface_infraestrutura_2') }}</li>
                  <li>{{ __('sobre.nova_surface_infraestrutura_3') }}</li>
               </ul>
               <h3 class="text-black">{{ __('sobre.nova_surface_tecnologias') }}</h3>
               <ul class="text-black">
                  <li>{{ __('sobre.nova_surface_tecnologias_1') }}</li>
                  <li>{{ __('sobre.nova_surface_tecnologias_2') }}</li>
                  <li>{{ __('sobre.nova_surface_tecnologias_3') }}</li>
               </ul>
            </div>
            <div class="col-md-6 my-3">
               <h3 class="text-black">{{ __('sobre.nova_surface_rede_global') }}</h3>
               <p class="text-black">{{ __('sobre.nova_surface_rede_global_text') }}</p>
               <h3 class="text-black">{{ __('sobre.nova_surface_compromissos') }}</h3>
               <ul class="text-black">
                  <li>{{ __('sobre.nova_surface_compromissos_1') }}</li>
                  <li>{{ __('sobre.nova_surface_compromissos_2') }}</li>
                  <li>{{ __('sobre.nova_surface_compromissos_3') }}</li>
               </ul>
               <h3 class="text-black">{!! __('sobre.nova_surface_contato') !!}</h3>
               <p class="text-black">{!! __('sobre.nova_surface_contato_text') !!}</p>
            </div>
         </div>
      </div>
   </section> --}}
   <section id="missao">
      <div class="container">
          <div class="row">
             <div class="col-md-4 my-3">
                 <h1 class="text-white" style="font-size: 1.2rem"><img src="{{asset("img/missao.png")}}" alt="{{ __('sobre.missao_alt') }}" class="img-fluid me-2">{{ __('sobre.missao') }}</h1>
                 <p class="text-white">{{ __('sobre.missao_texto') }}</p>
             </div>
             <div class="col-md-4 my-3">
                 <h1 class="text-white" style="font-size: 1.2rem"><img src="{{asset("img/visao.png")}}" alt="{{ __('sobre.visao_alt') }}" class="img-fluid me-2">{{ __('sobre.visao') }}</h1>
                 <p class="text-white">{{ __('sobre.visao_texto') }}</p>
             </div>
             <div class="col-md-4 my-3">
                 <h1 class="text-white" style="font-size: 1.2rem"><img src="{{asset("img/valores.png")}}" alt="{{ __('sobre.valores_alt') }}" class="img-fluid me-2">{{ __('sobre.valores') }}</h1>
                 <p class="text-white">{{ __('sobre.valores_texto') }}</p>
             </div>
          </div>
      </div>
   </section>


   <div class="container mt-5">
      <div class="row h-auto justify-content-center my-3">
         <div class="col-md-4 h-auto my-3">
            <img src="{{asset("img/img1.jpg")}}" class="img-fluid w-100" alt="" style="height: 250px;object-fit:cover;">
         </div>
         <div class="col-md-4 h-auto my-3">
            <img src="{{asset("img/img2.jpg")}}" class="img-fluid w-100" alt="" style="height: 250px;object-fit:cover;">
         </div>
         <div class="col-md-4 h-auto my-3">
            <img src="{{asset("img/img3.jpg")}}" class="img-fluid w-100" alt="" style="height: 250px;object-fit:cover;">
         </div>
         <div class="col-md-4 h-auto my-3">
            <img src="{{asset("img/img4.jpg")}}" class="img-fluid w-100" alt="" style="height: 250px;object-fit:cover;">
         </div>
         <div class="col-md-4 h-auto my-3">
            <img src="{{asset("img/img5.jpg")}}" class="img-fluid w-100" style="height: 250px;object-fit:cover;" alt="">
         </div>
      </div>
  </div>
</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,
        slidesPerView:4,
        loop:true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    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