// components/pricing/FAQ.tsx
export default function FAQ() {
  const faqs = [
    {
      q: "Do I need to sign a long contract?",
      a: "No. Plans are month-to-month with a 30-day cancel. We also provide an exit plan and documentation.",
    },
    {
      q: "What happens if you miss an SLA?",
      a: "We apply incident credits on your next invoice. Credits scale with the breach severity.",
    },
    {
      q: "Are you GDPR compliant?",
      a: "Yes. We sign a DPA, use least-privilege access, and keep an audit log. We provide cookie and privacy pages.",
    },
    {
      q: "Can you help outside business hours?",
      a: "Mission-Critical includes 24/7 paging. You can also request ad-hoc after-hours support when needed.",
    },
  ];

  return (
    <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
      <h2 className="text-xl font-semibold">Pricing FAQs</h2>
      <dl className="mt-6 space-y-6">
        {faqs.map((item) => (
          <div key={item.q}>
            <dt className="text-sm font-medium text-gray-900">{item.q}</dt>
            <dd className="mt-2 text-sm text-gray-700">{item.a}</dd>
          </div>
        ))}
      </dl>
    </div>
  );
}