ESIM/EsimLao/esim-vite/src/pages/home/components/HomeFaq.tsx

import React, { useState, useEffect, useCallback } from "react";

const HomeFaq = () => {
  const [openFaqIndex, setOpenFaqIndex] = useState<number | null>(0);

  const faqs = [
    {
      question:
        "1. Does using an eSIM/ SIM incur any additional fees or services?",
      answer:
        "No. The price shown in the order already includes all costs, and no additional fees will arise during usage.",
    },
    {
      question: "2. I received the email but there is no QR code.",
      answer:
        "Please check your spam or junk folder first. If it's not there, contact our support team via Zalo OA or WhatsApp with your order ID, and we will assist you in resending the QR code manually.",
    },
    {
      question: "3. I lost my SIM while traveling abroad. Can it be reissued?",
      answer:
        "For eSIMs, we can easily resend the digital profile to your registered email. For physical SIMs, reissuance while abroad may be difficult due to shipping; we recommend switching to an eSIM if your device supports it.",
    },
  ];

  const toggleFaq = (index: number) => {
    setOpenFaqIndex(openFaqIndex === index ? null : index);
  };

  return (
    <>
      <section className="py-16 md:py-24 bg-white px-4 border-t border-slate-50">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12 md:mb-20">
            <h2 className="text-3xl md:text-6xl font-black tracking-tight text-[#EE0434] mb-4">
              Frequently <span className="text-slate-900">Asked Questions</span>
            </h2>
            <p className="text-slate-500 text-sm md:text-xl font-medium">
              We are always here to support you.
            </p>
          </div>

          <div className="space-y-4">
            {faqs.map((faq, index) => (
              <div key={index} className="border-b border-slate-100">
                <button
                  onClick={() => toggleFaq(index)}
                  className="w-full flex justify-between items-center py-6 text-left group transition-all"
                >
                  <span
                    className={`text-base md:text-2xl font-black transition-colors ${
                      openFaqIndex === index
                        ? "text-[#EE0434]"
                        : "text-slate-800 group-hover:text-[#EE0434]"
                    }`}
                  >
                    {faq.question}
                  </span>
                  <div
                    className={`shrink-0 w-6 h-6 md:w-8 md:h-8 flex items-center justify-center transition-all duration-500 ${
                      openFaqIndex === index
                        ? "text-[#EE0434] rotate-180"
                        : "text-slate-300"
                    }`}
                  >
                    <svg
                      className="w-5 h-5 md:w-7 md:h-7"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={3}
                        d="M19 9l-7 7-7-7"
                      />
                    </svg>
                  </div>
                </button>
                <div
                  className={`grid transition-all duration-500 ease-in-out ${
                    openFaqIndex === index
                      ? "grid-rows-[1fr] opacity-100"
                      : "grid-rows-[0fr] opacity-0"
                  }`}
                >
                  <div className="overflow-hidden">
                    <p className="text-slate-600 text-sm md:text-xl leading-relaxed font-medium pb-8">
                      {faq.answer}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

export default HomeFaq;