@php
    $rawPhone = isset($empresaConfig) && !empty($empresaConfig->telefone) ? $empresaConfig->telefone : '948944582';
    $cleanPhone = preg_replace('/[^0-9]/', '', $rawPhone);
    if (strlen($cleanPhone) === 9 && str_starts_with($cleanPhone, '9')) {
        $cleanPhone = '244' . $cleanPhone;
    }
    if (empty($cleanPhone)) {
        $cleanPhone = '244948944582';
    }
@endphp

<div x-data="{ open: false }" class="relative font-sans print:hidden" x-cloak>
    {{-- Card de Atendimento WhatsApp --}}
    <div x-show="open" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-4 scale-95"
         x-transition:enter-end="opacity-100 translate-y-0 scale-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0 scale-100"
         x-transition:leave-end="opacity-0 translate-y-4 scale-95"
         @click.away="open = false"
         class="absolute bottom-16 right-0 w-[340px] sm:w-[380px] bg-white rounded-3xl shadow-2xl border border-slate-100 overflow-hidden mb-3">
        
        {{-- Cabeçalho do Card --}}
        <div class="bg-[#06458F] p-5 text-white relative">
            <button @click="open = false" 
                    type="button"
                    class="absolute top-4 right-4 w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white/80 hover:text-white transition-colors"
                    aria-label="Fechar WhatsApp">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
            <div class="flex items-center gap-3">
                <div class="relative">
                    <div class="w-11 h-11 rounded-2xl bg-[#25D366] flex items-center justify-center shadow-md">
                        <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.694.074-2.127-.521-1.625-.676-2.678-2.327-2.759-2.435-.08-.109-.659-.877-.659-1.671 0-.795.418-1.186.566-1.345.148-.16.323-.2.43-.2.107 0 .216.002.311.006.1.006.234-.038.366.279.136.327.464 1.134.505 1.217.042.083.07.18.014.29-.056.11-.084.18-.167.279-.083.1-.175.223-.25.299-.083.084-.17.176-.073.344.097.168.431.714.927 1.155.637.568 1.175.744 1.343.827.169.083.268.07.368-.046.101-.116.43-.502.545-.674.116-.172.23-.143.388-.083.158.06 1.005.474 1.177.56.173.086.288.128.33.2.042.072.042.417-.102.822z"/>
                        </svg>
                    </div>
                    <span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-400 border-2 border-[#06458F] rounded-full"></span>
                </div>
                <div>
                    <h3 class="font-bold text-sm leading-tight text-white">Atendimento AMD-Topografia</h3>
                    <p class="text-[11px] text-white/80 font-normal flex items-center gap-1.5 mt-0.5">
                        <span class="inline-block w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"></span>
                        Disponível em Luanda, Angola
                    </p>
                </div>
            </div>
        </div>

        {{-- Corpo / Canais de Contato --}}
        <div class="p-4 sm:p-5 bg-slate-50/60 space-y-2.5">
            <p class="text-[11px] font-medium text-slate-500 uppercase tracking-wider px-1">
                Selecione o canal para atendimento imediato:
            </p>

            {{-- Canal 1: Comercial & Cotações --}}
            <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode('Olá AMD-Topografia! Gostaria de falar com o departamento comercial sobre compra/aluguer de equipamentos e cotações.') }}"
               target="_blank" rel="noopener noreferrer"
               class="group flex items-start gap-3 p-3.5 bg-white rounded-2xl border border-slate-200/80 hover:border-[#25D366] hover:shadow-md transition-all duration-200">
                <div class="w-10 h-10 rounded-xl bg-blue-50 text-[#06458F] group-hover:bg-[#25D366]/10 group-hover:text-[#25D366] flex items-center justify-center shrink-0 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between">
                        <h4 class="text-xs font-bold text-slate-800 group-hover:text-[#06458F] transition-colors">Comercial & Cotações</h4>
                        <span class="text-[10px] text-emerald-600 font-semibold bg-emerald-50 px-2 py-0.5 rounded-full">Vendas</span>
                    </div>
                    <p class="text-[11px] text-slate-500 font-light mt-0.5 leading-snug">Drones, Estações Totais, GPS RTK e Aluguer de Equipamentos.</p>
                </div>
            </a>

            {{-- Canal 2: Formações & Cursos --}}
            <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode('Olá AMD-Topografia! Gostaria de informações sobre inscrições, turmas e certificações das formações profissionais.') }}"
               target="_blank" rel="noopener noreferrer"
               class="group flex items-start gap-3 p-3.5 bg-white rounded-2xl border border-slate-200/80 hover:border-[#25D366] hover:shadow-md transition-all duration-200">
                <div class="w-10 h-10 rounded-xl bg-amber-50 text-amber-600 group-hover:bg-[#25D366]/10 group-hover:text-[#25D366] flex items-center justify-center shrink-0 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 14l9-5-9-5-9 5 9 5z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/></svg>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between">
                        <h4 class="text-xs font-bold text-slate-800 group-hover:text-[#06458F] transition-colors">Cursos & Formações</h4>
                        <span class="text-[10px] text-amber-700 font-semibold bg-amber-50 px-2 py-0.5 rounded-full">Academia</span>
                    </div>
                    <p class="text-[11px] text-slate-500 font-light mt-0.5 leading-snug">Topografia Prática, Drones DJI, Civil 3D e QGIS.</p>
                </div>
            </a>

            {{-- Canal 3: Serviços de Engenharia & Suporte --}}
            <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode('Olá AMD-Topografia! Preciso de apoio técnico ou contratação de serviços de topografia, geodesia e levantamentos.') }}"
               target="_blank" rel="noopener noreferrer"
               class="group flex items-start gap-3 p-3.5 bg-white rounded-2xl border border-slate-200/80 hover:border-[#25D366] hover:shadow-md transition-all duration-200">
                <div class="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-700 group-hover:bg-[#25D366]/10 group-hover:text-[#25D366] flex items-center justify-center shrink-0 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 20l-5.447-2.724A2 2 0 013 15.488V5.512a2 2 0 011.553-1.954L9 2l6 3 5.447-1.724A2 2 0 0122 5.236v9.976a2 2 0 01-1.553 1.954L15 19l-6 1z"/></svg>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between">
                        <h4 class="text-xs font-bold text-slate-800 group-hover:text-[#06458F] transition-colors">Serviços Técnicos</h4>
                        <span class="text-[10px] text-blue-700 font-semibold bg-blue-50 px-2 py-0.5 rounded-full">Projetos</span>
                    </div>
                    <p class="text-[11px] text-slate-500 font-light mt-0.5 leading-snug">Levantamentos, Nivelamento, Batimetria e Regularização.</p>
                </div>
            </a>
        </div>

        {{-- Rodapé do Card --}}
        <div class="p-3 bg-slate-100 text-center border-t border-slate-200/60">
            <span class="text-[10px] text-slate-500 font-medium">AMD-II TOPOGRAFIA ENGENHARIA & PROJECTOS, LDA</span>
        </div>
    </div>

    {{-- Botão Flutuante Principal (Trigger) --}}
    <button @click="open = !open"
            type="button"
            class="relative group w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-[#25D366] hover:bg-[#20bd5a] text-white flex items-center justify-center shadow-xl shadow-[#25D366]/35 hover:scale-105 active:scale-95 transition-all duration-300"
            aria-label="Abrir canais de WhatsApp">
        
        {{-- Onda de Pulso --}}
        <span class="absolute -inset-1 rounded-full bg-[#25D366] opacity-35 animate-ping pointer-events-none"></span>

        {{-- Ícone do WhatsApp --}}
        <svg class="w-8 h-8 sm:w-9 sm:h-9 relative z-10 transition-transform duration-300 group-hover:rotate-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.694.074-2.127-.521-1.625-.676-2.678-2.327-2.759-2.435-.08-.109-.659-.877-.659-1.671 0-.795.418-1.186.566-1.345.148-.16.323-.2.43-.2.107 0 .216.002.311.006.1.006.234-.038.366.279.136.327.464 1.134.505 1.217.042.083.07.18.014.29-.056.11-.084.18-.167.279-.083.1-.175.223-.25.299-.083.084-.17.176-.073.344.097.168.431.714.927 1.155.637.568 1.175.744 1.343.827.169.083.268.07.368-.046.101-.116.43-.502.545-.674.116-.172.23-.143.388-.083.158.06 1.005.474 1.177.56.173.086.288.128.33.2.042.072.042.417-.102.822z"/>
        </svg>

        {{-- Badge de Notificação --}}
        <span class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center border-2 border-white shadow-sm">
            1
        </span>
    </button>
</div>