'use client'

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

const faqs = [
  {
    question: 'How do I get started?',
    answer: 'Sign up for a free account and follow our quick setup guide. You can be up and running in minutes.',
  },
  {
    question: 'Is my data secure?',
    answer: 'Yes, we use bank-grade encryption to protect all your data. Your security is our top priority.',
  },
  {
    question: 'Do you offer customer support?',
    answer: '24/7 support is available for all customers. Reach out via email, chat, or phone.',
  },
  {
    question: 'Can I cancel anytime?',
    answer: 'Yes, you can cancel your subscription at any time. No long-term contracts required.',
  },
]

export function FAQ() {
  const [openIndex, setOpenIndex] = useState<number | null>(null)

  return (
    <section className="py-24 sm:py-32 bg-gray-50">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-3xl font-bold tracking-tight text-[#333333] sm:text-4xl">
            Frequently asked questions
          </h2>
        </div>
        <div className="mx-auto mt-16 max-w-2xl">
          <dl className="space-y-8">
            {faqs.map((faq, index) => (
              <div
                key={faq.question}
                className="rounded-2xl bg-white p-6"
              >
                <dt>
                  <button
                    className="flex w-full items-start justify-between text-left"
                    onClick={() => setOpenIndex(openIndex === index ? null : index)}
                  >
                    <span className="text-base font-semibold text-[#333333]">
                      {faq.question}
                    </span>
                    <span className="ml-6 flex h-7 items-center">
                      <ChevronDown
                        className={`h-6 w-6 transform text-gray-700 transition-transform duration-200 ${
                          openIndex === index ? 'rotate-180' : ''
                        }`}
                      />
                    </span>
                  </button>
                </dt>
                {openIndex === index && (
                  <dd className="mt-4 text-base text-gray-600">
                    {faq.answer}
                  </dd>
                )}
              </div>
            ))}
          </dl>
        </div>
      </div>
    </section>
  )
}