"use client";

interface PricingFAQProps {
  isAr: boolean;
}

const FAQ_ITEMS = [
  {
    qEn: "Can I cancel anytime?",
    qAr: "هل يمكنني الإلغاء في أي وقت؟",
    aEn: "Yes, you can cancel your subscription at any time. No hidden fees or penalties.",
    aAr: "نعم، يمكنك إلغاء اشتراكك في أي وقت. لا توجد رسوم مخفية أو غرامات.",
  },
  {
    qEn: "Is the 14-day trial really free?",
    qAr: "هل التجربة المجانية لمدة 14 يوماً مجانية حقاً؟",
    aEn: "Absolutely! No credit card required. Full access to all features during the trial.",
    aAr: "بالتأكيد! لا حاجة لبطاقة ائتمان. وصول كامل لجميع المزايا خلال التجربة.",
  },
  {
    qEn: "Can I upgrade or downgrade later?",
    qAr: "هل يمكنني الترقية أو التخفيض لاحقاً؟",
    aEn: "Yes, you can change your plan at any time. Changes take effect immediately.",
    aAr: "نعم، يمكنك تغيير خطتك في أي وقت. تسري التغييرات فوراً.",
  },
  {
    qEn: "What payment methods do you accept?",
    qAr: "ما هي طرق الدفع المقبولة؟",
    aEn: "We accept all major credit cards, bank transfers, and digital wallets.",
    aAr: "نقبل جميع بطاقات الائتمان الرئيسية، التحويلات البنكية، والمحافظ الرقمية.",
  },
];

export default function PricingFAQ({ isAr }: PricingFAQProps) {
  return (
    <section className="max-w-5xl mx-auto px-4 pb-20">
      <h2 className="text-3xl font-bold text-center mb-12 text-brand-ink dark:text-white">
        {isAr ? "الأسئلة الشائعة" : "Frequently Asked Questions"}
      </h2>
      <div className="grid md:grid-cols-2 gap-6">
        {FAQ_ITEMS.map((faq, idx) => (
          <div
            key={idx}
            className="bg-white dark:bg-slate-900 rounded-xl p-6 shadow-md border border-slate-200 dark:border-slate-700"
          >
            <h3 className="font-semibold text-lg text-brand-ink dark:text-white mb-2">
              {isAr ? faq.qAr : faq.qEn}
            </h3>
            <p className="text-neutral-600 dark:text-neutral-300">
              {isAr ? faq.aAr : faq.aEn}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}