import { useState } from 'react'
import { ChevronDown, HelpCircle } from 'lucide-react'
import { cn } from '@/lib/utils'

const faqs = [
  {
    question: "Are my emails secure?",
    answer: "Yes! We use OAuth – we never see your password. Content is only analyzed briefly, never stored."
  },
  {
    question: "Which email providers work?",
    answer: "Gmail and Outlook. More coming soon."
  },
  {
    question: "Can I create custom rules?",
    answer: "Absolutely! You can set VIP contacts and define custom categories."
  },
  {
    question: "What about old emails?",
    answer: "The last 30 days are analyzed. You decide if they should be sorted too."
  },
  {
    question: "Can I cancel anytime?",
    answer: "Yes, with one click. No tricks, no long commitments."
  },
  {
    question: "Do I need a credit card?",
    answer: "No, the 14-day trial is completely free."
  },
  {
    question: "Does it work on mobile?",
    answer: "Yes! Sorting runs on our servers – works in any email app."
  },
  {
    question: "What if the AI sorts wrong?",
    answer: "Just correct it. The AI learns and gets better over time."
  },
]

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

  return (
    <section id="faq" className="py-24 bg-slate-50">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section header */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-100 mb-6">
            <HelpCircle className="w-8 h-8 text-primary-600" />
          </div>
          <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
            FAQ
          </h2>
          <p className="text-lg text-slate-600">
            Quick answers to common questions.
          </p>
        </div>

        {/* FAQ items */}
        <div className="space-y-3">
          {faqs.map((faq, index) => (
            <FAQItem
              key={index}
              question={faq.question}
              answer={faq.answer}
              isOpen={openIndex === index}
              onClick={() => setOpenIndex(openIndex === index ? null : index)}
            />
          ))}
        </div>

        {/* Contact CTA */}
        <div className="mt-12 text-center p-6 bg-white rounded-2xl border border-slate-200">
          <p className="text-slate-600 mb-2">Still have questions?</p>
          <a 
            href="mailto:support@emailsorter.com" 
            className="text-primary-600 font-semibold hover:text-primary-700"
          >
            Contact us →
          </a>
        </div>
      </div>
    </section>
  )
}

interface FAQItemProps {
  question: string
  answer: string
  isOpen: boolean
  onClick: () => void
}

function FAQItem({ question, answer, isOpen, onClick }: FAQItemProps) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
      <button
        className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-slate-50 transition-colors"
        onClick={onClick}
      >
        <span className="font-semibold text-slate-900 pr-4">{question}</span>
        <ChevronDown 
          className={cn(
            "w-5 h-5 text-slate-400 transition-transform duration-200 flex-shrink-0",
            isOpen && "rotate-180"
          )} 
        />
      </button>
      <div 
        className={cn(
          "overflow-hidden transition-all duration-200",
          isOpen ? "max-h-40" : "max-h-0"
        )}
      >
        <p className="px-6 pb-4 text-slate-600">{answer}</p>
      </div>
    </div>
  )
}