<!-- pages/careers.vue -->
<template>
    <div class="careers-page">
        <!-- Hero секция -->
        <section class="hero-section">
            <div class="container">
                <div class="hero-content">
                    <h1 class="hero-title">
                        🚀 Ищем тимейтов для роста и прорыва
                    </h1>
                    <p class="hero-subtitle">
                        Создаём цифровое будущее вместе через open-source
                    </p>
                    <div class="hero-actions">
                        <NuxtLink class="btn btn-primary" @click="handleJoinTeam()">
                            Присоединиться к команде
                        </NuxtLink>
                        <NuxtLink  class="btn btn-outline" @click="scrollToVacancies()">
                            Смотреть вакансии
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </section>

        <!-- Миссия -->
        <section class="mission-section">
            <div class="container">
                <div class="mission-grid">
                    <div class="mission-content">
                        <h2>💫 Наша миссия</h2>
                        <p>Мы строим сообщество профессионалов, которые через технологии создают реальную пользу для
                            людей. Это не просто коммерческая работа — это возможность расти, решая сложные задачи и открывая
                            новые горизонты.</p>

                        <div class="values-grid">
                            <div class="value-card">
                                <div class="value-icon">🌱</div>
                                <h3>Бирюзовый подход</h3>
                                <p>Самоуправляемые команды, эволюционная цель, целостность личности</p>
                            </div>
                            <div class="value-card">
                                <div class="value-icon">🌍</div>
                                <h3>ESG принципы</h3>
                                <p>Устойчивое развитие, социальная ответственность, экологическое мышление</p>
                            </div>
                            <div class="value-card">
                                <div class="value-icon">⚡</div>
                                <h3>Open Source</h3>
                                <p>Прозрачность, сообщество, совместное создание ценности</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Вакансии -->
        <section id="vacancies" class="vacancies-section">
            <div class="container">
                <h2 class="section-title">👥 Кого мы ищем:</h2>

                <div id="vacancies" class="vacancies-grid">
                    <!-- Frontend -->
                    <div class="vacancy-card">
                        <div class="vacancy-header">
                            <div class="vacancy-icon">💻</div>
                            <h3>Frontend Developer</h3>
                            <span class="badge badge-primary">Nuxt.js 4</span>
                        </div>
                        <div class="vacancy-tech">
                            <h4>Технологии:</h4>
                            <div class="tech-tags">
                                <span class="tech-tag">Nuxt.js 4</span>
                                <span class="tech-tag">Vue 3</span>
                                <span class="tech-tag">Vite</span>
                                <span class="tech-tag">Node.js</span>
                                <span class="tech-tag">TypeScript</span>
                                <span class="tech-tag">CSS3</span>
                            </div>
                        </div>
                        <div class="vacancy-description">
                            <p>Создаем современные пользовательские интерфейсы для сложных web-приложений. Работа с
                                микросервисной архитектурой, оптимизация производительности.</p>
                        </div>
                    </div>

                    <!-- Backend -->
                    <div class="vacancy-card">
                        <div class="vacancy-header">
                            <div class="vacancy-icon">⚙️</div>
                            <h3>Backend Developer</h3>
                            <span class="badge badge-accent">Golang</span>
                        </div>
                        <div class="vacancy-tech">
                            <h4>Технологии:</h4>
                            <div class="tech-tags">
                                <span class="tech-tag">Golang</span>
                                <span class="tech-tag">GORM</span>
                                <span class="tech-tag">Chi</span>
                                <span class="tech-tag">PostgreSQL</span>
                                <span class="tech-tag">Docker</span>
                                <span class="tech-tag">Redis</span>
                            </div>
                        </div>
                        <div class="vacancy-description">
                            <p>Разработка высоконагруженных API, проектирование баз данных, создание масштабируемой
                                микросервисной архитектуры.</p>
                        </div>
                    </div>

                    <!-- Analytics -->
                    <div class="vacancy-card">
                        <div class="vacancy-header">
                            <div class="vacancy-icon">📊</div>
                            <h3>Data Analyst</h3>
                            <span class="badge badge-success">Analytics</span>
                        </div>
                        <div class="vacancy-tech">
                            <h4>Направления:</h4>
                            <div class="tech-tags">
                                <span class="tech-tag">SQL</span>
                                <span class="tech-tag">Python</span>
                                <span class="tech-tag">Tableau</span>
                                <span class="tech-tag">A/B тесты</span>
                                <span class="tech-tag">ML basics</span>
                            </div>
                        </div>
                        <div class="vacancy-description">
                            <p>Анализ пользовательского поведения, построение метрик продукта, data-driven принятие
                                решений и визуализация данных.</p>
                        </div>
                    </div>

                    <!-- Designer -->
                    <div class="vacancy-card">
                        <div class="vacancy-header">
                            <div class="vacancy-icon">🎨</div>
                            <h3>Product Designer</h3>
                            <span class="badge badge-secondary">Figma</span>
                        </div>
                        <div class="vacancy-tech">
                            <h4>Инструменты:</h4>
                            <div class="tech-tags">
                                <span class="tech-tag">Figma</span>
                                <span class="tech-tag">UI/UX</span>
                                <span class="tech-tag">Prototyping</span>
                                <span class="tech-tag">Design Systems</span>
                                <span class="tech-tag">User Research</span>
                            </div>
                        </div>
                        <div class="vacancy-description">
                            <p>Создание пользовательских интерфейсов, проектирование UX, разработка дизайн-системы и
                                исследование пользовательских сценариев.</p>
                        </div>
                    </div>

                    <!-- Sales -->
                    <div class="vacancy-card">
                        <div class="vacancy-header">
                            <div class="vacancy-icon">🚀</div>
                            <h3>Sales & Strategy</h3>
                            <span class="badge badge-warning">Growth</span>
                        </div>
                        <div class="vacancy-tech">
                            <h4>Навыки:</h4>
                            <div class="tech-tags">
                                <span class="tech-tag">B2B Sales</span>
                                <span class="tech-tag">Strategy</span>
                                <span class="tech-tag">Market Research</span>
                                <span class="tech-tag">Partnerships</span>
                                <span class="tech-tag">GTM</span>
                            </div>
                        </div>
                        <div class="vacancy-description">
                            <p>Разработка стратегий роста, поиск партнёров, построение sales-процессов, анализ рынков и
                                конкурентов.</p>
                        </div>
                    </div>

                    <!-- Manager -->
                    <div class="vacancy-card">
                        <div class="vacancy-header">
                            <div class="vacancy-icon">👔</div>
                            <h3>Project Manager</h3>
                            <span class="badge badge-info">Management</span>
                        </div>
                        <div class="vacancy-tech">
                            <h4>Компетенции:</h4>
                            <div class="tech-tags">
                                <span class="tech-tag">Agile</span>
                                <span class="tech-tag">Scrum</span>
                                <span class="tech-tag">Team Leadership</span>
                                <span class="tech-tag">Roadmapping</span>
                                <span class="tech-tag">Stakeholder Management</span>
                            </div>
                        </div>
                        <div class="vacancy-description">
                            <p>Координация команд, управление проектами, планирование релизов, коммуникация со
                                стейкхолдерами.</p>
                        </div>
                    </div>

                    <!-- SEO Specialist -->
                    <div class="vacancy-card">
                        <div class="vacancy-header">
                            <div class="vacancy-icon">🔍</div>
                            <h3>SEO Specialist</h3>
                            <span class="badge badge-success">Search</span>
                        </div>
                        <div class="vacancy-tech">
                            <h4>Навыки:</h4>
                            <div class="tech-tags">
                                <span class="tech-tag">Technical SEO</span>
                                <span class="tech-tag">Keyword Research</span>
                                <span class="tech-tag">Link Building</span>
                                <span class="tech-tag">Google Analytics</span>
                                <span class="tech-tag">Content Strategy</span>
                            </div>
                        </div>
                        <div class="vacancy-description">
                            <p>Повышение органической видимости проекта, техническая SEO-оптимизация, анализ конкурентов
                                и работа с метриками.</p>
                        </div>
                    </div>

                    <!-- SMM Specialist -->
                    <div class="vacancy-card">
                        <div class="vacancy-header">
                            <div class="vacancy-icon">📱</div>
                            <h3>SMM Specialist</h3>
                            <span class="badge badge-primary">Social Media</span>
                        </div>
                        <div class="vacancy-tech">
                            <h4>Навыки:</h4>
                            <div class="tech-tags">
                                <span class="tech-tag">Content Planning</span>
                                <span class="tech-tag">Community Building</span>
                                <span class="tech-tag">Analytics</span>
                                <span class="tech-tag">Paid Ads</span>
                                <span class="tech-tag">Storytelling</span>
                            </div>
                        </div>
                        <div class="vacancy-description">
                            <p>Создание и ведение сообществ, разработка контент-стратегии, работа с аудиторией и запуск
                                рекламных кампаний в соцсетях.</p>
                        </div>
                    </div>

                    <!-- Copywriter -->
                    <div class="vacancy-card">
                        <div class="vacancy-header">
                            <div class="vacancy-icon">✍️</div>
                            <h3>Копирайтер</h3>
                            <span class="badge badge-secondary">Content</span>
                        </div>
                        <div class="vacancy-tech">
                            <h4>Навыки:</h4>
                            <div class="tech-tags">
                                <span class="tech-tag">Storytelling</span>
                                <span class="tech-tag">UX Writing</span>
                                <span class="tech-tag">SEO Texts</span>
                                <span class="tech-tag">Brand Voice</span>
                                <span class="tech-tag">Editing</span>
                            </div>
                        </div>
                        <div class="vacancy-description">
                            <p>Создание продающих, информационных и SEO-текстов, разработка контент-стратегии и работа
                                с тоном голоса бренда.</p>
                        </div>
                    </div>
                </div>

                <!-- Пояснение про комбинированные роли -->
                <div class="roles-explanation">
                    <div class="explanation-card">
                        <h3>💡 О комбинированных ролях в стартапе</h3>
                        <p>В стартап-среде мы ценим <strong>универсальность и способность работать на стыке
                                специальностей</strong>. Если вы чувствуете силу в нескольких направлениях — это
                            огромное преимущество!</p>
                        <div class="explanation-grid">
                            <div class="explanation-item">
                                <div class="explanation-icon">🔄</div>
                                <h4>Гибкость</h4>
                                <p>Возможность пробовать разные направления и находить свои сильные стороны</p>
                            </div>
                            <div class="explanation-item">
                                <div class="explanation-icon">🚀</div>
                                <h4>Быстрый рост</h4>
                                <p>Освоение смежных навыков ускоряет профессиональное развитие</p>
                            </div>
                            <div class="explanation-item">
                                <div class="explanation-icon">🎯</div>
                                <h4>Широкий взгляд</h4>
                                <p>Понимание holistic подхода к digital-маркетингу</p>
                            </div>
                        </div>

                        <div class="cta-note">
                            <p><strong>Не бойтесь пробовать!</strong> Даже если вы сильны только в одном направлении, но
                                хотите развиваться в других — мы готовы поддержать ваше развитие.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Важные качества -->
        <section class="qualities-section">
            <div class="container">
                <h2 class="section-title">⭐ Важные качества</h2>

                <div class="qualities-grid">
                    <div class="quality-item">
                        <div class="quality-icon">🛡️</div>
                        <h4>Антипригарное покрытие</h4>
                        <p>Устойчивость к выгоранию, умение сохранять энергию на длинной дистанции</p>
                    </div>

                    <div class="quality-item">
                        <div class="quality-icon">🎯</div>
                        <h4>Самостоятельность</h4>
                        <p>Способность брать ответственность и доводить задачи до конца</p>
                    </div>

                    <div class="quality-item">
                        <div class="quality-icon">🤝</div>
                        <h4>Терпимость</h4>
                        <p>Уважение к разным мнениям, эмпатия, конструктивная коммуникация</p>
                    </div>

                    <div class="quality-item">
                        <div class="quality-icon">🌿</div>
                        <h4>Здоровые привычки</h4>
                        <p>Осознанный подход к здоровью, баланс работы и отдыха</p>
                    </div>

                    <div class="quality-item">
                        <div class="quality-icon">⚽</div>
                        <h4>Спорт/Хобби</h4>
                        <p>Программирование — часть жизни, а не работа. Важно иметь другие увлечения</p>
                    </div>

                    <div class="quality-item">
                        <div class="quality-icon">🌟</div>
                        <h4>Проактивность</h4>
                        <p>Инициативность, желание влиять на результат, а не просто выполнять задачи</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Что получаете -->
        <section class="benefits-section">
            <div class="container">
                <h2 class="section-title">🎯 Что получаете взамен:</h2>

                <div class="benefits-grid">
                    <div class="benefit-card">
                        <div class="benefit-icon">✅</div>
                        <h3>Реальный опыт</h3>
                        <p>Задачи уровня коммерческих проектов, которые впечатляют работодателей</p>
                    </div>

                    <div class="benefit-card">
                        <div class="benefit-icon">📈</div>
                        <h3>Профессиональный рост</h3>
                        <p>Следующий уровень навыков гарантирован через решение сложных задач</p>
                    </div>

                    <div class="benefit-card">
                        <div class="benefit-icon">🤝</div>
                        <h3>Нетворкинг</h3>
                        <p>Сообщество сильных специалистов, взаимопомощь и обмен опытом</p>
                    </div>

                    <div class="benefit-card">
                        <div class="benefit-icon">💼</div>
                        <h3>Портфолио</h3>
                        <p>Проекты, которые действительно впечатляют и показывают ваш уровень</p>
                    </div>

                    <div class="benefit-card">
                        <div class="benefit-icon">🔄</div>
                        <h3>Горизонтальное развитие</h3>
                        <p>Возможность пробовать себя в смежных ролях и расширять экспертизу</p>
                    </div>

                    <div class="benefit-card">
                        <div class="benefit-icon">💎</div>
                        <h3>Доля в проекте</h3>
                        <p>Участие в будущих доходах проекта как сооснователь</p>
                    </div>
                </div>

                <!-- Важное предупреждение -->
                <div class="warning-card">
                    <div class="warning-header">
                        <span class="warning-icon">⚠️</span>
                        <h3>Важная информация</h3>
                    </div>
                    <p>Это <strong>стартап на ранней стадии</strong>. На данный момент единственное возможное
                        вознаграждение:</p>
                    <ul>
                        <li>💪 <strong>Опыт</strong> — реальные проекты в портфолио</li>
                        <li>📚 <strong>Рост профессионализма</strong> — следующий уровень навыков</li>
                        <li>📈 <strong>Доля от будущих доходов</strong> — участие в успехе проекта</li>
                        <li>👥 <strong>Новые знакомства</strong> — сообщество единомышленников</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- CTA секция -->
        <section class="cta-section">
            <div class="container">
                <div class="cta-content">
                    <h2>Готовы расти вместе?</h2>
                    <p>Если вы ищете не просто проект, а сообщество для профессионального прорыва — давайте знакомиться!
                    </p>
                    <div class="cta-actions">
                        <button class="btn btn-primary btn-large" @click="showContactForm = true">
                            Написать нам
                        </button>
                        <a href="https://t.me/your_telegram" class="btn btn-outline btn-large" target="_blank">
                            Telegram
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <div id="contact"></div>
        <!-- Модальное окно контактов -->
        <div v-if="showContactForm" id="contact" class="modal-overlay" @click="showContactForm = false">
            <div class="modal-content" @click.stop>
                <button class="modal-close" @click="showContactForm = false">×</button>

                <h3>Присоединиться к команде</h3>

                <form class="contact-form" @submit.prevent="submitForm">
                    <div class="form-group">
                        <label for="name">Имя *</label>
                        <input id="name" v-model="form.name" type="text" required placeholder="Как к вам обращаться?">
                    </div>

                    <div class="form-group">
                        <label for="email">Email *</label>
                        <input id="email" v-model="form.email" type="email" required placeholder="your@email.com">
                    </div>

                    <!-- В модальном окне формы обновите опции ролей -->
                    <div class="form-group">
                        <label for="role">Интересующая роль *</label>
                        <select id="role" v-model="form.role" required>
                            <option value="">Выберите роль</option>
                            <option value="frontend">Frontend Developer</option>
                            <option value="backend">Backend Developer</option>
                            <option value="analytics">Data Analyst</option>
                            <option value="designer">Product Designer</option>
                            <option value="sales">Sales & Strategy</option>
                            <option value="manager">Project Manager</option>
                            <option value="seo">SEO Specialist</option>
                            <option value="smm">SMM Specialist</option>
                            <option value="copywriter">Копирайтер</option>
                            <option value="seo-copy">SEO + Копирайтинг</option>
                            <option value="smm-copy">SMM + Копирайтинг</option>
                            <option value="smm-seo">SMM + SEO</option>
                            <option value="digital-marketing">Digital Marketing (полный цикл)</option>
                            <option value="other">Другое</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="message">Расскажите о себе *</label>
                        <textarea id="message" v-model="form.message" required rows="5"
                            placeholder="Ваш опыт, почему хотите присоединиться, что вас вдохновляет..." />
                    </div>

                    <div class="form-group">
                        <label for="portfolio">Ссылка на портфолио/GitHub</label>
                        <input id="portfolio" v-model="form.portfolio" type="url"
                            placeholder="https://github.com/yourname">
                    </div>

                    <button type="submit" class="btn btn-primary btn-full" :disabled="loading">
                        {{ loading ? 'Отправка...' : 'Отправить заявку' }}
                    </button>
                </form>

                <div class="alternative-contacts">
                    <p>Или напишите напрямую:</p>
                    <div class="contact-links">
                        <a href="mailto:valitovgaziz@yandex.ru" class="contact-link">
                            📧 mailto:valitovgaziz@yandex.ru
                        </a>
                        <a href="https://t.me/valitovgaziz" class="contact-link" target="_blank">
                            💬 Telegram
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const { sendMessageToTelegram } = useTelegram();
const showContactForm = ref(false)
const loading = ref(false)
const toast = useToast()
const form = ref({
    name: '',
    email: '',
    role: '',
    message: '',
    portfolio: ''
})


