import React, { useState } from 'react';
import { HelpCircle, ChevronDown, Sparkles } from 'lucide-react';

export const FAQSection: React.FC = () => {
  const [openIdx, setOpenIdx] = useState<number | null>(0);

  const faqs = [
    {
      q: 'آیا برای استفاده از هوش‌های مصنوعی در هوشان نیاز به فیلترشکن است؟',
      a: 'خیر، تمامی سرویس‌ها و دستیارهای هوشان مستقیماً روی سرورهای ابری امن فعال هستند و شما با اینترنت داخلی و بدون نیاز به هیچ‌گونه ابزار تغییر IP می‌توانید به کلیه مدل‌ها دسترسی داشته باشید.'
    },
    {
      q: 'کدام مدل‌های هوش مصنوعی در هوشان پشتیبانی می‌شوند؟',
      a: 'شما به پیشرفته‌ترین مدل‌های جهانی از جمله GPT-4o, GPT-4o Mini, O1, Claude 3.5 Sonnet, Gemini 2 Flash, DeepSeek Reasoner, Midjourney, Flux و ده‌ها دستیار تخصصی دسترسی دارید.'
    },
    {
      q: 'نحوه پرداخت و تمدید اشتراک چگونه است؟',
      a: 'پرداخت‌ها کاملاً به‌صورت ریالی و از طریق درگاه‌های امن بانکی کشور (شاپرک) انجام می‌شود و اشتراک‌ها بلافاصله پس از پرداخت فعال می‌گردند.'
    },
    {
      q: 'آیا امکان استفاده سازمانی و اتصال از طریق API وجود دارد؟',
      a: 'بله، هوشان دارای پنل و راهکارهای اختصاصی سازمانی همراه با API پرسرعت، توافق‌نامه سطح خدمات (SLA) و امکان تعریف تیم‌های کاری است.'
    }
  ];

  return (
    <section className="py-20 relative bg-slate-950/40">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div className="donya-section-header">
          <h2 className="donya-section-title">
            <HelpCircle className="w-7 h-7 text-cyan-400" />
            <span>سوالات متداول</span>
          </h2>
          <div className="donya-divider">
            <span className="donya-divider-line"></span>
            <span className="donya-divider-icon"></span>
            <span className="donya-divider-line"></span>
          </div>
          <p className="text-slate-400 text-sm sm:text-base max-w-2xl mx-auto mt-3">
            پاسخ به سوالات پرتکرار شما درباره نحوه کار، اشتراک‌ها و قابلیت‌های هوشان
          </p>
        </div>

        <div className="space-y-4">
          {faqs.map((item, idx) => {
            const isOpen = openIdx === idx;
            return (
              <div
                key={idx}
                className="glass-panel rounded-2xl overflow-hidden border border-white/5 transition-all duration-200"
              >
                <button
                  onClick={() => setOpenIdx(isOpen ? null : idx)}
                  className="w-full p-5 text-right flex items-center justify-between gap-4 font-bold text-white hover:text-cyan-300 transition-colors"
                >
                  <span className="text-sm sm:text-base">{item.q}</span>
                  <ChevronDown className={`w-5 h-5 text-cyan-400 transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`} />
                </button>

                {isOpen && (
                  <div className="px-5 pb-5 text-xs sm:text-sm text-slate-300 leading-relaxed border-t border-white/5 pt-4">
                    {item.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>

      </div>
    </section>
  );
};
