<!-- 1. IMPORTAÇÕES DE FONTES E TAILWIND (Mantidos no topo do snippet) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>

<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    voyBlue: '#1B3B5A',
                    voyGold: '#D4AF37',
                },
                fontFamily: {
                    heading: ['Montserrat', 'sans-serif'],
                    body: ['Open Sans', 'sans-serif'],
                }
            }
        }
    }
</script>

<style>
    .bg-hero {
        background-image: linear-gradient(to right, rgba(27, 59, 90, 0.95), rgba(27, 59, 90, 0.85)), url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?q=80&w=2074&auto=format&fit=crop');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
    .glass-panel {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(212, 175, 55, 0.2);
    }
    .premium-input {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
        transition: all 0.3s ease;
    }
    .premium-input:focus {
        outline: none;
        border-color: #D4AF37;
        background: rgba(255, 255, 255, 0.15);
    }
    .premium-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }
    
    /* Remove as setas (spinners) do input de número do Captcha */
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        margin: 0; 
    }
</style>

<!-- 2. ENVELOPE PRINCIPAL (Substitui a tag body para evitar conflitos no Zoho) -->
<div class="bg-hero min-h-screen w-full text-white font-body flex flex-col selection:bg-voyGold selection:text-voyBlue relative">

    <!-- Header / Logo -->
    <header class="w-full p-6 md:p-10 flex justify-between items-center z-10">
        <a href="#" class="block transition-transform duration-300 transform hover:scale-105">
            <!-- ATENÇÃO: SUBSTITUA O SRC ABAIXO PELO LINK GERADO NO ZOHO FILE MANAGER -->
            <img src="URL_DA_SUA_IMAGEM_AQUI" alt="Voy Viagens Logomarca" class="h-20 md:h-28 w-auto object-contain drop-shadow-2xl">
        </a>
        <div class="hidden md:block text-sm tracking-widest uppercase text-gray-300">
            Coming Soon
        </div>
    </header>

    <!-- Main Content -->
    <main class="flex-grow flex items-center justify-center p-6 md:p-10 z-10">
        <div class="max-w-6xl w-full grid md:grid-cols-2 gap-12 lg:gap-20 items-center">
            
            <!-- Lado Esquerdo -->
            <div class="space-y-6 md:pr-10">
                <div class="inline-block border border-voyGold text-voyGold px-4 py-1 rounded-full text-xs font-semibold tracking-widest uppercase mb-4">
                    Lançamento em Breve
                </div>
                
                <!-- Alterado para h2 conforme solicitado -->
                <h2 class="font-heading text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
                    <span class="text-white">Preparando o embarque para experiências </span> <span class="text-voyGold">extraordinárias.</span>
                </h2>
                
                <p class="text-lg text-gray-300 font-light leading-relaxed">
                    A inteligência logística e o luxo do lazer, em breve em um só lugar. Estamos construindo uma plataforma exclusiva para a gestão das suas viagens corporativas, eventos científicos e férias em resorts de alto padrão.
                </p>
                <div class="pt-6 border-t border-white/20">
                    <p class="text-sm text-gray-400 mb-2 uppercase tracking-wider font-semibold">Fale Conosco Diretamente:</p>
                    <div class="flex flex-col space-y-4">
                        <a href="https://wa.me/558198280805" target="_blank" class="flex items-center space-x-3 text-white hover:text-voyGold transition-colors w-max">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                            <span class="font-medium">+55 81 98280805</span>
                        </a>
                        <div class="flex items-center space-x-3 text-white" title="Nosso E-mail">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>
                            <svg width="250" height="24" xmlns="http://www.w3.org/2000/svg" class="mt-1">
                                <text x="0" y="16" font-family="'Open Sans', sans-serif" font-size="16" fill="#FFFFFF" class="hover:fill-[#D4AF37] transition-colors" style="cursor: default;">euvou@voyviagens.com.br</text>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Lado Direito -->
            <div class="glass-panel p-8 md:p-10 rounded-2xl shadow-2xl relative">
                <!-- Alterado para h4 conforme solicitado -->
                <h4 class="font-heading text-2xl font-semibold mb-2"><span class="text-white">Antecipe seu planejamento</span></h4>
                <p class="text-sm text-gray-300 mb-6">Deixe seus dados e as primeiras ideias da sua viagem. Nossa equipe entrará em contacto com condições exclusivas de lançamento.</p>
                
                <!-- Iframe Oculto para evitar que a página redirecione após enviar os dados para o Zoho -->
                <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){ document.getElementById('successMessage').classList.remove('hidden'); }"></iframe>
                
                <!-- Formulário com Action para o Zoho Forms -->
                <form id="leadForm" action="https://forms.zohopublic.com/eluisvoyvi1/form/FormSiteTemVoyViagens/formperma/UfCdTivdH9oX7nRB_7OWAz90ogrtZZ_iagE0eFr2VgU/htmlRecords/submit" method="POST" target="hidden_iframe" class="space-y-4">
                    
                    <div>
                        <label class="block text-xs uppercase tracking-wider text-voyGold mb-1 ml-1">Nome Completo</label>
                        <!-- IMPORTANTE: Altere name="SingleLine" para o nome do campo gerado pelo seu Zoho Forms -->
                        <input type="text" name="SingleLine" required class="premium-input w-full px-4 py-3 rounded-lg text-sm" placeholder="Ex: João Silva">
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs uppercase tracking-wider text-voyGold mb-1 ml-1">E-mail</label>
                            <!-- IMPORTANTE: Altere name="Email" para o nome do campo gerado pelo seu Zoho Forms -->
                            <input type="email" name="Email" required class="premium-input w-full px-4 py-3 rounded-lg text-sm" placeholder="seu@email.com">
                        </div>
                        <div>
                            <label class="block text-xs uppercase tracking-wider text-voyGold mb-1 ml-1">WhatsApp</label>
                            <!-- IMPORTANTE: Altere name="PhoneNumber_countrycode" para o nome do campo gerado pelo seu Zoho Forms -->
                            <input type="tel" name="PhoneNumber_countrycode" required class="premium-input w-full px-4 py-3 rounded-lg text-sm" placeholder="(81) 90000-0000">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs uppercase tracking-wider text-voyGold mb-1 ml-1">Detalhes da Viagem</label>
                        <!-- IMPORTANTE: Altere name="MultiLine" para o nome do campo gerado pelo seu Zoho Forms -->
                        <textarea name="MultiLine" required rows="4" class="premium-input w-full px-4 py-3 rounded-lg text-sm resize-none" placeholder="Conte-nos para onde gostaria de ir. Escreva a cidade de partida, cidade de destino e datas de ida e de retorno. Fique à vontade para adicionar outros detalhes da sua viagem."></textarea>
                    </div>

                    <!-- Captcha Nativo (Verificação Humana) -->
                    <div class="bg-black/20 border border-white/10 rounded-lg p-4 mt-2 mb-2 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                        <label class="block text-xs uppercase tracking-wider text-voyGold">Segurança Humana:<br><span class="text-white text-[10px] font-normal tracking-normal">Resolva a soma para ativar o botão</span></label>
                        <div class="flex items-center space-x-3">
                            <span id="captchaQuestion" class="text-white font-heading font-bold text-xl tracking-widest"></span>
                            <input type="number" id="captchaInput" class="premium-input w-16 px-2 py-2 rounded-lg text-center text-lg font-bold" placeholder="?">
                        </div>
                    </div>

                    <!-- Botão com classes de centralização e disabled-state (O botão começa desativado) -->
                    <button type="submit" id="submitBtn" disabled class="w-full flex justify-center text-center items-center bg-voyGold hover:bg-yellow-500 text-voyBlue font-heading font-bold text-sm tracking-widest uppercase py-4 rounded-lg transition-all duration-300 transform shadow-[0_10px_20px_rgba(212,175,55,0.3)] mt-2 disabled:opacity-50 disabled:cursor-not-allowed hover:-translate-y-1 disabled:hover:translate-y-0">
                        Iniciar Meu Planejamento
                    </button>
                </form>

                <div id="successMessage" class="hidden absolute inset-0 bg-voyBlue rounded-2xl flex flex-col items-center justify-center p-8 text-center border border-voyGold z-20">
                    <svg class="w-16 h-16 text-voyGold mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    <h4 class="font-heading text-2xl font-bold text-white mb-2">Solicitação Recebida!</h4>
                    <p class="text-gray-300">Obrigado por escolher a Voy Viagens. Um dos nossos consultores entrará em contacto muito em breve.</p>
                </div>
            </div>

        </div>
    </main>

    <!-- Botão Flutuante WhatsApp -->
    <a href="https://wa.me/558198280805" target="_blank" class="fixed bottom-6 right-6 bg-[#25D366] hover:bg-[#1EBE5D] text-white p-4 rounded-full shadow-lg transition-transform transform hover:scale-110 z-50 flex items-center justify-center group" title="Fale connosco no WhatsApp">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
    </a>