// Функция для форматирования сообщения в Telegram
const formatTelegramMessage = (formData) => {
    const roleLabels = {
        'frontend': 'Frontend Developer',
        'backend': 'Backend Developer',
        'analytics': 'Data Analyst',
        'designer': 'Product Designer',
        'sales': 'Sales & Strategy',
        'manager': 'Project Manager',
        'seo': 'SEO Specialist',
        'smm': 'SMM Specialist',
        'copywriter': 'Копирайтер',
        'seo-copy': 'SEO + Копирайтинг',
        'smm-copy': 'SMM + Копирайтинг',
        'smm-seo': 'SMM + SEO',
        'digital-marketing': 'Digital Marketing (полный цикл)',
        'other': 'Другое'
    };

    const roleName = roleLabels[formData.role] || formData.role;

    return `🎯 <b>Новая заявка в команду!</b>

👤 <b>Имя:</b> ${formData.name}
📧 <b>Email:</b> ${formData.email}
💼 <b>Роль:</b> ${roleName}

📝 <b>Сообщение:</b>
${formData.message}

${formData.portfolio ? `🔗 <b>Портфолио:</b> ${formData.portfolio}` : '🔗 <b>Портфолио:</b> Не указано'}

⏰ <b>Время:</b> ${new Date().toLocaleString('ru-RU')}
🌐 <b>Источник:</b> Careers Page`;
}

