import { Container } from "@/components/Container";
import { faqs } from "@/lib/data";

export function FaqPreview() {
  return (
    <section id="faq" className="pt-10">
      <Container>
        <h2 className="mb-4 text-[18px] font-bold text-navy">سوالات متداول</h2>
        <div className="space-y-3">
          {faqs.map((item) => (
            <details key={item.q} className="rounded-2xl bg-white px-5 py-4">
              <summary className="cursor-pointer list-none text-[14px] font-bold text-navy">
                {item.q}
              </summary>
              <p className="mt-3 text-[13px] leading-7 text-muted">{item.a}</p>
            </details>
          ))}
        </div>
      </Container>
    </section>
  );
}