"use client";
import { UI, type Lang } from "@/lib/config";

export default function HealthcareFAQ({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const isRTL = lang === "ar";

  const faqs = [
    { q: t.healthcareFAQQ1, a: t.healthcareFAQA1 },
    { q: t.healthcareFAQQ2, a: t.healthcareFAQA2 },
    { q: t.healthcareFAQQ3, a: t.healthcareFAQA3 },
    { q: t.healthcareFAQQ4, a: t.healthcareFAQA4 },
    { q: t.healthcareFAQQ5, a: t.healthcareFAQA5 },
  ];

  return (
    <section className="py-24 px-6 bg-white dark:bg-slate-950">
      <div className="max-w-4xl mx-auto">
        <div className={`mb-16 ${isRTL ? "text-right" : ""}`}>
          <div
            className={`flex items-center gap-4 mb-6 ${isRTL ? "flex-row-reverse" : ""}`}
          >
            <span className="text-brand-green font-mono text-sm">06</span>
            <div className="w-8 h-px bg-brand-green" />
            <span className="text-slate-500 dark:text-slate-400 text-sm uppercase tracking-widest">
              {isRTL ? "الأسئلة الشائعة" : "FAQ"}
            </span>
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-4">
            {t.healthcareFAQTitle}
          </h2>
        </div>

        <div className="space-y-4">
          {faqs.map((faq, i) => (
            <details
              key={i}
              className="group border border-slate-200 dark:border-slate-800"
            >
              <summary
                className={`flex items-center justify-between p-6 cursor-pointer list-none ${isRTL ? "flex-row-reverse" : ""}`}
              >
                <h3
                  className={`font-semibold text-slate-900 dark:text-white group-hover:text-brand-green transition-colors ${isRTL ? "text-right pl-4" : "pr-4"}`}
                >
                  {faq.q}
                </h3>
                <span className="text-brand-green transform transition-transform group-open:rotate-45 flex-shrink-0 text-2xl">
                  +
                </span>
              </summary>
              <div className={`px-6 pb-6 ${isRTL ? "text-right" : ""}`}>
                <p className="text-slate-600 dark:text-slate-400 leading-relaxed">
                  {faq.a}
                </p>
              </div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}