@extends('layouts.app')

@section('title', 'Encontre as melhores transportadoras para ' . ($servico ?? 'Serviços') . ' em ' . ($nomeEstado ?? 'Estado'))

@section('meta')
<meta name="description" content="Escolha entre as melhores transportadoras para {{ $servico ?? 'Serviços' }} em {{ $nomeEstado ?? 'Estado' }}" />
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:title" content="CoteFrete - Transportadoras para {{ $servico ?? 'Serviços' }} em {{ $nomeEstado ?? 'Estado' }}" />
<meta property="og:url" content="{{ request()->url() }}" />
<meta property="og:description" content="Escolha entre as melhores transportadoras para {{ $servico ?? 'Serviços' }} em {{ $nomeEstado ?? 'Estado' }}" />
<meta property="og:image" itemprop="image" content="{{ asset('assets/img/img-comp.webp') }}">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<link rel="canonical" href="{{ request()->url() }}">
@include('partials.include-sitemap')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "name": "Transportadoras para {{ $servico ?? 'Serviços' }} em {{ $nomeEstado ?? 'Estado' }}",
  "description": "Lista de transportadoras para {{ $servico ?? 'Serviços' }} em {{ $nomeEstado ?? 'Estado' }}",
  "url": "{{ request()->url() }}",
  "numberOfItems": "{{ isset($transportadoras) ? count($transportadoras) : 0 }}",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@type": "Organization",
        "name": "Transportadoras CoteFrete"
      }
    }
  ]
}
</script>
@endsection

@section('content')
@include('botao-whatsapp')

<div class="container mt120">
  <nav aria-label="Breadcrumb" style="font-size: 14px;">
    <ol style="list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;">
      <li><a href="/" class="black p0" style="text-decoration: none;">CoteFrete</a></li>
      <li style="color: #999;">></li>
      <li><a href="/servicos" class="black p0" style="text-decoration: none;">Serviços</a></li>
      <li style="color: #999;">></li>
      <li><a href="/transportadoras-servicos/{{ $linkServico ?? '' }}" class="black p0" style="text-decoration: none;">{{ $servico ?? 'Serviços' }}</a></li>
      <li style="color: #999;">></li>
      <li aria-current="page" style="color: #666;">{{ $nomeEstado ?? 'Estado' }}</li>
    </ol>
  </nav>
  <div class="row">
    <div class="col-lg-12">
      <h1 class="fs36 fs24m fwb black">Cote com as melhores transportadoras para {{ $servico ?? 'Serviços' }} em {{ $nomeEstado ?? 'Estado' }}</h1>
    </div>
    <div class='col-lg-12 mb30 mt20'>
      <div class='coluna gap10'>
        <h6 class='w100' style='line-height: 25px;'>
          {{ $nomeServicoSeo2 ?? 'Serviços' }} em {{ $nomeEstado ?? 'Estado' }}. Se você está procurando caminhão ou carreto para {{ $servicoAlternativo ?? 'Serviços' }} em {{ $nomeEstado ?? 'Estado' }}, podemos te ajudar a encontrar a empresa perfeita para o seu negócio.
        </h6>
        <h6 class='w100' style='line-height: 25px;'>
          Para solicitar uma cotação de frete é só selecionar uma das empresas abaixo e clicar no botão de solicitar cotação. Após isso, basta preencher o formulário e aguardar a proposta de frete da transportadora selecionada por Email ou WhatsApp.
        </h6>
      </div>
    </div>
  </div>
  <div class='w100 coluna' style='justify-content: flex-end'>
    <a class='btn-cotar bg-blue h50 df-ac-jc w100' href="/cotacao">
      <span class='lh20 fwb white fs18 txt-center'>Faça uma cotação agora</span>
    </a>
    <div class='w100'>
      <label class='mt20 mb10'>Selecione uma cidade</label>
      <select id="select_cidade" class='w100 rota-sel black fw500 fs16 br7 cpt'>
        <option value="" disabled selected>Selecione uma cidade</option>
        @foreach($cidades ?? [] as $cidade)
          <option value="{{ $cidade['link'] }}">{{ $cidade['nome'] }}</option>
        @endforeach
      </select>
    </div>
  </div>
  <div class='w100 mt30 mb50'>
    <div>
      @foreach($transportadoras ?? [] as $dadosTransportadora)
        @include('cards-transportadoras', ['dados_transportadora' => $dadosTransportadora])
      @endforeach
    </div>
  </div>
  <a class='btn-cotar bg-blue w100 h50 df-ac-jc mb30' href="/transportadoras/pagina-1">
    <span class='lh20 fwb white fs18 txt-center'>Ver as transportadoras na CoteFrete</span>
  </a>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script>
  window.nomeServicoLink = '{{ $nomeServicoLink ?? '' }}';
  window.nomeEstadoUrl = '{{ $nomeEstadoUrl ?? '' }}';
</script>
<script src="{{ asset('assets/js/transportadoras-servicos-estado.js') }}"></script>
@endpush