import type { ServicePageContent } from "@/lib/site-content";

/** "Perguntas frequentes" do serviço. Sem perguntas, a seção não aparece. */
export function ServiceFaq({ faq }: { faq: ServicePageContent["faq"] }) {
  if (!faq || faq.length === 0) return null;

  return (
    <section className="ds-section">
      <div className="ds-section-shell">
        <div className="ds-section-header">
          <div className="ds-section-meta">
            <p className="ds-eyebrow">Dúvidas comuns</p>
            <h2 className="ds-section-title">Perguntas frequentes</h2>
            <p className="ds-section-description">
              Respostas diretas às perguntas que costumam aparecer antes de cada
              projeto começar.
            </p>
          </div>
        </div>

        <div className="ds-grid-2">
          {faq.map((item) => (
            <article key={item.question} className="ds-card">
              <h3 className="ds-card-title">{item.question}</h3>
              <p className="ds-copy">{item.answer}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}