const submitForm = async () => {
    loading.value = true

    try {
        // Форматируем сообщение для Telegram
        const telegramMessage = formatTelegramMessage(form.value);

        // Отправляем в Telegram
        const { success, error } = await sendMessageToTelegram(telegramMessage);

        if (success) {
            // Успешная отправка - показываем красивое уведомление
            toast.add({
                title: 'Заявка отправлена! 🎉',
                description: 'Свяжемся с вами в ближайшее время',
                icon: 'i-heroicons-check-badge',
                color: 'green',
                timeout: 5000
            });

            // Закрываем модальное окно
            showContactForm.value = false

            // Сбрасываем форму
            form.value = {
                name: '',
                email: '',
                role: '',
                message: '',
                portfolio: ''
            }

        } else {
            throw new Error(error || 'Ошибка отправки в Telegram');
        }

    } catch (error) {
        console.error('Ошибка отправки формы:', error)

        // Показываем уведомление об ошибке
        if (error.message.includes('Telegram') || error.message.includes('сети')) {
            toast.add({
                title: 'Ошибка отправки 🌐',
                description: 'Проблемы с соединением. Напишите нам напрямую в Telegram или на email',
                icon: 'i-heroicons-exclamation-triangle',
                color: 'red',
                timeout: 7000
            });
        } else {
            toast.add({
                title: 'Ошибка ❌',
                description: 'Не удалось отправить заявку. Попробуйте еще раз',
                icon: 'i-heroicons-exclamation-triangle',
                color: 'red',
                timeout: 5000
            });
        }
    } finally {
        loading.value = false
    }
}

