<div>    
   <x-home.header />
   <x-home.hero />

<!-- ====================== SEÇÃO DOS CARDS ====================== -->
<section class="py-16 lg:py-24 ">
    <div class="max-w-7xl mx-auto px-6">
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
            <!-- Card 1 - Hospedagem de Sites -->
            <div class="bg-white rounded-[3px] shadow-xl overflow-hidden flex flex-col h-full">
                <div class="bg-white p-8 text-center">
                    <img src="{{ asset('site/works/hospedagem-sites.png') }}" alt="Servidor" class="w-70 mx-auto">
                </div>
                <div class="p-6 flex-1 flex flex-col">
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Hospedagem de Sites</h3>
                    <p class="text-gray-600 text-sm leading-relaxed mb-6">
                        Hospedagem em nuvem ultra-rápida com cPanel<br>
                        Mantenha o seu site seguro com Imunify360 — compatível com PHP, Python, NodeJS e mais.<br>
                        Pronto para WordPress, Joomla, Drupal e lojas online, sem complicações.
                    </p>
                    <div class="mt-auto">
                        <p class="text-sm text-gray-500 mb-2">A partir de</p>
                        <p class="text-3xl font-bold text-red-600">Kz 910.00</p>
                        <p class="text-xs text-gray-500 mb-4">Mensal</p>
                        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white text-center font-semibold py-3 rounded-lg transition">
                            Ver Planos
                        </a>
                    </div>
                </div>
            </div>

            <!-- Card 2 - E-mail Profissional -->
            <div class="bg-white rounded-[3px] shadow-xl overflow-hidden flex flex-col h-full">
                <div class="bg-white p-8 text-center">
                    <img src="{{ asset('site/works/email-profissional.png') }}" alt="E-mail" class="w-70 mx-auto">
                </div>
                <div class="p-6 flex-1 flex flex-col">
                    <h3 class="text-xl font-bold text-gray-900 mb-3">E-mail Profissional</h3>
                    <p class="text-gray-600 text-sm leading-relaxed mb-6">
                        Comunicação personalizada para o seu negócio<br>
                        E-mail personalizado com o nome do domínio da sua empresa (nome@empresa.ao) — Mais credibilidade, profissionalismo e confiança para a sua marca.
                    </p>
                    <div class="mt-auto">
                        <p class="text-sm text-gray-500 mb-2">A partir de</p>
                        <p class="text-3xl font-bold text-red-600">Kz 630.00</p>
                        <p class="text-xs text-gray-500 mb-4">Mensal</p>
                        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white text-center font-semibold py-3 rounded-lg transition">
                            Ver Planos
                        </a>
                    </div>
                </div>
            </div>

            <!-- Card 3 - Servidor Dedicado -->
            <div class="bg-white rounded-[3px] shadow-xl overflow-hidden flex flex-col h-full relative">
                <div class="bg-white p-8 text-center">
                    <img src="{{ asset('site/works/servidor-dedicado.png') }}" alt="Servidor Dedicado" class="cc">
                </div>
                <div class="p-6 flex-1 flex flex-col">
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Servidor Dedicado</h3>
                    <p class="text-gray-600 text-sm leading-relaxed mb-6">
                        Servidor Cloud com recursos 100% dedicados<br>
                        Para sites e apps com tráfego elevado e uso intensivo de CPU e base de dados — Desempenho máximo para tráfego intenso e cargas pesadas.
                    </p>
                    <div class="mt-auto">
                        <p class="text-sm text-gray-500 mb-2">A partir de</p>
                        <p class="text-3xl font-bold text-red-600">Kz 8981.70</p>
                        <p class="text-xs text-gray-500 mb-4">Mensal</p>
                        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white text-center font-semibold py-3 rounded-lg transition">
                            Ver Servidores
                        </a>
                    </div>
                </div>
            </div>

            <!-- Card 4 - Microsoft 365 -->
            <div class="bg-white rounded-[3px] shadow-xl overflow-hidden flex flex-col h-full">
                <div class="bg-white p-8 text-center flex items-center justify-center">
                    <img src="{{ asset('site/works/microsoft-365.png') }}" alt="Microsoft 365" class="w-70 mx-auto">
                </div>
                <div class="p-6 flex-1 flex flex-col">
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Microsoft 365</h3>
                    <p class="text-gray-600 text-sm leading-relaxed mb-6">
                        Solução de produtividade para o seu negócio<br>
                        Converse, ligue, organize reuniões online e colabore em tempo real, remotamente ou localmente — Obtenha uma solução integrada incluindo o Teams.
                    </p>
                    <div class="mt-auto">
                        <p class="text-sm text-gray-500 mb-2">A partir de</p>
                        <p class="text-3xl font-bold text-red-600">Kz 12448.80</p>
                        <p class="text-xs text-gray-500 mb-4">Mensal</p>
                        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white text-center font-semibold py-3 rounded-lg transition">
                            Ver Planos
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ====================== FIM DOS CARDS ====================== -->


<!-- ====================== SEÇÃO RODAPÉ ====================== -->
<x-home.footer />


<!-- Fundo com pontos -->
<div class="absolute inset-0 opacity-30 pointer-events-none"
     style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0); background-size: 20px 20px;">
</div>

<x-home.whatsapp-floating-button />    
</div>

</div>

@push("scripts")
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Força o body e html a terem altura mínima 100% e overflow visível
    document.documentElement.style.height = '100%';
    document.documentElement.style.overflowY = 'auto';
    document.body.style.minHeight = '100vh';
    document.body.style.overflowY = 'auto';

    // Garante que nenhum elemento pai esteja bloqueando o scroll
    const possibleOverflowParents = document.querySelectorAll('div, section, main, [class*="container"], [class*="wrapper"]');
    possibleOverflowParents.forEach(el => {
        const style = window.getComputedStyle(el);
        if (style.overflow === 'hidden' || style.overflowY === 'hidden') {
            if (el.classList.contains('relative') || el.classList.contains('absolute') || el.classList.contains('fixed')) {
                // Só libera overflow em containers que não devem esconder conteúdo
                el.style.overflowY = 'visible';
            }
        }
    });

    // Solução definitiva: força o scroll até o final após 300ms (caso algum componente renderize depois)
    setTimeout(() => {
        document.body.style.overflowY = 'auto';
        document.documentElement.style.overflowY = 'auto';
        window.scrollTo(0, 0); // opcional: volta ao topo
    }, 300);
});
</script>   
@endpush

