const faqItems = [
  {
    question: "What is SIP?",
    answer:
      "A SIP (Systematic Investment Plan) invests a fixed amount at regular intervals to build long-term wealth steadily.",
  },
  {
    question: "How does SAP One Fortune work?",
    answer:
      "We provide strategy-driven investing with broker-linked execution so you stay in control of your funds.",
  },
  {
    question: "How do I create an account?",
    answer: "Use your email and password on the Sign Up screen.",
  },
  {
    question: "How do I connect my broker?",
    answer:
      "Open the broker connection dialog, enter your API key/secret, and complete the login flow.",
  },
  {
    question: "Do you hold my funds?",
    answer:
      "No. Your money stays with your broker. We never touch or custody your funds.",
  },
  {
    question: "Can I pause or stop a strategy?",
    answer: "Yes. You can pause or stop strategies anytime from the Strategies page.",
  },
  {
    question: "When will my SIP execute?",
    answer:
      "SIPs execute based on the schedule you set, aligned with market hours.",
  },
  {
    question: "What brokers are supported?",
    answer:
      "Zerodha and Groww are supported now. Additional brokers will be available soon.",
  },
  {
    question: "Is my data secure?",
    answer:
      "We follow industry best practices for security and compliance.",
  },
  {
    question: "How do I get help?",
    answer: "Use the contact options on the site or email support.",
  },
];

export default function FAQSection() {
  return (
    <section className="py-28 px-6 bg-card/20" data-testid="section-faq">
      <div className="max-w-5xl mx-auto">
        <div className="text-center mb-14">
          <p className="text-sm uppercase tracking-widest text-muted-foreground mb-4">
            Common Questions
          </p>
          <h2 className="text-4xl md:text-5xl font-bold mb-4">FAQ</h2>
          <p className="text-lg text-muted-foreground">
            Quick answers to the most common questions.
          </p>
        </div>

        <div className="grid gap-6 md:grid-cols-2">
          {faqItems.map((item) => (
            <div
              key={item.question}
              className="rounded-2xl border border-card-border bg-card/60 p-6 shadow-sm"
            >
              <h3 className="text-lg font-semibold mb-2">{item.question}</h3>
              <p className="text-sm text-muted-foreground leading-relaxed">
                {item.answer}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