// Функция для прокрутки к вакансиям
const scrollToVacancies = () => {
    nextTick(() => {
        const vacanciesSection = document.getElementById('vacancies');
        if (vacanciesSection) {
            vacanciesSection.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
};


// Функция для открытия формы
const handleJoinTeam = () => {
    showContactForm.value = true;
};

// SEO мета-теги
useSeoMeta({
    title: 'Присоединиться к команде - ЯЛ АРБА',
    description: 'Станьте частью команды, создающей цифровое-будущее через open-source создание SaaS сервисов. Frontend, Backend, Design, Analytics вакансии.',
    ogTitle: 'Вакансии в стартап ЯЛ АРБА',
    ogDescription: 'Ищем тимейтов для роста и прорыва. Создаем будущее вместе.'
})


</script>

<style scoped>
.careers-page {
    background: var(--bg-primary);
}

/* Hero секция */
.hero-section {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
    color: var(--text-inverse);
    padding: var(--space-2xl) 0;
    text-align: center;
    
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--space-lg);
    line-height: 1.1;
}

.hero-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    margin-bottom: var(--space-xl);
    opacity: 0.9;
}

.hero-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Миссия */
.mission-section {
    padding: var(--space-2xl) 0;
    background: var(--bg-secondary);
}

.mission-grid {
    max-width: 800px;
    margin: 0 auto;
}

.mission-content h2 {
    margin-bottom: var(--space-lg);
    color: var(--primary-600);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.value-card {
    background: var(--bg-primary);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border-light);
}

.value-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
}

