Чат-консультант с быстрыми сценариями

<section class="smart-chat">
    <div class="smart-chat__intro">
        <span class="smart-chat__badge">Чат-консультант</span>
        <h2>Быстрые ответы прямо на странице</h2>
        <p>
            Посетитель выбирает готовый вопрос, получает понятный ответ и видит следующий шаг:
            записаться, оставить заявку или перейти к услуге.
        </p>
    </div>

    <div class="smart-chat__widget">
        <div class="smart-chat__window">
            <div class="smart-chat__top">
                <div class="smart-chat__avatar">AI</div>
                <div>
                    <strong>Онлайн-консультант</strong>
                    <span>обычно отвечает сразу</span>
                </div>
            </div>

            <div class="smart-chat__messages">
                <div class="smart-chat__message smart-chat__message--bot">
                    Здравствуйте. Выберите вопрос ниже — я покажу быстрый ответ.
                </div>
            </div>

            <div class="smart-chat__quick">
                <button type="button" data-answer="price">Сколько стоит?</button>
                <button type="button" data-answer="time">Когда можно начать?</button>
                <button type="button" data-answer="format">Онлайн или очно?</button>
                <button type="button" data-answer="request">Хочу заявку</button>
            </div>
        </div>

        <aside class="smart-chat__lead">
            <span>Следующий шаг</span>
            <h3>Не терять горячего посетителя</h3>
            <p>
                После ответа можно сразу показать кнопку записи, форму заявки или ссылку на мессенджер.
            </p>
            <button type="button">Оставить заявку</button>
        </aside>
    </div>
</section>

.smart-chat {
    padding: 46px;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.30), transparent 32%),
        radial-gradient(circle at 88% 82%, rgba(34, 197, 94, 0.18), transparent 34%),
        linear-gradient(135deg, #020617, #0f172a);
}

.smart-chat__intro {
    max-width: 820px;
    margin-bottom: 34px;
}

.smart-chat__badge {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 8px 13px;
    border-radius: 999px;
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    font-size: 13px;
}

.smart-chat__intro h2 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.smart-chat__intro p {
    color: #cbd5e1;
    font-size: 17px;
    line-height: 1.7;
}

.smart-chat__widget {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 26px;
}

.smart-chat__window,
.smart-chat__lead {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 26px;
    background: rgba(15, 23, 42, 0.78);
    box-shadow: 0 28px 80px rgba(2, 6, 23, 0.5);
}

.smart-chat__window {
    overflow: hidden;
}

.smart-chat__top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid #334155;
    background: rgba(2, 6, 23, 0.55);
}

.smart-chat__avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #16a34a, #2563eb);
    font-weight: 800;
}

.smart-chat__top strong {
    display: block;
    color: #ffffff;
}

.smart-chat__top span {
    color: #94a3b8;
    font-size: 13px;
}

.smart-chat__messages {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.smart-chat__message {
    max-width: 82%;
    padding: 13px 15px;
    border-radius: 18px;
    color: #dbeafe;
    line-height: 1.55;
    animation: chatMessage 0.25s ease;
}

.smart-chat__message--bot {
    align-self: flex-start;
    background: #020617;
    border: 1px solid #334155;
}

.smart-chat__message--user {
    align-self: flex-end;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #9333ea);
}

.smart-chat__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px;
    border-top: 1px solid #334155;
}

.smart-chat__quick button {
    border: 1px solid #334155;
    border-radius: 999px;
    padding: 9px 13px;
    color: #cbd5e1;
    background: #020617;
    cursor: pointer;
    transition: 0.25s;
}

.smart-chat__quick button:hover {
    color: #ffffff;
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
    transform: translateY(-2px);
}

.smart-chat__lead {
    position: relative;
    padding: 30px;
    overflow: hidden;
}

.smart-chat__lead::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -100px;
    top: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.25), transparent 70%);
}

.smart-chat__lead > * {
    position: relative;
    z-index: 2;
}

.smart-chat__lead span {
    color: #94a3b8;
}

.smart-chat__lead h3 {
    margin: 14px 0;
    color: #ffffff;
    font-size: 36px;
    line-height: 1.05;
}

.smart-chat__lead p {
    color: #cbd5e1;
    line-height: 1.7;
}

.smart-chat__lead button {
    margin-top: 18px;
    border: 0;
    border-radius: 16px;
    padding: 15px 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #16a34a, #2563eb);
    cursor: pointer;
    transition: 0.25s;
}

.smart-chat__lead button:hover {
    transform: translateY(-2px);
}

@keyframes chatMessage {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 850px) {
    .smart-chat {
        padding: 26px 18px;
    }

    .smart-chat__widget {
        grid-template-columns: 1fr;
    }

    .smart-chat__message {
        max-width: 100%;
    }
}

const chatMessages = document.querySelector(".smart-chat__messages");
const chatButtons = document.querySelectorAll(".smart-chat__quick button");

const chatAnswers = {
    price: {
        question: "Сколько стоит?",
        answer: "Стоимость зависит от задачи. На сайте можно показать калькулятор или несколько пакетов, чтобы человек сразу понимал примерный бюджет."
    },
    time: {
        question: "Когда можно начать?",
        answer: "Такой блок помогает быстро объяснить ближайшие даты, свободные окна или сроки запуска проекта без длинной переписки."
    },
    format: {
        question: "Онлайн или очно?",
        answer: "Можно показать оба варианта: онлайн-консультацию, очную встречу, выезд или смешанный формат работы."
    },
    request: {
        question: "Хочу заявку",
        answer: "Отлично. В реальном проекте здесь можно открыть форму, отправить данные в Telegram или перевести пользователя к записи."
    }
};

function addChatMessage(text, type) {
    const message = document.createElement("div");
    message.className = "smart-chat__message smart-chat__message--" + type;
    message.textContent = text;
    chatMessages.appendChild(message);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

function typeBotAnswer(text) {
    const message = document.createElement("div");
    message.className = "smart-chat__message smart-chat__message--bot";
    chatMessages.appendChild(message);

    let index = 0;

    function typeNext() {
        message.textContent = text.slice(0, index);
        index += 1;

        if (index <= text.length) {
            setTimeout(typeNext, 14);
        }
    }

    typeNext();
}

chatButtons.forEach(function (button) {
    button.addEventListener("click", function () {
        const item = chatAnswers[button.dataset.answer];

        addChatMessage(item.question, "user");

        setTimeout(function () {
            typeBotAnswer(item.answer);
        }, 350);
    });
});