<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="footer.css"> <!-- Inclui o CSS do footer -->
    <title>FAQ - Baby Monster WhatsApp Chatbot</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px;
            background-color: #f9f9f9;
            border: none;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Garante que o conteúdo ocupe toda a altura da página */
        }
        h1, h2 {
            color: #2c3e50;
        }
        .content {
            flex: 1; /* Faz o conteúdo crescer para ocupar o espaço disponível */
        }
        .faq-item {
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .faq-question {
            background-color: #f7f7f7;
            padding: 15px;
            cursor: pointer;
            font-weight: bold;
            border-radius: 5px;
            color: #2c3e50;
        }
        .faq-answer {
            display: none;
            padding: 15px;
            background-color: #fff;
            border-top: 1px solid #ccc;
        }
        button {
            background-color: #ff69b4;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
        }
        button:hover {
            background-color: #ff69b4;
        }
        .link {
            text-align: center;
            margin-top: 20px;
        }
        a {
            color: #2c3e50;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        /* Footer fixo */
        .footer-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #f8f9fa;
            text-align: center;
            padding: 8px 0;
            box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
            font-size: 12px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            box-sizing: border-box;
        }
        .footer-bar a {
            color: #071f39;
            text-decoration: none;
            margin: 5px 10px;
        }
        .footer-bar a:hover {
            text-decoration: underline;
        }
        /* Estilo específico para dispositivos móveis */
        @media (max-width: 600px) {
            .footer-bar {
                font-size: 10px;
                padding: 6px 0;
            }
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const faqItems = document.querySelectorAll('.faq-question');

            faqItems.forEach(item => {
                item.addEventListener('click', function() {
                    const answer = this.nextElementSibling;
                    const currentlyOpen = document.querySelector('.faq-answer[style*="display: block"]');
                    
                    // Fecha a resposta aberta, se houver
                    if (currentlyOpen && currentlyOpen !== answer) {
                        currentlyOpen.style.display = 'none';
                    }
                    
                    // Alterna a visibilidade da resposta
                    answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
                    
                    // Ajusta o scroll para garantir que a pergunta aberta seja visível
                    if (answer.style.display === 'block') {
                        answer.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                });
            });
        });
    </script>
</head>
<body>

<div class="content">
    <h1>FAQ - Baby Monster WhatsApp Chatbot</h1>

    <div class="faq-item">
        <div class="faq-question">O que é a automação de WhatsApp com IA?</div>
        <div class="faq-answer">A automação de WhatsApp com IA é uma solução oficial da Meta que permite que sua empresa atenda clientes automaticamente pelo WhatsApp. Utilizando inteligência artificial, a automação responde a perguntas, fornece informações e realiza tarefas repetitivas de forma eficiente e personalizada.</div>
    </div>

    <div class="faq-item">
        <div class="faq-question">Como é garantida a segurança dos dados?</div>
        <div class="faq-answer">Todos os dados são tratados com total sigilo e são criptografados de ponta a ponta, garantindo que as informações dos seus clientes estejam sempre seguras e protegidas.</div>
    </div>

    <div class="faq-item">
        <div class="faq-question">O serviço funciona 24 horas por dia?</div>
        <div class="faq-answer">Sim, a automação de WhatsApp com IA está disponível 24 horas por dia, 7 dias por semana, garantindo que seus clientes sejam atendidos a qualquer hora, sem interrupções.</div>
    </div>

    <div class="faq-item">
        <div class="faq-question">Preciso deixar meu celular ligado para a automação funcionar?</div>
        <div class="faq-answer">Não, não é necessário manter o celular ligado. A automação funciona independentemente do dispositivo móvel, operando diretamente na nuvem.</div>
    </div>

    <div class="faq-item">
        <div class="faq-question">Quais são os custos envolvidos na automação de WhatsApp com IA?</div>
        <div class="faq-answer">O serviço é oferecido com um custo mensal que inclui 1000 janelas de conversação por mês, independentemente do número de interações dentro dessas janelas. Além disso, a IA permite até 1000 mensagens de respostas por mês.</div>
    </div>

    <div class="faq-item">
        <div class="faq-question">O que são as janelas de conversação?</div>
        <div class="faq-answer">As janelas de conversação são períodos de 24 horas durante os quais todas as mensagens trocadas entre sua empresa e o cliente estão cobertas. Você tem direito a 1000 dessas janelas por mês, independentemente do número de mensagens trocadas dentro de cada janela.</div>
    </div>

    <div class="faq-item">
        <div class="faq-question">Como posso começar a usar a automação de WhatsApp com IA?</div>
        <div class="faq-answer">Para começar, você pode contratar o serviço e configurar os fluxos de conversa de acordo com as necessidades do seu negócio. A partir daí, a IA começará a automatizar suas interações com os clientes.</div>
    </div>

    <div class="faq-item">
        <div class="faq-question">A automação pode lidar com todos os tipos de consultas?</div>
        <div class="faq-answer">A automação é excelente para lidar com perguntas frequentes e consultas básicas. Questões mais complexas podem ser encaminhadas para um atendente humano, garantindo que o cliente receba a melhor assistência possível.</div>
    </div>

    <div class="faq-item">
        <div class="faq-question">Quais tipos de negócios podem se beneficiar da automação de WhatsApp?</div>
        <div class="faq-answer">A automação de WhatsApp é benéfica para diversos tipos de negócios, incluindo e-commerce, atendimento ao cliente, serviços financeiros, educação, e muitos outros, onde a comunicação rápida e eficiente é essencial.</div>
    </div>

    <div class="faq-item">
        <div class="faq-question">Posso personalizar as respostas da automação?</div>
        <div class="faq-answer">Sim, você pode personalizar as respostas da automação para refletir o tom e a voz da sua marca, garantindo que o atendimento automatizado esteja alinhado com a identidade da sua empresa.</div>
    </div>

</div>

<!-- Footer fixo incluído -->
<div class="footer-bar">
    <a href="login.html">Login</a> |
    <a href="politica-privacidade.html">Política de Privacidade</a> |
    <a href="sobre.html">Sobre o App</a> |
    <a href="termos-de-uso.html">Termos de Uso</a> |
    <a href="suporte.html">Suporte Técnico</a> |
    <a href="faq.html">FAQ</a> |
    <a href="contato.html">Contato</a>
</div>

</body>
</html>
