{% extends "layout.html" %}
{% block title %}QRPass - Bem-vindo{% endblock %}
{% block header_actions %}
    <a href="{{ url_for('public.public_scanner') }}" data-cursor-target class="glass-effect text-primary dark:text-white rounded-xl font-semibold hover:shadow-lg transition-all duration-200 hover-scale flex items-center justify-center px-3 py-2 sm:px-4 text-xs sm:text-sm space-x-2">
        <i class="fas fa-qrcode text-lg"></i>
        <span>
            <span class="sm:hidden">Escanear</span>
            <span class="hidden sm:inline">Escanear Ingresso</span>
        </span>
    </a>
    <a href="{{ url_for('auth.login') }}" data-cursor-target class="bg-gradient-to-r from-primary to-secondary text-white rounded-xl font-semibold hover:shadow-lg transition-all duration-200 hover-scale flex items-center justify-center w-10 h-10 p-2 sm:w-auto sm:px-4 sm:py-2 sm:space-x-2">
        <i class="fas fa-sign-in-alt text-lg"></i>
        <span class="hidden sm:inline text-sm">Entrar</span>
    </a>
{% endblock %}
{% block content %}
<style>
    /* Estilo do cursor personalizado (efeito de borda de vidro) */
    #cursor-blob {
        background-color: transparent; /* Fundo transparente para não cobrir o texto */
        border: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil para definir a forma */
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); /* Brilho suave para o efeito de vidro */
        height: 24px;
        width: 24px;
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        pointer-events: none;
        opacity: 0;
    }

    /* Aplica a animação de bloom ao texto */
    #typing-text {
        animation: bloom-effect 2.5s infinite ease-in-out;
    }

    /* Estilo para o cursor piscante */
    #typing-text::after {
        content: '|';
        display: inline-block;
        animation: blink-caret 0.75s step-end infinite;
        color: #3b82f6;
    }

    @keyframes blink-caret { from, to { opacity: 1 } 50% { opacity: 0 } }
    
    /* Animação de bloom para o texto com intensidade reduzida */
    @keyframes bloom-effect {
        0%, 100% {
            text-shadow: 0 0 2px rgba(59, 130, 246, 0.5), 
                         0 0 8px rgba(59, 130, 246, 0.3);
        }
        50% {
            text-shadow: 0 0 5px rgba(59, 130, 246, 0.7), 
                         0 0 15px rgba(59, 130, 246, 0.4);
        }
    }
    
    /* Animação da seta para baixo */
    .bounce-arrow {
        animation: bounce 2s infinite;
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
        40% { transform: translateY(-15px); }
        60% { transform: translateY(-7px); }
    }

    /* Animação de bloom para o botão principal */
    .bloom-button {
        animation: button-bloom-effect 2.5s infinite ease-in-out;
    }

    @keyframes button-bloom-effect {
        0%, 100% {
            box-shadow: 0 0 7px rgba(99, 102, 241, 0.5), 
                         0 0 15px rgba(59, 130, 246, 0.4),
                         inset 0 0 5px rgba(255, 255, 255, 0.2);
        }
        50% {
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.8), 
                         0 0 30px rgba(59, 130, 246, 0.6),
                         inset 0 0 7px rgba(255, 255, 255, 0.3);
        }
    }
</style>

<div class="relative text-center pt-16 pb-24 sm:pt-24 sm:pb-32">
    <h2 class="text-4xl sm:text-6xl font-extrabold text-gray-900 dark:text-white tracking-tight">
        A maneira mais <span id="typing-text" class="text-primary"></span><br>de gerenciar seus eventos.
    </h2>
    <p class="mt-6 max-w-2xl mx-auto text-lg sm:text-xl text-gray-600 dark:text-gray-300">
        Crie listas de convidados, gere QR Codes únicos e controle o acesso em tempo real com estatísticas detalhadas. Tudo em um só lugar.
    </p>
    
    <!-- Container dos botões de ação -->
    <div class="mt-10 flex flex-col items-center justify-center gap-4 px-4 sm:px-0 sm:flex-row">
        <a href="{{ url_for('auth.signup') }}" data-cursor-target class="bloom-button bg-gradient-to-r from-primary to-secondary text-white px-8 py-4 rounded-xl font-bold text-lg hover:shadow-2xl transition-all duration-200 hover-scale transform hover:-translate-y-1 w-full sm:w-auto">
            Comece Agora - É Grátis!
        </a>
        <a href="{{ url_for('main.my_invitations') }}" data-cursor-target class="glass-effect text-primary dark:text-white px-8 py-4 rounded-xl font-bold text-lg hover:shadow-2xl transition-all duration-200 hover-scale transform hover:-translate-y-1 w-full sm:w-auto">
            Ver Meus Ingressos
        </a>
    </div>

    <div class="absolute bottom-0 left-1/2 -translate-x-1/2 mt-12">
        <div class="bounce-arrow text-gray-400 dark:text-gray-500 text-2xl">
            <i class="fas fa-angle-down"></i>
        </div>
    </div>
