const faqs = [
  {
    question: "Why not just use Gmail filters?",
    answer: "Gmail filters need rules you write (sender, keywords). We read the email and put it in Lead, Client, or Noise — no rules."
  },
  {
    question: "What happens to my emails?",
    answer: "We only read headers and a short snippet to choose the label. We don't store your mail or use it for ads. Disconnect and we stop."
  },
  {
    question: "Can this mess up my inbox?",
    answer: "We only add labels or move to folders. We don't delete. Disconnect and nothing stays changed."
  },
  {
    question: "Do you need my password?",
    answer: "No. You sign in with Google or Microsoft. We never see or store your password. You can revoke access anytime."
  },
  {
    question: "What if I don't like it?",
    answer: "Cancel anytime. No contract. Your data is yours; disconnect and we stop. Free trial, no card."
  },
]

export function FAQ() {
  return (
    <section id="faq" className="py-24 bg-slate-50 dark:bg-slate-900">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-slate-100 mb-2">
            Questions we get a lot
          </h2>
          <p className="text-slate-600 dark:text-slate-400">
            Straight answers. No fluff.
          </p>
        </div>

        <div className="space-y-12">
          {faqs.map((faq, index) => (
            <div
              key={index}
              className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-10 items-baseline"
            >
              <p className="text-lg md:text-xl font-semibold text-slate-900 dark:text-slate-100">
                {faq.question}
              </p>
              <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
                {faq.answer}
              </p>
            </div>
          ))}
        </div>

        <p className="mt-10 text-center text-sm text-slate-600 dark:text-slate-400">
          Still unsure?{' '}
          <a
            href="mailto:support@mailflow.webklar.com"
            className="text-slate-700 dark:text-slate-300 hover:underline"
          >
            Email us — we reply fast
          </a>
          .
        </p>
      </div>
    </section>
  )
}
