'use client';

import React, { useState } from 'react';
import { ChevronDown } from 'lucide-react';

export default function FaqSection() {
  const [openIdx, setOpenIdx] = useState<number | null>(0);

  const faqs = [
    {
      q: 'Do I need a Meta WhatsApp Business API account?',
      a: 'You can connect an existing WhatsApp Business API account or use our built-in Cloud API integration. You can also test immediately with our built-in simulator sandbox.',
    },
    {
      q: 'Which payment methods are supported out of the box?',
      a: 'We natively support EcoCash (USD & ZWL USSD Direct Push), Paynow Zimbabwe (Visa, Mastercard, InnBucks, ZimSwitch), Stripe, and manual Cash on Delivery with invoice receipts.',
    },
    {
      q: 'How does Meta Catalog synchronization work?',
      a: 'Link your Meta Business catalog ID in your integration settings, and any product changes or inventory updates sync automatically to your WhatsApp catalog.',
    },
    {
      q: 'Can multiple team members respond to customer messages at the same time?',
      a: 'Yes! Business and Enterprise plans include a Multi-Agent Unified Inbox so your support team can manage customer chat inquiries concurrently.',
    },
    {
      q: 'Can I upgrade, downgrade, or cancel my plan at any time?',
      a: 'Yes, you can switch between Monthly, Semi-Annual, and Annual billing cycles anytime from your account settings with zero cancellation penalties.',
    },
  ];

  return (
    <section id="faq" className="bg-[#FBFBFA] py-24 border-b border-slate-200/60">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div className="text-center mb-14 space-y-3">

          <h2 className="text-3xl sm:text-4xl font-black text-slate-900 tracking-tight font-sans">
            Frequently Asked Questions
          </h2>
          <p className="text-slate-600 text-sm">
            Everything you need to know about setting up your WhatsApp store.
          </p>
        </div>

        <div className="space-y-4">
          {faqs.map((faq, idx) => {
            const isOpen = openIdx === idx;
            return (
              <div 
                key={idx}
                className="bg-white rounded-2xl border border-slate-200/80 shadow-sm transition-all overflow-hidden"
              >
                <button
                  onClick={() => setOpenIdx(isOpen ? null : idx)}
                  className="w-full text-left p-6 flex items-center justify-between gap-4 font-bold text-slate-900 text-base sm:text-lg focus:outline-none"
                >
                  <span>{faq.q}</span>
                  <ChevronDown className={`w-5 h-5 text-slate-500 transition-transform duration-200 flex-shrink-0 ${isOpen ? 'rotate-180 text-emerald-600' : ''}`} />
                </button>

                {isOpen && (
                  <div className="px-6 pb-6 text-sm text-slate-600 leading-relaxed border-t border-slate-100 pt-4">
                    <p>{faq.a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>

      </div>
    </section>
  );
}