src/components/FAQ.tsx

import React, { useState } from 'react';

const FAQ: React.FC = () => {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const toggleFAQ = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  const faqs = [
    {
      question: "Нужен ли опыт работы с ИИ?",
      answer: "Нет, абсолютно. Наши курсы рассчитаны на полных новичков. Мы начинаем с самых основ и пошагово ведём вас к уверенному использованию нейросетей."
    },
    {
      question: "Сколько времени занимает обучение?",
      answer: "Бесплатное занятие - 2 часа. Недельный интенсив - 7 дней по 1.5-2 часа ежедневно. Курс автоматизации - 2-3 недели с гибким графиком."
    },
    {
      question: "Подходит ли курс для бизнеса?",
      answer: "Да! Курс «Автоматизация с ИИ» создан специально для предпринимателей. Мы проведём аудит ваших процессов и внедрим ИИ-решения под ваш бизнес."
    },
    {
      question: "Есть ли поддержка после курса?",
      answer: "Конечно! Все выпускники получают доступ к закрытому сообществу с актуальными обновлениями, новыми инструментами и помощью кураторов."
    }
  ];

  return (
    <section id="faq">
      <div className="section-container animate-on-scroll">
        <div style={{ textAlign: 'center' }}>
          <div className="section-label" style={{ justifyContent: 'center' }}>Вопросы и ответы</div>
          <div className="section-title">Часто задаваемые<br/>вопросы</div>
        </div>

        <div className="faq-grid">
          {faqs.map((faq, index) => (
            <div 
              key={index} 
              className={`faq-item ${openIndex === index ? 'open' : ''}`}
              onClick={() => toggleFAQ(index)}
            >
              <div className="faq-question">
                {faq.question}
                <div className="faq-toggle">+</div>
              </div>
              <div className="faq-answer">
                <p>{faq.answer}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default FAQ;