@extends('layouts.app')

@section('title', $title ?? 'Conheça nossas transportadoras para Serviços')

@section('meta')
    @php
      $ogTitle = "CoteFrete - Transportadoras para " . ($servico ?? 'Serviços');
      $ogDescription = "Escolha entre as melhores transportadoras para " . ($servico ?? 'Serviços') . " do Brasil";
      $ogUrl = request()->url();
    @endphp
    <meta name="description" content="{{ $ogDescription }}" />
    <meta name="robots" content="index, follow">
    <meta name="author" content="CoteFrete">
    <link rel="canonical" href="{{ $ogUrl }}">
    @include('partials.meta-social', [
      'ogType' => 'website',
      'ogTitle' => $ogTitle,
      'ogDescription' => $ogDescription,
      'ogUrl' => $ogUrl
    ])
    @include('partials.include-sitemap')
@endsection

@push('styles')
    <link rel="stylesheet" href="/assets/css/transportadoras-servicos.css">
@endpush

@push('scripts')
    <!-- Schema.org BreadcrumbList -->
    @include('partials.schema-breadcrumb', [
        'items' => [
            ['name' => 'Home', 'url' => url('/')],
            ['name' => "Transportadoras para " . ($servico ?? 'Serviços'), 'url' => request()->url()]
        ]
    ])
    
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "ItemList",
        "name": "Transportadoras para {{ $servico ?? 'Serviços' }}",
        "description": "Lista de transportadoras para {{ $servico ?? 'Serviços' }}",
        "url": "{{ request()->url() }}",
        "numberOfItems": "{{ isset($transportadoras) ? count($transportadoras) : 0 }}",
        "itemListElement": [
            {
                "@type": "ListItem",
                "position": 1,
                "item": {
                    "@type": "Organization",
                    "name": "Transportadoras CoteFrete"
                }
            }
        ]
    }
    </script>
    <script src="{{ asset('assets/js/jquery.min.js') }}"></script>
    <script>
        window.linkServico = '{{ $linkServico ?? '' }}';
    </script>
    <script src="{{ asset('assets/js/transportadoras-servicos.js') }}"></script>
@endpush

@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 aria-current="page" style="color: #666;">{{ $servico ?? 'Serviços' }}</li>
            </ol>
        </nav>
        <div class="row">
            <div class="col-lg-12">
                <h1 class="fs36 fs24m fwb black">{{ $servico ?? 'Serviços' }}</h1>
            </div>
        </div>
        <div style='display: flex; flex-direction: row'>
            <div style='margin-right: 5px'>
                <span class='fw600 fs18' style='color: #000;'>Faça uma cotação de sua carga de transporte</span>
            </div>
        </div>
        <a class='h40 btn-cotar bg-blue df-ac-jc w100 mt20' href="/cotacao">
            <span class='lh20 fwb white fs18 txt-center'>Cotar Frete de {{ $servicoSeo ?? 'Serviços' }}</span>
        </a>
        <div class="w100 df-afe-jsb coluna-m linha mt30 filtro-transportadoras">
            <div class="w49 w100m">
                <h4 class="fs16 fwb mb15">Informe a transportadora que deseja encontrar</h4>
                <input class="form-contato w100 input-buscar" type="text" id="buscar" placeholder="Pesquisa por nome">
            </div>
            <div class="w2 w100m h10m"></div>
            <div class="w49 w100m">
                <h4 class="fs16 fwb mb15">Selecione o estado</h4>
                <select id="select_estado" class="form-contato w100 select-estado">
                    <option value="" disabled selected>Selecione o estado</option>
                    @foreach($estados ?? [] as $estado)
                        <option value="{{ $estado['link'] }}">{{ $estado['nome'] }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class='row mt30'>
            @foreach($transportadoras ?? [] as $dadosTransportadora)
                @include('cards-transportadoras', ['dados_transportadora' => $dadosTransportadora])
            @endforeach
            <div class='col-lg-12 mt20'>
                <h6 style='line-height: 25px'>
                    Frete de {{ $servicoSeo ?? 'Serviços' }} para todo o Brasil. Nem todas as cargas devem ser transportadas de forma convencional e é nesse momento que as transportadoras de {{ $servicoResumido ?? 'serviços' }} entram em cena. As transportadoras especializadas são empresas que possuem expertise em transportar esse tipo de carga, dispondo de equipes especializadas, equipamentos adequados e procedimentos rigorosos para garantir a segurança e a integridade das cargas transportadas.<br><br>
                    Um dos principais benefícios de realizar {{ $txtServico ?? 'frete de serviços' }} com transportadoras especializadas é a redução de riscos e a minimização de prejuízos em caso de imprevistos, bem como flexibilidade e a agilidade na entrega das cargas. Desta forma, você consegue ter maior previsibilidade e segurança ao contratar um serviço de qualidade e que atenda a sua demanda!<br><br>
                    Além disso, as transportadoras para {{ $servicoResumido ?? 'serviços' }} buscam estar sempre atualizadas sobre as normas e regulamentações que envolvem o transporte de cargas, garantindo que as operações sejam realizadas dentro das normas estabelecidas pelos órgãos reguladores brasileiros.
                </h6>
            </div>
        </div>
    </div>
@endsection