'use client'

import { useState } from 'react'
import { ChevronDown } from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'

const faqs = [
  {
    q: 'O LexMind dispensa a atuação do advogado?',
    a: 'De forma alguma. O LexMind é um instrumento de produtividade e assistência técnica. Toda peça produzida pela plataforma deve passar pela revisão e validação do profissional responsável. A inteligência artificial potencializa o trabalho humano — não o substitui.',
  },
  {
    q: 'Quais categorias de documentos posso gerar?',
    a: 'A plataforma cobre um amplo espectro: petições iniciais, contestações, apelações, agravos, embargos, pareceres jurídicos, contratos, notificações extrajudiciais, habeas corpus, mandados de segurança e dezenas de outros modelos adaptados às principais áreas do ordenamento brasileiro.',
  },
  {
    q: 'Qual o nível de confiabilidade das peças geradas?',
    a: 'Nossa IA opera com base em legislação atualizada e jurisprudência consolidada dos tribunais superiores e estaduais. A taxa de aproveitamento integral supera 90%, mas ressaltamos: a responsabilidade técnica permanece com o advogado subscritor, conforme o Código de Ética da OAB.',
  },
  {
    q: 'Como é tratada a confidencialidade dos dados?',
    a: 'Com rigor absoluto. Empregamos criptografia AES-256 para dados em repouso e TLS 1.3 em trânsito. Seus dados e os de seus clientes jamais são utilizados para treinamento de modelos. Operamos em total conformidade com a LGPD e as diretrizes de sigilo profissional.',
  },
  {
    q: 'É possível cancelar a assinatura sem penalidade?',
    a: 'Sim, a qualquer momento, sem multa ou burocracia. O cancelamento pode ser feito diretamente pelo painel de controle. Seu acesso permanece ativo até o término do ciclo vigente.',
  },
  {
    q: 'Há condições especiais para escritórios ou membros da OAB?',
    a: 'Oferecemos descontos para portadores de carteira da OAB e planos diferenciados para escritórios com mais de 5 advogados. Entre em contato pela plataforma ou por e-mail para uma proposta personalizada.',
  },
]

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

  return (
    <div className="space-y-3">
      {faqs.map((faq, i) => {
        const isOpen = openIndex === i
        return (
          <motion.div
            key={i}
            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: '-50px' }}
            transition={{ delay: i * 0.05, duration: 0.4 }}
            className={`rounded-2xl border transition-colors duration-300 overflow-hidden ${
              isOpen
                ? 'border-teal-500/20 bg-teal-500/[0.03]'
                : 'border-white/[0.06] bg-white/[0.015] hover:border-white/[0.1]'
            }`}
          >
            <button
              onClick={() => setOpenIndex(isOpen ? null : i)}
              className="w-full flex items-center justify-between px-6 py-5 text-left group"
            >
              <span className="text-[15px] font-medium text-white pr-4 leading-snug">{faq.q}</span>
              <motion.div
                animate={{ rotate: isOpen ? 180 : 0 }}
                transition={{ duration: 0.2 }}
                className="shrink-0"
              >
                <ChevronDown className="w-4 h-4 text-gray-500 group-hover:text-teal-400 transition-colors" />
              </motion.div>
            </button>
            <AnimatePresence initial={false}>
              {isOpen && (
                <motion.div
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: 'auto', opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  transition={{ duration: 0.25, ease: 'easeInOut' }}
                  className="overflow-hidden"
                >
                  <div className="px-6 pb-5 text-sm text-gray-400 leading-relaxed">{faq.a}</div>
                </motion.div>
              )}
            </AnimatePresence>
          </motion.div>
        )
      })}
    </div>
  )
}
