import Script from "next/script";
import { FaChevronDown } from "react-icons/fa";

const faqs = [
  {
    question: "What is Rajvi Social Welfare Trust?",
    answer:
      "Rajvi Social Welfare Trust is a non-profit organization working in education support, healthcare awareness, women empowerment, youth development, environmental awareness and community welfare initiatives across India.",
  },
  {
    question: "How can I donate to Rajvi Social Welfare Trust?",
    answer:
      "You can donate through our Donate Now page and support education, healthcare, women empowerment and welfare programs that directly benefit communities.",
  },
  {
    question: "How can I become a volunteer?",
    answer:
      "You can register through our volunteer registration portal and participate in social welfare, awareness campaigns and community development activities.",
  },
  {
    question: "Which areas does the Trust serve?",
    answer:
      "Rajvi Social Welfare Trust works across India with a focus on underserved communities, youth development, education support and social welfare programs.",
  },
  {
    question: "What programs does Rajvi Social Welfare Trust run?",
    answer:
      "The Trust runs Education Support, Healthcare Services, Women Empowerment, Youth Development, Environmental Awareness and Community Welfare programs.",
  },
  {
    question: "How does the Trust ensure transparency?",
    answer:
      "The Trust follows responsible operations, proper documentation and transparent reporting of welfare activities and community programs.",
  },
];

export default function FAQ() {
  const faqSchema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: faqs.map((faq) => ({
      "@type": "Question",
      name: faq.question,
      acceptedAnswer: {
        "@type": "Answer",
        text: faq.answer,
      },
    })),
  };

  return (
    <>
      <Script
        id="faq-schema"
        type="application/ld+json"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(faqSchema),
        }}
      />

      <section className="relative overflow-hidden bg-white py-14 sm:py-16 lg:py-24">
        <div className="absolute left-0 top-0 h-72 w-72 rounded-full bg-amber-400/10 blur-3xl" />

        <div className="relative z-10 mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <span className="inline-flex rounded-full bg-amber-50 px-4 py-2 text-[11px] font-bold uppercase tracking-widest text-amber-600 sm:text-xs">
              Frequently Asked Questions
            </span>

            <h2 className="mt-4 text-3xl font-extrabold leading-tight text-slate-950 sm:text-4xl lg:text-5xl">
              FAQs About Rajvi Social Welfare Trust
            </h2>

            <p className="mt-4 text-sm leading-7 text-slate-600 sm:text-base sm:leading-8">
              Find answers to common questions about our NGO, community welfare
              initiatives, volunteer opportunities and donation programs.
            </p>
          </div>

          <div className="mt-10 space-y-4">
            {faqs.map((faq, index) => (
              <details
                key={index}
                className="group rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:shadow-md"
              >
                <summary className="flex cursor-pointer list-none items-center justify-between gap-4">
                  <h3 className="text-left text-base font-bold text-slate-950 sm:text-lg">
                    {faq.question}
                  </h3>

                  <FaChevronDown className="shrink-0 text-slate-500 transition group-open:rotate-180" />
                </summary>

                <p className="mt-4 text-sm leading-7 text-slate-600 sm:text-base">
                  {faq.answer}
                </p>
              </details>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}