.value-card h3 {
    margin-bottom: var(--space-sm);
    color: var(--primary-600);
}

/* Вакансии */
.vacancies-section {
    padding: var(--space-2xl) 0;
}

.section-title {
    text-align: center;
    margin-bottom: var(--space-2xl);
    font-size: var(--text-3xl);
    color: var(--text-primary);
}

.vacancies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-lg);
}

.vacancy-card {
    background: var(--bg-primary);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}

.vacancy-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-300);
}

.vacancy-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.vacancy-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.vacancy-header h3 {
    flex: 1;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.vacancy-tech h4 {
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.tech-tag {
    background: var(--gray-100);
    color: var(--gray-700);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.vacancy-description p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* Качества */
.qualities-section {
    padding: var(--space-2xl) 0;
    background: var(--bg-secondary);
}

.qualities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.quality-item {
    text-align: center;
    padding: var(--space-lg);
}

.quality-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
}

.quality-item h4 {
    margin-bottom: var(--space-sm);
    color: var(--primary-600);
}

.quality-item p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* Бенефиты */
.benefits-section {
    padding: var(--space-2xl) 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.benefit-card {
    background: var(--bg-primary);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    text-align: center;
}

.benefit-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
}

.benefit-card h3 {
    margin-bottom: var(--space-sm);
    color: var(--primary-600);
}

.benefit-card p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.warning-card {
    background: var(--warning-50);
    border: 1px solid var(--warning-200);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-top: var(--space-xl);
}

.warning-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.warning-icon {
    font-size: 1.5rem;
}

.warning-header h3 {
    color: var(--warning-700);
    margin-bottom: 0;
}

.warning-card ul {
    margin-top: var(--space-md);
    padding-left: var(--space-lg);
}

.warning-card li {
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
}

/* CTA секция */
.cta-section {
    background: linear-gradient(135deg, var(--secondary-400) 0%, var(--secondary-600) 100%);
    color: var(--text-inverse);
    padding: var(--space-2xl) 0;
    text-align: center;
}

.cta-content h2 {
    margin-bottom: var(--space-lg);
    font-size: var(--text-3xl);
}

.cta-content p {
    margin-bottom: var(--space-xl);
    font-size: var(--text-lg);
    opacity: 0.9;
}

.cta-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-large {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-lg);
}

.btn-full {
    width: 100%;
}

/* Модальное окно */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-md);
}

.modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-tertiary);
}

.modal-content h3 {
    margin-bottom: var(--space-xl);
    text-align: center;
    color: var(--primary-600);
}

.contact-form {
    margin-bottom: var(--space-xl);
}

.alternative-contacts {
    text-align: center;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-light);
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.contact-link {
    color: var(--primary-600);
    text-decoration: none;
    padding: var(--space-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.contact-link:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
}

/* Адаптивность */
@media (max-width: 768px) {

    .hero-actions,
    .cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .vacancies-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        padding: var(--space-xl);
    }

    .vacancy-header {
        flex-direction: column;
        text-align: center;
    }
}

/* Стили для обновленной секции вакансий */
.featured-card {
    border: 2px solid var(--primary-300);
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-primary) 100%);
    position: relative;
}

.badge-group {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.role-combination {
    background: var(--primary-100);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    border-left: 4px solid var(--primary-500);
}

.combination-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: var(--font-semibold);
    color: var(--primary-700);
    margin-bottom: var(--space-xs);
}

.combination-icon {
    font-size: 1.2rem;
}

.combination-description {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.skill-category h5 {
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.role-details {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0;
}

.role-details li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
}

.role-details li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-500);
    font-weight: bold;
}

.role-flexibility {
    background: var(--success-50);
    border: 1px solid var(--success-200);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-top: var(--space-lg);
}