</div>


<div class="py-12 sm:py-16">
    <div class="max-w-7xl mx-auto bg-white/50 dark:bg-gray-900/50 rounded-3xl p-8 sm:p-16">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div>
                <span class="text-primary font-semibold tracking-wide uppercase">Controle Centralizado</span>
                <h3 class="mt-4 text-4xl sm:text-5xl font-extrabold text-gray-900 dark:text-white tracking-tight">Um Dashboard para Dominar sua Lista.</h3>
                <p class="mt-6 text-xl text-gray-600 dark:text-gray-300">
                    Gerencie tudo em um painel de controle intuitivo. Adicione, pesquise e edite convidados em uma tabela clara e organizada.
                </p>
                <ul class="mt-8 space-y-4 text-gray-600 dark:text-gray-400">
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span>Adicione novos convidados com um formulário simples e rápido.</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span>Convide colaboradores para ajudar na gestão da lista.</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span>Exporte sua lista para PDF ou CSV a qualquer momento.</span></li>
                </ul>
            </div>
            <div class="flex items-center justify-center">
                <div class="w-full max-w-md glass-card p-6 rounded-2xl shadow-lg">
                    <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg"><i class="fas fa-search text-gray-400 mr-3"></i><span class="text-gray-500">Buscar convidado...</span></div>
                    <div class="mt-4 space-y-3">
                        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-800/50 rounded-lg">
                            <span class="text-gray-800 dark:text-gray-200">Ana Silva</span>
                            <div class="flex items-center space-x-4">
                                <span class="text-xs bg-green-200 text-green-800 font-semibold px-2 py-0.5 rounded-full">Confirmado</span>
                                <i class="fas fa-edit text-blue-500 cursor-pointer"></i>
                            </div>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-800/50 rounded-lg">
                            <span class="text-gray-800 dark:text-gray-200">Bruno Costa</span>
                            <div class="flex items-center space-x-4">
                                <span class="text-xs bg-green-200 text-green-800 font-semibold px-2 py-0.5 rounded-full">Confirmado</span>
                                <i class="fas fa-edit text-blue-500 cursor-pointer"></i>
                            </div>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-800/50 rounded-lg">
                            <span class="text-gray-800 dark:text-gray-200">Carla Dias</span>
                            <div class="flex items-center space-x-4">
                                <span class="text-xs bg-yellow-200 text-yellow-800 font-semibold px-2 py-0.5 rounded-full">Pendente</span>
                                <i class="fas fa-edit text-blue-500 cursor-pointer"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="py-12 sm:py-16">
    <div class="max-w-7xl mx-auto bg-white/50 dark:bg-gray-900/50 rounded-3xl p-8 sm:p-16">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div class="flex items-center justify-center lg:order-last">
                 <div class="relative w-64 h-auto bg-gray-800 border-4 border-gray-600 rounded-3xl p-2 shadow-2xl">
                    <div class="w-full h-full bg-gray-900 rounded-2xl flex flex-col items-center justify-center text-center p-4">
                        <i class="fas fa-qrcode text-8xl text-white"></i>
                        <p class="mt-4 text-green-400 font-bold text-lg">Entrada Liberada!</p>
                        <p class="text-white">Bem-vindo, Convidado!</p>
                    </div>
                 </div>
            </div>
            <div>
                <span class="text-success font-semibold tracking-wide uppercase">Agilidade e Segurança</span>
                <h3 class="mt-4 text-4xl sm:text-5xl font-extrabold text-gray-900 dark:text-white tracking-tight">Scanner Web Integrado. Sem Apps.</h3>
                <p class="mt-6 text-xl text-gray-600 dark:text-gray-300">
                    Abandone as pranchetas. Qualquer smartphone com câmera pode se tornar um validador de ingressos poderoso. Seguro, rápido e sem downloads.
                </p>
                <ul class="mt-8 space-y-4 text-gray-600 dark:text-gray-400">
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span>QR Code único e seguro para cada convidado, evitando fraudes.</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span>Validação instantânea com confirmação visual na tela.</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span>Acesse o scanner com um código simples, sem precisar de login.</span></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="py-12 sm:py-16">
    <div class="max-w-7xl mx-auto bg-white/50 dark:bg-gray-900/50 rounded-3xl p-8 sm:p-16">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
             <div>
                <span class="text-warning font-semibold tracking-wide uppercase">Inteligência de Dados</span>
                <h3 class="mt-4 text-4xl sm:text-5xl font-extrabold text-gray-900 dark:text-white tracking-tight">Entenda o Pulso do Seu Evento.</h3>
                <p class="mt-6 text-xl text-gray-600 dark:text-gray-300">
                    Seu dashboard mostra os dados mais importantes em tempo real. Acompanhe os números e tome decisões com base em informações, não em achismos.
                </p>
                <ul class="mt-8 space-y-4 text-gray-600 dark:text-gray-400">
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span>Veja o total de convidados, quantos entraram e quantos faltam.</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span>Gráfico circular de comparecimento atualizado ao vivo.</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span>Acompanhe quem fez o check-in e a que horas.</span></li>
                </ul>
            </div>
            <div class="flex items-center justify-center">
                 <div class="w-full max-w-sm glass-card p-6 rounded-2xl shadow-lg">
                    <h4 class="font-bold text-lg text-gray-800 dark:text-white mb-4">Estatísticas</h4>
                    <div class="space-y-4">
                        <div class="flex justify-between items-baseline"><span class="text-gray-600 dark:text-gray-300">Total Convidados</span><span class="text-2xl font-bold text-gray-800 dark:text-white">150</span></div>
                        <div class="flex justify-between items-baseline"><span class="text-gray-600 dark:text-gray-300">Entraram</span><span class="text-2xl font-bold text-green-500">112</span></div>
                        <div class="flex justify-between items-baseline"><span class="text-gray-600 dark:text-gray-300">Não Entraram</span><span class="text-2xl font-bold text-red-500">38</span></div>
                        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 text-center"><span class="text-gray-600 dark:text-gray-300">Comparecimento</span><p class="text-3xl font-bold text-primary">74.67%</p></div>
                    </div>
                 </div>
            </div>
        </div>
    </div>
