<!-- components/pricing/FAQSection.vue -->
<template>
  <section class="faq-section">
    <div class="container">
      <div class="faq-header">
        <h2 class="h2 text-center">Часто задаваемые вопросы</h2>
      </div>
      
      <div class="faq-grid">
        <div class="faq-item">
          <h4 class="h4">Можно ли изменить тариф позже?</h4>
          <p>Да, вы можете перейти на другой тариф в любой момент. Изменения вступят в силу со следующего платежного периода.</p>
        </div>
        
        <div class="faq-item">
          <h4 class="h4">Что входит в пробный период?</h4>
          <p>14-дневный пробный период включает полный доступ ко всем функциям выбранного тарифа. Никаких платежей не требуется.</p>
        </div>
        
        <div class="faq-item">
          <h4 class="h4">Есть ли ограничения по трафику?</h4>
          <p>Нет, все тарифы включают неограниченный трафик. Мы обеспечиваем стабильную работу ваших сайтов при любой нагрузке.</p>
        </div>
        
        <div class="faq-item">
          <h4 class="h4">Предоставляете ли вы домены?</h4>
          <p>Да, мы можем помочь с регистрацией домена или подключением существующего. Домены оплачиваются отдельно.</p>
        </div>
        
        <div class="faq-item">
          <h4 class="h4">Как происходит перенос существующих сайтов?</h4>
          <p>Наша команда поможет бесплатно перенести ваши существующие сайты и данные на нашу платформу.</p>
        </div>
        
        <div class="faq-item">
          <h4 class="h4">Есть ли скидки при годовой оплате?</h4>
          <p>Да, при годовой оплате мы предоставляем скидку 20% на любой тариф.</p>
        </div>
      </div>
    </div>
  </section>
</template>

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

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

.faq-header {
  margin-bottom: var(--space-2xl);
}

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

.faq-item {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

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

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

@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}
</style>