'use client'

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

const faqs = [
  {
    question: 'What is AI Ally?',
    answer: 'AI Ally is your personal AI assistant that helps you with various tasks, from writing and analysis to problem-solving and creative work. It uses advanced artificial intelligence to provide intelligent, contextual responses to your needs.',
  },
  {
    question: 'How does the pricing work?',
    answer: 'We offer three tiers: Basic (free), Pro ($15/month), and Enterprise ($49/month). Each tier comes with different features and usage limits. You can start with our free tier and upgrade anytime as your needs grow.',
  },
  {
    question: 'Can I use AI Ally on mobile devices?',
    answer: 'Yes! AI Ally is available on both iOS and Android devices. Our mobile app provides the same powerful features as the desktop version, allowing you to work with your AI assistant anywhere.',
  },
  {
    question: 'Is my data secure?',
    answer: 'Absolutely. We take security seriously and employ industry-standard encryption for all data transmission and storage. Enterprise users get additional security features like SSO and custom data retention policies.',
  },
  {
    question: 'Do you offer a free trial?',
    answer: 'Yes, we offer a 14-day free trial of our Pro tier, allowing you to experience all the advanced features before making a decision. No credit card required to start.',
  },
  {
    question: 'What kind of support do you offer?',
    answer: 'All users get access to our email support. Pro users receive priority support with faster response times, while Enterprise users get a dedicated account manager and SLA guarantees.',
  },
]

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

  return (
    <div id="faq" className="py-24 sm:py-32 scroll-mt-20">
      <div className="container">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-base font-semibold leading-7 text-primary">FAQ</h2>
          <p className="mt-2 text-3xl font-bold tracking-tight text-dark-foreground sm:text-4xl">
            Frequently asked questions
          </p>
          <p className="mt-6 text-lg leading-8 text-dark-muted">
            Have a different question? Reach out to our support team.
          </p>
        </div>
        <div className="mx-auto mt-16 max-w-2xl divide-y divide-dark-muted/10">
          {faqs.map((faq, index) => (
            <div key={faq.question} className="py-6">
              <button
                className="flex w-full items-start justify-between text-left"
                onClick={() => setOpenIndex(openIndex === index ? null : index)}
              >
                <span className="text-base font-semibold leading-7 text-dark-foreground">{faq.question}</span>
                <span className="ml-6 flex h-7 items-center">
                  <ChevronDown
                    className={"h-6 w-6 text-dark-muted transition-transform " + 
                      (openIndex === index ? "rotate-180" : "")}
                    aria-hidden="true"
                  />
                </span>
              </button>
              {openIndex === index && (
                <div className="mt-2 pr-12">
                  <p className="text-base leading-7 text-dark-muted">{faq.answer}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}