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

interface FaqItem {
  question: string;
  answer: string;
}

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

  const faqs: FaqItem[] = [
    {
      question: 'تحویل سرویس WireGuard چگونه انجام می‌شود؟',
      answer: 'فعلاً تمرکز ZaccShop روی سرویس‌های WireGuard است. پس از ثبت و تأیید سفارش، کانفیگ برای یک کاربر از طریق ایمیل یا پشتیبانی تلگرام تحویل می‌شود.',
    },
    {
      question: 'هر سرویس برای چند کاربر است؟',
      answer: 'هر پلن فعلی فقط برای یک کاربر است و حجم و مدت اعتبار آن در صفحه محصول مشخص می‌شود.',
    },
    {
      question: 'سرویس کاهش پینگ WireGuard روی چه دستگاه‌هایی کار می‌کند؟',
      answer: 'WireGuard روی سیستم‌ها و دستگاه‌هایی که از کلاینت WireGuard پشتیبانی می‌کنند قابل استفاده است. آموزش اتصال و فایل کانفیگ هنگام تحویل در اختیار شما قرار می‌گیرد.',
    },
    {
      question: 'چگونه می‌توانم وضعیت سفارش و کانفیگ خود را پیگیری کنم؟',
      answer: 'شما می‌توانید با ورود به حساب کاربری یا بخش پیگیری سفارش، شماره سفارش خود را وارد کنید و وضعیت پردازش و تحویل کانفیگ را ببینید.',
    },
    {
      question: 'روش‌های پرداخت فروشگاه چیست؟',
      answer: 'پرداخت فروشگاه از طریق درگاه آنلاین زرین‌پال انجام خواهد شد. پس از تأیید تراکنش، سفارش در سیستم ثبت می‌شود و تحویل کانفیگ WireGuard طبق روند سفارش انجام خواهد شد.',
    },
  ];

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

  return (
    <section className="py-16 relative">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-right">
        
        <div className="text-center mb-10">
          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-purple-950/70 border border-purple-500/30 text-purple-300 text-xs font-bold mb-3">
            <HelpCircle className="w-3.5 h-3.5 text-purple-400" />
            <span>پاسخ به پرسش‌ها</span>
          </div>
          <h2 className="text-2xl sm:text-3xl font-black text-white">
            سوالات متداول کاربران
          </h2>
          <p className="text-sm text-zinc-400 mt-2 font-light">
            اگر سوال دیگری دارید، پشتیبانی ۲۴ ساعته زاناشاپ آماده پاسخگویی به شماست.
          </p>
        </div>

        <div className="space-y-3">
          {faqs.map((faq, index) => {
            const isOpen = openIndex === index;
            return (
              <div
                key={index}
                className={`bento-card overflow-hidden transition-all duration-200 ${
                  isOpen ? '!border-purple-500/50 !bg-[#13101c]' : ''
                }`}
              >
                <button
                  onClick={() => toggleFaq(index)}
                  className="w-full p-4 sm:p-5 text-right flex items-center justify-between gap-4 text-zinc-100 hover:text-purple-300 font-bold text-sm sm:text-base transition-colors cursor-pointer"
                >
                  <span>{faq.question}</span>
                  <ChevronDown
                    className={`w-5 h-5 text-purple-400 shrink-0 transition-transform duration-300 ${
                      isOpen ? 'rotate-180 text-purple-300' : ''
                    }`}
                  />
                </button>

                {isOpen && (
                  <div className="px-4 sm:px-5 pb-5 pt-1 text-xs sm:text-sm text-zinc-300 leading-relaxed border-t border-purple-500/15">
                    {faq.answer}
                  </div>
                )}
              </div>
            );
          })}
        </div>

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