FAQ Section

'use client'
import { useState } from 'react'
import { ChevronDown } from 'lucide-react'

// Add or edit your FAQ items here
const FAQS = [
  { question: 'What is your refund policy?', answer: 'We offer a 30-day money-back guarantee on all paid plans. If you are not satisfied, contact support within 30 days of your purchase for a full refund, no questions asked.' },
  { question: 'Do you offer a free trial?', answer: 'Yes, every plan includes a 14-day free trial with full access to all features. No credit card is required to get started.' },
  { question: 'Can I cancel anytime?', answer: 'Absolutely. You can cancel your subscription at any time from your account settings. You will keep access until the end of your current billing period.' },
  { question: 'Do you offer discounts for annual billing?', answer: 'Yes, switching to annual billing saves you up to 20% compared to paying monthly. You can switch plans anytime from your billing dashboard.' },
  { question: 'Is my data secure?', answer: 'We use industry-standard encryption both in transit and at rest, and run regular security audits to keep your data safe.' },
  { question: 'What payment methods do you accept?', answer: 'We accept all major credit cards, as well as payment via PayPal. Enterprise customers can also pay by invoice.' },
]

export default function MinimalFaq() {
  const [openIndex, setOpenIndex] = useState(null)

  return (
    <div className="w-full">
      <div className="flex flex-col gap-3">
        {FAQS.map((item, index) => {
          const isOpen = openIndex === index
          return (
            <div
              key={item.question}
              className="rounded-2xl border border-[#E5E5E5] dark:border-[#3A3A3A] bg-white/70 dark:bg-[#161616]/70 backdrop-blur-xl overflow-hidden">
              <button
                onClick={() => setOpenIndex(isOpen ? null : index)}
                className="w-full flex items-center justify-between gap-4 px-6 py-5 text-left cursor-pointer">
                <span className="text-[15px] font-medium tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7]">
                  {item.question}
                </span>
                <ChevronDown
                  size={18}
                  className={`shrink-0 text-[#6e6e73] dark:text-[#a1a1a6] transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`}
                />
              </button>
              <div className={`grid transition-all duration-300 ease-in-out ${isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'}`}>
                <div className="overflow-hidden">
                  <p className="px-6 pb-5 text-[13px] leading-relaxed text-[#6e6e73] dark:text-[#a1a1a6]">
                    {item.answer}
                  </p>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

'use client'
import { useState } from 'react'
import { Plus } from 'lucide-react'

// Add or edit your FAQ items here
const FAQS = [
  { question: 'How do I get started?', answer: 'Simply create an account and follow the onboarding steps. You will be up and running in a few minutes.' },
  { question: 'Can I upgrade or downgrade my plan later?', answer: 'Yes, you can change your plan at any time from your account settings. Changes take effect immediately, and billing is prorated.' },
  { question: 'Do you offer customer support?', answer: 'Yes, our support team is available via email and live chat during business hours, with priority support for Pro and Enterprise customers.' },
  { question: 'Is there a limit to how many team members I can add?', answer: 'Team limits depend on your plan. Starter supports up to 3 members, while Pro and Enterprise offer unlimited seats.' },
  { question: 'Can I export my data?', answer: 'Yes, you can export all your data at any time in CSV or JSON format from your account settings.' },
]

export default function SimpleFaq() {
  const [openIndexes, setOpenIndexes] = useState(new Set([0]))

  const toggle = (index) => {
    setOpenIndexes((prev) => {
      const next = new Set(prev)
      if (next.has(index)) {
        next.delete(index)
      } else {
        next.add(index)
      }
      return next
    })
  }

  return (
    <div className="w-full">
      <div className="flex flex-col divide-y divide-[#E5E5E5] dark:divide-[#3A3A3A]">
        {FAQS.map((item, index) => {
          const isOpen = openIndexes.has(index)
          return (
            <div key={item.question} className="py-5">
              <button
                onClick={() => toggle(index)}
                className="w-full flex items-center justify-between gap-4 text-left cursor-pointer">
                <span className="text-[15px] font-medium tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7]">
                  {item.question}
                </span>
                <Plus
                  size={16}
                  className={`shrink-0 text-[#6e6e73] dark:text-[#a1a1a6] transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`}
                />
              </button>
              <div className={`grid transition-all duration-300 ease-in-out ${isOpen ? 'grid-rows-[1fr] opacity-100 mt-3' : 'grid-rows-[0fr] opacity-0'}`}>
                <div className="overflow-hidden">
                  <p className="text-[13px] leading-relaxed text-[#6e6e73] dark:text-[#a1a1a6] pr-8">
                    {item.answer}
                  </p>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}