<!-- components/pricing/PricingSection.vue -->
<template>
    <section class="pricing-section">
        <div class="container">
            <div class="pricing-header">
                <h1 class="text-hero text-center">Тарифы для вашего бизнеса</h1>
                <p class="lead text-center">Выберите оптимальное решение для продвижения ваших туристических услуг</p>
            </div>

            <div class="pricing-grid">
                <!-- Тариф Старт -->
                <div class="pricing-card">
                    <div class="pricing-card__header">
                        <h3 class="h3">Старт</h3>
                        <div class="pricing-card__price">
                            990 ₽<span class="pricing-card__period">/месяц</span>
                        </div>
                        <p class="small">Идеально для начинающих</p>
                    </div>

                    <div class="pricing-features">
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>1 объект/услуга</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Базовый шаблон сайта</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Система бронирования</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Базовая SEO-оптимизация</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Статистика просмотров</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Поддержка по email</span>
                        </div>
                    </div>

                    <div class="pricing-card__footer">
                        <button class="btn btn-outline btn-block">Начать 14-дневный пробный период</button>
                    </div>
                </div>

                <!-- Тариф Профессионал (рекомендуемый) -->
                <div class="pricing-card featured">
                    <div class="pricing-card__badge">Самое популярное</div>
                    <div class="pricing-card__header">
                        <h3 class="h3">Профессионал</h3>
                        <div class="pricing-card__price">
                            2 990 ₽<span class="pricing-card__period">/месяц</span>
                        </div>
                        <p class="small">Для растущего бизнеса</p>
                    </div>

                    <div class="pricing-features">
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>До 5 объектов/услуг</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Расширенные шаблоны</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Приоритетная SEO-оптимизация</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Интеграция с календарями</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Email-рассылки для клиентов</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Подробная аналитика</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Приоритетная поддержка</span>
                        </div>
                    </div>

                    <div class="pricing-card__footer">
                        <button class="btn btn-primary btn-block">Начать 14-дневный пробный период</button>
                    </div>
                </div>

                <!-- Тариф Бизнес -->
                <div class="pricing-card">
                    <div class="pricing-card__header">
                        <h3 class="h3">Бизнес</h3>
                        <div class="pricing-card__price">
                            7 990 ₽<span class="pricing-card__period">/месяц</span>
                        </div>
                        <p class="small">Для крупных компаний</p>
                    </div>

                    <div class="pricing-features">
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Неограниченное количество объектов</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Кастомизация дизайна</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Продвинутое SEO + контекстная реклама</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Интеграция с CRM</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>API доступ</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Личный менеджер</span>
                        </div>
                        <div class="pricing-feature">
                            <span class="pricing-feature__icon">✓</span>
                            <span>Поддержка 24/7</span>
                        </div>
                    </div>

                    <div class="pricing-card__footer">
                        <button class="btn btn-outline btn-block">Начать 14-дневный пробный период</button>
                    </div>
                </div>
            </div>

            <!-- Дополнительная информация -->
            <div class="pricing-info text-center">
                <p class="small">Все тарифы включают 14-дневный пробный период. Отмена в любой момент.</p>
            </div>
        </div>
    </section>
</template>

<script setup>
// Логика для переключения тарифов может быть добавлена здесь
</script>

<style scoped>
.pricing-section {
    padding: var(--space-2xl) 0;
    background: var(--bg-secondary);
}

.pricing-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    max-width: 1000px;
    margin: 0 auto;
}

.pricing-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    border: 2px solid var(--border-light);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.pricing-card.featured {
    border-color: var(--primary-500);
    transform: scale(1.05);
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-4px);
}

.pricing-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-500);
    color: var(--text-inverse);
    padding: var(--space-xs) var(--space-lg);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.pricing-card__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.pricing-card__price {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: var(--space-md) 0;
}

.pricing-card__period {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.pricing-features {
    flex-grow: 1;
    margin-bottom: var(--space-xl);
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
}

.pricing-feature__icon {
    color: var(--success-500);
    font-weight: bold;
}

.pricing-card__footer {
    margin-top: auto;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.pricing-info {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-light);
}

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

    .pricing-card.featured {
        transform: none;
    }

    .pricing-card.featured:hover {
        transform: translateY(-4px);
    }
}
</style>