import { FAQJsonLd } from "@/components/seo/FAQJsonLd";
import { faqs } from "@/lib/mock-data";

const testRideFaqs = [
  ...faqs.filter((faq) => faq.category === "Test Ride"),
  {
    id: "faq-test-ride-free",
    question: "Is the test ride free?",
    answer: "Yes. Test rides at Bashista Auto are free and arranged after branch confirmation.",
    category: "Test Ride",
  },
  {
    id: "faq-more-than-one-model",
    question: "Can I test more than one model?",
    answer: "Yes, subject to availability at your selected branch and time slot.",
    category: "Test Ride",
  },
];

export function TestRideFAQ() {
  return (
    <section className="bg-white pb-10 pt-2">
      <FAQJsonLd faqs={testRideFaqs} />
      <div className="container-custom">
        <div className="soft-card p-6">
          <h2 className="text-xl font-bold text-navy-deep">
            Frequently Asked Questions
          </h2>
          <div className="mt-4 space-y-3">
            {testRideFaqs.map((faq) => (
              <details className="rounded-xl border border-border bg-white px-4 py-3" key={faq.id}>
                <summary className="cursor-pointer text-sm font-bold text-navy-deep">
                  {faq.question}
                </summary>
                <p className="mt-3 text-sm leading-6 text-navy-muted">{faq.answer}</p>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}