.flexibility-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--success-100);
    color: var(--success-700);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: var(--space-sm);
}

.flexibility-icon {
    font-size: 1rem;
}

.roles-explanation {
    margin-top: var(--space-2xl);
}

.explanation-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    border: 1px solid var(--border-light);
}

.explanation-card h3 {
    margin-bottom: var(--space-lg);
    color: var(--primary-600);
    text-align: center;
}

.explanation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.explanation-item {
    text-align: center;
    padding: var(--space-lg);
}

.explanation-icon {
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.explanation-item h4 {
    margin-bottom: var(--space-sm);
    color: var(--primary-600);
}

.explanation-item p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.cta-note {
    background: var(--primary-50);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
    border-left: 4px solid var(--primary-500);
}

.cta-note p {
    margin: 0;
    color: var(--primary-700);
}

/* Адаптивность */
@media (max-width: 768px) {
    .skills-grid {
        grid-template-columns: 1fr;
    }

    .explanation-grid {
        grid-template-columns: 1fr;
    }

    .role-combination,
    .role-flexibility {
        padding: var(--space-sm);
    }
}

/* Стили для обновленной секции вакансий */
.roles-explanation {
    margin-top: var(--space-2xl);
}

.explanation-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    border: 1px solid var(--border-light);
}

.explanation-card h3 {
    margin-bottom: var(--space-lg);
    color: var(--primary-600);
    text-align: center;
}

.combination-examples {
    margin: var(--space-xl) 0;
    padding: var(--space-lg);
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.combination-examples h4 {
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
    text-align: center;
}

.combination-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
}

.combination-item {
    text-align: center;
    padding: var(--space-lg);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.combination-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.combination-item p {
    margin: 0;
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.explanation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.explanation-item {
    text-align: center;
    padding: var(--space-lg);
}

.explanation-icon {
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.explanation-item h4 {
    margin-bottom: var(--space-sm);
    color: var(--primary-600);
}

.explanation-item p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.cta-note {
    background: var(--primary-50);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
    border-left: 4px solid var(--primary-500);
}

.cta-note p {
    margin: 0;
    color: var(--primary-700);
}

/* Адаптивность */
@media (max-width: 768px) {
    .combination-grid {
        grid-template-columns: 1fr;
    }

    .explanation-grid {
        grid-template-columns: 1fr;
    }

    .explanation-card {
        padding: var(--space-lg);
    }

    .combination-examples {
        padding: var(--space-md);
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

/* Стили для NuxtLink если используете */
.btn.btn-outline {
    border: 1px solid var(--primary-500);
    background: transparent;
    color: var(--primary-500);
    transition: all 0.2s;
}

.btn.btn-outline:hover {
    background: var(--primary-500);
    color: var(--text-inverse);
}

.hero-actions .btn {
    pointer-events: auto !important;
}
</style>