'use client'

import { useState } from 'react'
import { ChevronDown, ChevronUp } from 'lucide-react'
import { useLanguage } from '@/lib/LanguageContext'
import { getTranslation, translations } from '@/lib/i18n'

export default function FAQ() {
  const { language } = useLanguage()
  const [activeFaq, setActiveFaq] = useState<number | null>(null)
  
  // Get FAQs from translations
  const faqs = translations[language].faq.questions

  return (
    <section className="py-16 sm:py-20 md:py-24 bg-brand-light">
      <div className="container mx-auto px-4 sm:px-6 max-w-4xl">
        <div className="text-center mb-12 sm:mb-16">
          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tighter uppercase">
            {getTranslation(language, 'faq.title')}
          </h2>
          <p className="text-sm sm:text-base mt-4 text-gray-600 max-w-2xl mx-auto">
            {getTranslation(language, 'faq.description')}
          </p>
        </div>
        <div className="space-y-3 sm:space-y-4">
          {faqs.map((faq, idx) => (
            <div
              key={idx}
              className="bg-white rounded-xl sm:rounded-2xl border border-brand-accent/20 overflow-hidden transition-all"
            >
              <button
                className="w-full p-5 sm:p-6 md:p-8 flex justify-between items-start sm:items-center text-left gap-4"
                onClick={() => setActiveFaq(activeFaq === idx ? null : idx)}
              >
                <span className="text-sm sm:text-base md:text-lg font-semibold uppercase tracking-wide pr-2 sm:pr-4 leading-relaxed text-brand-text">
                  {faq.q}
                </span>
                <div className="flex-shrink-0 mt-1 sm:mt-0">
                  {activeFaq === idx ? (
                    <ChevronUp size={18} className="sm:w-5 sm:h-5 text-brand-primary" />
                  ) : (
                    <ChevronDown size={18} className="sm:w-5 sm:h-5 text-brand-primary" />
                  )}
                </div>
              </button>
              <div
                className={`px-5 sm:px-6 md:px-8 transition-all duration-500 ease-in-out overflow-hidden ${
                  activeFaq === idx ? 'max-h-96 pb-5 sm:pb-6 md:pb-8 opacity-100' : 'max-h-0 opacity-0'
                }`}
              >
                <p className="text-sm sm:text-base md:text-lg font-normal leading-relaxed text-gray-700">{faq.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}