@extends('layouts.app')

@section('title', 'Agradecemos o envio de sua cotação')

@section('meta')
    @php
        $ogDescription = "Sua cotação foi enviada com sucesso! Receba propostas de transportadoras confiáveis em minutos.";
    @endphp
    <meta name="description" content="Sua cotação de frete foi enviada com sucesso! Receba propostas de transportadoras confiáveis em minutos. Compare preços, prazos e condições no Cote Frete."/>
    <meta name="robots" content="index, follow">
    <meta name="author" content="CoteFrete">
    <link rel="canonical" href="{{ url('agradecimento-cotacao') }}" />
    <link rel="stylesheet" href="/assets/css/style.min.css?v=86">
    <link rel="stylesheet" href="/assets/css/agradecimento-cotacao.css?v=1">
    <link rel="shortcut icon" href="/assets/img/fav.ico">
    @include('partials.meta-social', [
        'ogType' => 'website',
        'ogTitle' => 'Agradecemos o Envio de sua Cotação - CoteFrete',
        'ogDescription' => $ogDescription,
        'ogUrl' => url('agradecimento-cotacao')
    ])

    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);} 
        window.onload = function(){
            var script = document.createElement('script');
            script.src = 'https://www.googletagmanager.com/gtag/js?id=G-H2P9KVG22F';
            script.defer = true;
            script.onload = function(){ gtag('js', new Date()); gtag('config', 'G-H2P9KVG22F'); };
            document.head.appendChild(script);
        };
    </script>
@endsection

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

    <main class="thankyou thankyou-page">
        <section class="agradecimento-hero">
            <div class="container-hero">
                <div class="agradecimento-hero__layout">
                    <div class="agradecimento-hero__content">
                        <div class="agradecimento-hero__intro">
                            <span class="tag">Cotação enviada</span>
                            <h1>Recebemos sua solicitação!</h1>
                            <p class="lead">
                                Em alguns minutos você começa a receber propostas por e-mail e WhatsApp para comparar preços, prazos e atendimento das transportadoras.
                            </p>
                        </div>
                    </div>
                    <div class="agradecimento-hero__media">
                        <img class="agradecimento-hero__icon" src="{{ asset('assets/img/cotacao-enviada-sucesso.webp') }}" alt="Ilustração representando o envio bem-sucedido de uma cotação de frete.">
                    </div>
                </div>
            </div>
        </section>

        <section class="agradecimento-status">
            <div class="container-status">
                <div class="agradecimento-status__wrapper">
                    <div class="agradecimento-card">
                        <header class="agradecimento-card__head">
                            <span class="tag tag-light">Próximos passos</span>
                            <h2>Acompanhe o fluxo e responda rapidamente para aproveitar as melhores propostas.</h2>
                        </header>
                        <ol class="agradecimento-steps">
                            <li class="agradecimento-step">
                                <span class="agradecimento-step__number" aria-label="Passo 1">1</span>
                                <div>
                                    <h4>Solicitação enviada</h4>
                                    <p>Transportadoras recebem seu pedido com os dados completos da carga.</p>
                                </div>
                            </li>
                            <li class="agradecimento-step">
                                <span class="agradecimento-step__number" aria-label="Passo 2">2</span>
                                <div>
                                    <h4>Compare propostas</h4>
                                    <p>Você recebe os orçamentos no e-mail ou WhatsApp e avalia prazos, preços e condições.</p>
                                </div>
                            </li>
                            <li class="agradecimento-step">
                                <span class="agradecimento-step__number" aria-label="Passo 3">3</span>
                                <div>
                                    <h4>Feche com segurança</h4>
                                    <p>Escolha a transportadora ideal e combine coleta e documentação diretamente.</p>
                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <section class="agradecimento-panels">
            <div class="container-panels">
                <div class="agradecimento-status__wrapper">
                    <header class="section-head text-center">
                        <span class="tag tag-light">Dicas</span>
                        <h2>Use os cartões abaixo como um roteiro rápido para conversar com as transportadoras.</h2>
                    </header>
                    <div class="panels-grid">
                        <article class="panel-card">
                            <span class="pill">Antes de responder</span>
                            <h3>Confirme as informações</h3>
                            <ul>
                                <li>Dimensões, peso e natureza da carga.</li>
                                <li>Origem, destino e conexões.</li>
                                <li>Restrições, horários ou equipamentos.</li>
                            </ul>
                        </article>
                        <article class="panel-card">
                            <span class="pill">Durante a análise</span>
                            <h3>Compare as propostas</h3>
                            <ul>
                                <li>Prazo de coleta/entrega, seguro e valor da proposta.</li>
                                <li>Histórico no Google e Reclame Aqui.</li>
                                <li>Atendimento, rastreio e compromissos de prazo.</li>
                            </ul>
                        </article>
                        <article class="panel-card">
                            <span class="pill">Documentação</span>
                            <h3>Deixe tudo à mão</h3>
                            <ul>
                                <li>Nota fiscal ou declaração de conteúdo.</li>
                                <li>Comprovante de seguro se tiver.</li>
                                <li>Contato do responsável na coleta e entrega.</li>
                            </ul>
                        </article>
                    </div>
                </div>
            </div>
        </section>

        <section class="agradecimento-channels">
            <div class="container-channels">
                <div class="agradecimento-status__wrapper">
                    <header class="section-head text-center">
                        <span class="tag tag-light">Continue Explorando</span>
                        <h2>Aproveite para conhecer mais sobre o Cote Frete</h2>
                        <p>Acesse nossos canais e fique por dentro de dicas, novidades e conheça as melhores transportadoras.</p>
                    </header>
                    <div class="channels-grid">
                        <a href="/blog/pagina-1" target="_blank" rel="noopener" class="channel-link-card">
                            <div class="channel-icon">📝</div>
                            <h3>Blog</h3>
                            <p>Dicas e guias sobre logística e <br> transporte de cargas</p>
                            <span class="channel-cta">Acessar blog →</span>
                        </a>
                        <a href="/transportadoras/pagina-1" target="_blank" rel="noopener" class="channel-link-card">
                            <div class="channel-icon">🚛</div>
                            <h3>Transportadoras</h3>
                            <p>Conheça todas as transportadoras parceiras cadastradas</p>
                            <span class="channel-cta">Ver transportadoras →</span>
                        </a>
                        <a href="https://www.instagram.com/cotefrete" target="_blank" rel="noopener" class="channel-link-card">
                            <div class="channel-icon">📱</div>
                            <h3>Instagram</h3>
                            <p>Siga-nos para novidades, dicas e conteúdos exclusivos</p>
                            <span class="channel-cta">Seguir no Instagram →</span>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection