> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pesaswap.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Faq

export default function PesaswapFAQ() {
  const [openIndex, setOpenIndex] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [activeCategory, setActiveCategory] = useState('all');
  const faqs = [{
    id: 1,
    question: "What is PesaSwap?",
    answer: "PesaSwap is an East African payment gateway that enables businesses to accept mobile money payments, send disbursements, and manage transactions across Kenya, Tanzania, and Uganda. Founded in 2014 and headquartered in Nairobi, PesaSwap connects your business to M-Pesa, Airtel Money, MTN Mobile Money, Choice Bank, and card payment networks through a single, easy-to-use API.",
    category: "general",
    tags: ["platform", "payments", "mobile money"],
    popular: true
  }, {
    id: 2,
    question: "What payment methods does PesaSwap support?",
    answer: "We support M-Pesa (Kenya), Airtel Money (Kenya, Tanzania, Uganda), MTN Mobile Money (Uganda), Choice Bank transfers and IMT (Kenya), and card payments via Visa and Mastercard.",
    category: "general",
    tags: ["payment methods", "mpesa", "airtel", "mtn", "cards"]
  }, {
    id: 3,
    question: "What currencies and countries are supported?",
    answer: "PesaSwap operates in Kenya, Tanzania, and Uganda, supporting KES (Kenyan Shilling), TZS (Tanzanian Shilling), and UGX (Ugandan Shilling).",
    category: "general",
    tags: ["currencies", "countries", "east africa"]
  }, {
    id: 4,
    question: "What can I do with PesaSwap?",
    answer: "You can accept payments, send disbursements, validate accounts, process refunds, check balances in real time, access transaction reports, and receive real-time updates via webhooks.",
    category: "features",
    tags: ["features", "payments", "disbursements"],
    popular: true
  }, {
    id: 5,
    question: "How do I integrate PesaSwap?",
    answer: "Sign up to get API credentials, test in the sandbox, configure webhooks, and switch to production when ready. Full API documentation is available at docs.pesaswap.io.",
    category: "integration",
    tags: ["integration", "api", "sandbox"]
  }, {
    id: 6,
    question: "Is PesaSwap secure?",
    answer: "Yes. We are PCI DSS Level 1 compliant with HTTPS/TLS encryption, field-level encryption for sensitive data, and webhook signature verification.",
    category: "general",
    tags: ["security", "pci", "encryption"]
  }, {
    id: 7,
    question: "Can I test before going live?",
    answer: "Yes. Our sandbox environment allows you to test collections, disbursements, refunds, and balance checks without using real money.",
    category: "integration",
    tags: ["testing", "sandbox"]
  }, {
    id: 8,
    question: "How much does PesaSwap cost?",
    answer: "We charge a transparent fee of 0.5%–1.5% per transaction depending on your business type. There are no setup fees, monthly fees, or hidden charges.",
    category: "general",
    tags: ["pricing", "fees"]
  }, {
    id: 9,
    question: "What about webhooks and callbacks?",
    answer: "We send real-time webhook notifications for all transaction events including payments, failures, payouts, and refunds, with automatic retries.",
    category: "integration",
    tags: ["webhooks", "callbacks", "events"]
  }, {
    id: 10,
    question: "How do disbursements (payouts) work?",
    answer: "You can send payouts via M-Pesa B2C (Kenya), Airtel Money (Kenya, Tanzania, Uganda), MTN Mobile Money (Uganda), and Choice Bank for transfers and IMT. All payouts are validated before processing.",
    category: "features",
    tags: ["payouts", "disbursements"]
  }, {
    id: 11,
    question: "Does PesaSwap have a dashboard?",
    answer: "Yes. The dashboard allows you to monitor transactions, view analytics, check balances, download reports, and manage API keys and team members.",
    category: "general",
    tags: ["dashboard", "analytics"]
  }, {
    id: 12,
    question: "Do you support refunds?",
    answer: "Yes. You can process full or partial refunds via the API or dashboard, with webhook notifications for every status update.",
    category: "features",
    tags: ["refunds", "transactions"]
  }, {
    id: 13,
    question: "Do you have a Postman collection?",
    answer: "Yes. We provide a ready-to-use Postman collection so you can test our APIs quickly. Import it, add your credentials, and start making requests.",
    category: "integration",
    tags: ["postman", "api", "testing"]
  }, {
    id: 14,
    question: "How do collections (accepting payments) work?",
    answer: "Customers receive a prompt (e.g., M-Pesa STK Push), enter their PIN, and the payment is processed instantly. You receive a webhook notification once completed.",
    category: "features",
    tags: ["collections", "payments"]
  }, {
    id: 15,
    question: "Can I validate a customer’s account before sending a payout?",
    answer: "Yes. Our Account Validation API allows you to verify customer details and KYC information before processing payouts.",
    category: "features",
    tags: ["validation", "kyc"]
  }, {
    id: 16,
    question: "Can I check my account balance via the API?",
    answer: "Yes. The Balance Enquiry API lets you check available funds across all payment channels in real time.",
    category: "features",
    tags: ["balance", "api"]
  }, {
    id: 17,
    question: "How do I track my transactions?",
    answer: "You can track transactions via API, dashboard, downloadable reports, and real-time webhook notifications.",
    category: "general",
    tags: ["tracking", "reports"]
  }, {
    id: 18,
    question: "What happens if a payment fails?",
    answer: "If a payment fails, the reason is returned in the API response and sent via webhook. You can retry or take action based on the error.",
    category: "general",
    tags: ["failures", "errors"]
  }, {
    id: 19,
    question: "Can I use PesaSwap for recurring payments?",
    answer: "Yes. We support mandate-based recurring payments for subscriptions, loan repayments, and scheduled billing.",
    category: "features",
    tags: ["recurring", "subscriptions"]
  }, {
    id: 20,
    question: "How do I get started?",
    answer: "Contact our sales team, get API credentials, test in sandbox, and go live. Support is available via dashboard and sales channels.",
    category: "general",
    tags: ["getting started", "onboarding"],
    popular: true
  }];
  const categories = [{
    id: 'all',
    name: 'All',
    count: faqs.length
  }, {
    id: 'general',
    name: 'General',
    count: faqs.filter(f => f.category === 'general').length
  }, {
    id: 'integration',
    name: 'Integration',
    count: faqs.filter(f => f.category === 'integration').length
  }];
  const filteredFaqs = faqs.filter(faq => {
    const matchesSearch = faq.question.toLowerCase().includes(searchTerm.toLowerCase()) || faq.answer.toLowerCase().includes(searchTerm.toLowerCase()) || faq.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
    const matchesCategory = activeCategory === 'all' || faq.category === activeCategory;
    return matchesSearch && matchesCategory;
  });
  const handleCategoryClick = categoryId => {
    setActiveCategory(categoryId);
  };
  const handleQuestionClick = questionId => {
    setOpenIndex(openIndex === questionId ? null : questionId);
  };
  const resetSearch = () => {
    setSearchTerm('');
    setActiveCategory('all');
  };
  return <div className="min-h-screen bg-background">
      <div className="max-w-6xl mx-auto px-6 py-12">
        
        <div className="mb-12 space-y-8">
          <div className="relative max-w-md mx-auto">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg className="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </div>
            {searchTerm && <button onClick={() => setSearchTerm('')} className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>}
            <input type="text" placeholder="Search FAQs..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="w-full pl-10 pr-9 py-2.5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-xl text-sm placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:border-emerald-500 dark:focus:border-emerald-400 focus:ring-2 focus:ring-emerald-200 dark:focus:ring-emerald-800 shadow-sm transition-all duration-200 hover:shadow-md" />
            {searchTerm && <div className="absolute top-full left-0 right-0 mt-1 text-xs text-gray-500 dark:text-gray-400 text-center">
                {filteredFaqs.length} result{filteredFaqs.length !== 1 ? 's' : ''}
              </div>}
          </div>

          <div className="flex flex-wrap justify-center gap-3">
            {categories.map(category => {
    const isActive = activeCategory === category.id;
    return <button key={category.id} onClick={() => handleCategoryClick(category.id)} className={`px-6 py-3 rounded-xl text-sm font-semibold transition-all duration-200 ${isActive ? 'bg-emerald-600 text-white shadow-lg' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}>
                  {category.name} ({category.count})
                </button>;
  })}
          </div>
        </div>

        <div>
          <div className="flex items-center justify-between mb-8">
            <h2 className="text-3xl font-bold text-gray-900 dark:text-white">
              {searchTerm ? 'Search Results' : 'All Questions'}
            </h2>
            <div className="px-4 py-2 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300 rounded-xl text-sm font-medium">
              {filteredFaqs.length} questions
            </div>
          </div>

          {filteredFaqs.length > 0 ? <div className="space-y-4">
              {filteredFaqs.map(faq => {
    const isOpen = openIndex === faq.id;
    return <div key={faq.id} className={`bg-white dark:bg-gray-800 border rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-lg ${isOpen ? 'border-emerald-600 dark:border-emerald-500' : 'border-gray-200 dark:border-gray-700'}`}>
                    <button onClick={() => handleQuestionClick(faq.id)} className="w-full p-4 text-left flex items-center justify-between gap-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="font-semibold text-gray-900 dark:text-white text-base">{faq.question}</h3>
                          {faq.popular && <span className="px-2 py-0.5 bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 rounded-full text-xs font-semibold">
                              Popular
                            </span>}
                        </div>
                        <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium capitalize">
                          {faq.category}
                        </span>
                      </div>
                      <svg className={`w-5 h-5 text-gray-400 transition-all duration-300 ${isOpen ? 'rotate-180 text-emerald-600' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                      </svg>
                    </button>
                    
                    {isOpen && <div className="px-4 pb-4">
                        <div className="border-t border-gray-100 dark:border-gray-700 pt-4">
                          <p className="text-gray-600 dark:text-gray-300 mb-4 text-sm">{faq.answer}</p>
                          <div className="flex flex-wrap gap-1.5">
                            {faq.tags.map((tag, index) => <span key={index} className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg text-xs font-medium hover:bg-emerald-50 dark:hover:bg-emerald-900/20 hover:text-emerald-700 dark:hover:text-emerald-300 cursor-pointer">
                                #{tag}
                              </span>)}
                          </div>
                        </div>
                      </div>}
                  </div>;
  })}
            </div> : <div className="text-center py-16">
              <div className="w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg className="w-10 h-10 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </div>
              <h3 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">No results found</h3>
              <p className="text-gray-600 dark:text-gray-400 mb-8 text-lg">
                Try adjusting your search or browse all questions.
              </p>
              <button onClick={resetSearch} className="px-8 py-4 bg-emerald-600 text-white rounded-xl font-semibold hover:bg-emerald-700 transition-colors">
                Show all questions
              </button>
            </div>}
        </div>
      </div>
    </div>;
}