</div>

<div class="py-12 sm:py-16">
    <div class="max-w-7xl mx-auto bg-white/50 dark:bg-gray-900/50 rounded-3xl p-8 sm:p-16">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div class="lg:order-last">
                <span class="text-primary font-semibold tracking-wide uppercase">Design & Identidade</span>
                <h3 class="mt-4 text-4xl sm:text-5xl font-extrabold text-gray-900 dark:text-white tracking-tight">Convites com a Cara da Sua Festa.</h3>
                <p class="mt-6 text-xl text-gray-600 dark:text-gray-300">
                    Faça o upload do flyer do seu evento e deixe nossa IA criar uma página de convite com uma paleta de cores exclusiva e profissional.
                </p>
                <ul class="mt-8 space-y-4 text-gray-600 dark:text-gray-400">
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span><strong>Paleta de cores automática</strong> e inteligente.</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span><strong>Design profissional</strong> sem precisar de designers.</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i><span>Link do convite <strong>pronto para compartilhar</strong> em segundos.</span></li>
                </ul>
            </div>
            <div class="flex items-center justify-center">
                <div class="flex items-center justify-center space-x-4">
                    <div class="w-40 h-56 bg-gray-200 dark:bg-gray-700 rounded-2xl flex flex-col items-center justify-center text-center p-4 shadow-lg">
                        <i class="fas fa-image text-4xl text-gray-400 dark:text-gray-500"></i>
                        <p class="mt-2 text-sm font-semibold text-gray-500 dark:text-gray-400">Sua Imagem</p>
                    </div>
                    <div class="text-4xl text-primary dark:text-indigo-400 opacity-75"><i class="fas fa-long-arrow-alt-right"></i></div>
                    <div class="w-48 h-64 glass-card rounded-2xl flex flex-col shadow-2xl overflow-hidden">
                        <div class="h-20 bg-gradient-to-r from-purple-500 to-pink-500"></div>
                        <div class="p-4 flex-1"><div class="w-full h-4 bg-purple-300 rounded-full"></div><div class="w-3/4 h-4 bg-pink-300 rounded-full mt-3"></div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // --- EFEITO DE DIGITAÇÃO ---
        const typingElement = document.getElementById('typing-text');
        if (typingElement) {
            const words = ['inteligente', 'eficiente', 'prática', 'moderna', 'rápida', 'descomplicada', 'segura', 'inovadora', 'ágil', 'confiável'];
            let wordIndex = 0;
            let charIndex = 0;
            let isDeleting = false;
            const typeSpeed = 150;
            const deleteSpeed = 100;
            const delayBetweenWords = 1500;
            function type() {
                const currentWord = words[wordIndex];
                if (isDeleting) {
                    typingElement.textContent = currentWord.substring(0, charIndex - 1);
                    charIndex--;
                } else {
                    typingElement.textContent = currentWord.substring(0, charIndex + 1);
                    charIndex++;
                }
                if (!isDeleting && charIndex === currentWord.length) {
                    setTimeout(() => isDeleting = true, delayBetweenWords);
                } else if (isDeleting && charIndex === 0) {
                    isDeleting = false;
                    wordIndex = (wordIndex + 1) % words.length;
                }
                const speed = isDeleting ? deleteSpeed : typeSpeed;
                setTimeout(type, speed);
            }
            type();
        }

        // --- CURSOR PERSONALIZADO (COM DETECÇÃO DE MOBILE) ---
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || ('ontouchstart' in document.documentElement && navigator.maxTouchPoints > 0);

        if (!isMobile) {
            const blob = document.createElement('div');
            blob.id = 'cursor-blob';
            document.body.appendChild(blob);

            const mouse = { x: 0, y: 0 };
            
            const blobCurrentState = {
                x: 0, y: 0, width: 24, height: 24, radius: 12
            };
            const blobTargetState = {
                x: 0, y: 0, width: 24, height: 24, radius: 12
            };

            let activeTarget = null;
            let animationFrameId = null;

            const lerp = (start, end, amt) => (1 - amt) * start + amt * end;
            
            function animate() {
                // Define o estado alvo (target)
                if (activeTarget) {
                    const rect = activeTarget.getBoundingClientRect();
                    const br = parseFloat(window.getComputedStyle(activeTarget).borderRadius);

                    const offsetX = mouse.x - (rect.left + rect.width / 2);
                    const offsetY = mouse.y - (rect.top + rect.height / 2);
                    const wiggleX = offsetX * 0.15;
                    const wiggleY = offsetY * 0.15;

                    blobTargetState.x = rect.left + wiggleX;
                    blobTargetState.y = rect.top + wiggleY;
                    blobTargetState.width = rect.width;
                    blobTargetState.height = rect.height;
                    blobTargetState.radius = isNaN(br) ? 12 : br; // Fallback para 12px
                } else {
                    blobTargetState.x = mouse.x - blobCurrentState.width / 2;
                    blobTargetState.y = mouse.y - blobCurrentState.height / 2;
                    blobTargetState.width = 24;
                    blobTargetState.height = 24;
                    blobTargetState.radius = 12;
                }

                // Interpola o estado atual em direção ao alvo
                blobCurrentState.x = lerp(blobCurrentState.x, blobTargetState.x, 0.15);
                blobCurrentState.y = lerp(blobCurrentState.y, blobTargetState.y, 0.15);
                blobCurrentState.width = lerp(blobCurrentState.width, blobTargetState.width, 0.15);
                blobCurrentState.height = lerp(blobCurrentState.height, blobTargetState.height, 0.15);
                blobCurrentState.radius = lerp(blobCurrentState.radius, blobTargetState.radius, 0.15);

                // Aplica os estilos
                blob.style.width = `${blobCurrentState.width}px`;
                blob.style.height = `${blobCurrentState.height}px`;
                blob.style.borderRadius = `${blobCurrentState.radius}px`;
                blob.style.transform = `translate(${blobCurrentState.x}px, ${blobCurrentState.y}px)`;
                
                animationFrameId = requestAnimationFrame(animate);
            }

            function startAnimation(e) {
                if (e) {
                    mouse.x = e.clientX;
                    mouse.y = e.clientY;
                }
                if (!animationFrameId) {
                    blob.style.opacity = '1';
                    // Sincroniza o estado atual com a posição do mouse para evitar o salto inicial
                    blobCurrentState.x = mouse.x - blobCurrentState.width / 2;
                    blobCurrentState.y = mouse.y - blobCurrentState.height / 2;
                    animate();
                }
            }

            function stopAnimation() {
                if (animationFrameId) {
                    blob.style.opacity = '0';
                    cancelAnimationFrame(animationFrameId);
                    animationFrameId = null;
                }
            }

            window.addEventListener('mousemove', (e) => {
                mouse.x = e.clientX;
                mouse.y = e.clientY;
                if (!animationFrameId) {
                    startAnimation();
                }
            });

            document.body.addEventListener('mouseenter', startAnimation);
            document.body.addEventListener('mouseleave', stopAnimation);

            const targets = document.querySelectorAll('[data-cursor-target]');

            targets.forEach(target => {
                target.addEventListener('mouseenter', () => { activeTarget = target; });
                target.addEventListener('mouseleave', () => { activeTarget = null; });
            });
        }
    });
</script>
{% endblock %}