</div>

<script>
    // --- LÓGICA DO CAPTCHA MATEMÁTICO ---
    const captchaQuestion = document.getElementById('captchaQuestion');
    const captchaInput = document.getElementById('captchaInput');
    const submitBtn = document.getElementById('submitBtn');

    // Gera dois números aleatórios entre 1 e 10
    let num1 = Math.floor(Math.random() * 10) + 1;
    let num2 = Math.floor(Math.random() * 10) + 1;
    let captchaAnswer = num1 + num2;

    // Exibe a soma para o utilizador
    captchaQuestion.innerText = `${num1} + ${num2} =`;

    // Valida a resposta em tempo real
    captchaInput.addEventListener('input', function() {
        if (parseInt(this.value) === captchaAnswer) {
            submitBtn.disabled = false; // Ativa o botão
        } else {
            submitBtn.disabled = true;  // Mantém desativado
        }
    });

    // --- LÓGICA DE ENVIO PARA O ZOHO (IFRAME OCULTO) ---
    let submitted = false;
    document.getElementById('leadForm').addEventListener('submit', function(e) {
        submitted = true;
        const btn = document.getElementById('submitBtn');
        btn.innerHTML = 'A ENVIAR...';
        btn.disabled = true;
        btn.classList.add('opacity-75', 'cursor-not-allowed');
        
        // O formulário fará o POST para o hidden_iframe e o onload do iframe mostrará a mensagem de sucesso
    });
</script>