const guides = {
    onboarding: [
        {
            icon: "👋",
            title: "Добро пожаловать!",
            description: "Ты только что устроился к нам. Не переживай — всё просто!",
            visual: "🎉"
        },
        {
            icon: "💻",
            title: "Получи компьютер",
            description: "Подойди к IT-отделу и скажи: 'Мне нужен компьютер для работы'. Они всё дадут.",
            visual: "🖥️"
        },
        {
            icon: "📧",
            title: "Почта и пароли",
            description: "Тебе дадут листок с логином и паролем. Не потеряй!",
            visual: "📋"
        }
    ],
    process: [
        {
            icon: "📋",
            title: "Получи задачу",
            description: "Зайди в программу 'Задачи'. Там будут твои дела на сегодня.",
            visual: "📝"
        },
        {
            icon: "⏱️",
            title: "Сделай и закрой",
            description: "Сделал задачу — нажми кнопку 'Готово'. Всё, можно брать следующую.",
            visual: "✅"
        },
        {
            icon: "❓",
            title: "Если не получается",
            description: "Не мучайся! Напиши в чат или позвони руководителю. Помогут.",
            visual: "💬"
        }
    ],
    tools: [
        {
            icon: "📞",
            title: "Телефон",
            description: "Набери 100 — это внутренняя линия. Тебе ответит любой коллега.",
            visual: "📱"
        },
        {
            icon: "💬",
            title: "Чат команды",
            description: "Зайди в чат и напиши 'Привет, я новый'. Все поздравят!",
            visual: "👋"
        },
        {
            icon: "📅",
            title: "Календарь",
            description: "Смотри в календарь — там все совещания и дедлайны.",
            visual: "📆"
        }
    ]
};

let currentGuide = 'onboarding';
let currentStep = 0;

function updateGuide() {
    const container = document.getElementById('guideContainer');
    const steps = guides[currentGuide];
    const step = steps[currentStep];
    
    container.innerHTML = `
        <div class="step-card">
            <span class="step-icon">${step.icon}</span>
            <h2 class="step-title">${step.title}</h2>
            <p class="step-description">${step.description}</p>
            <div class="step-visual">${step.visual}</div>
        </div>
    `;
    
    document.getElementById('stepCounter').textContent = `Шаг ${currentStep + 1} из ${steps.length}`;
    document.getElementById('btnBack').disabled = currentStep === 0;
    document.getElementById('btnNext').textContent = currentStep === steps.length - 1 ? 'Готово!' : 'Далее →';
}

document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', () => {
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        currentGuide = tab.dataset.guide;
        currentStep = 0;
        updateGuide();
    });
});

document.getElementById('btnNext').addEventListener('click', () => {
    const steps = guides[currentGuide];
    if (currentStep < steps.length - 1) {
        currentStep++;
        updateGuide();
    } else {
        alert('🎉 Ты прошёл все шаги! Теперь ты знаешь, как работать!');
    }
});

document.getElementById('btnBack').addEventListener('click', () => {
    if (currentStep > 0) {
        currentStep--;
        updateGuide();
    }
});

updateGuide();