import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Plus, Minus } from 'lucide-react';
import { cn } from '../lib/utils';

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

  const faqs = [
    {
      q: "Vou receber as imagens prontas no e-mail?",
      a: "Não automaticamente — você mesmo cria as artes na nossa plataforma online! Após o pagamento, você recebe um link no e-mail para acessar o painel de criação. Lá você envia a foto do seu filho, escolhe os itens e nossa IA gera cada arte em 2 a 5 minutos. Você baixa tudo diretamente da plataforma. É super simples e intuitivo!"
    },
    {
      q: "Como funciona a geração da arte em IA?",
      a: "Após a compra, você receberá acesso a um painel onde enviará 1 foto do corpo inteiro da criança (de preferência de frente) e escolherá o tema. A primeira foto gerada é por nossa conta e não gasta seus créditos! A nossa Inteligência Artificial vai fundir o rostinho da criança com o tema selecionado perfeitamente em estilo Pixar/Disney 3D e gerar todos os arquivos de papelaria."
    },
    {
      q: "Preciso de algum programa pesado para imprimir?",
      a: "De jeito nenhum! Nós entregamos os arquivos em formato PDF pronto na medida exata. Você só precisa abrir o arquivo e clicar em imprimir, seja na sua casa ou enviar para a gráfica rápida mais próxima."
    },
    {
      q: "Quanto tempo demora para o kit ficar pronto?",
      a: "A transformação mágica pela Inteligência Artificial e a geração dos itens levam cerca de 2 a 5 minutos. É extremamente rápido e prático, perfeito para quem tem pressa."
    },
    {
      q: "Se eu não conseguir imprimir, vocês ajudam?",
      a: "Nossa equipe de suporte está à disposição no WhatsApp de segunda a sexta para tirar suas dúvidas e dar todo apoio técnico necessário. Mas fique tranquila, entregamos tutoriais rápidos junto ao material!"
    }
  ];

  return (
    <section className="py-24 bg-white border-y border-pink-100">
      <div className="container mx-auto px-6 max-w-3xl">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-5xl font-display font-bold mb-4 text-indigo-950">Dúvidas Frequentes</h2>
          <p className="text-indigo-500 font-medium text-lg">Tudo que você precisa saber.</p>
        </div>

        <div className="space-y-4">
          {faqs.map((faq, i) => (
            <div 
              key={i}
              className={cn(
                "border-2 rounded-3xl overflow-hidden transition-colors duration-300",
                openIndex === i ? "border-pink-300 bg-pink-50/50" : "border-pink-100 hover:border-pink-200"
              )}
            >
              <button
                onClick={() => setOpenIndex(openIndex === i ? null : i)}
                className="w-full px-8 py-6 flex items-center justify-between text-left focus:outline-none"
              >
                <span className="font-bold text-lg text-indigo-950 pr-8">{faq.q}</span>
                {openIndex === i ? (
                  <div className="shrink-0 w-8 h-8 rounded-full bg-pink-200 flex items-center justify-center">
                    <Minus className="w-4 h-4 text-pink-600" />
                  </div>
                ) : (
                  <div className="shrink-0 w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
                    <Plus className="w-4 h-4 text-indigo-500" />
                  </div>
                )}
              </button>
              
              <AnimatePresence>
                {openIndex === i && (
                  <motion.div
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: "auto", opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.3, ease: "easeInOut" }}
                  >
                    <div className="px-8 pb-6 text-indigo-900/80 font-medium leading-relaxed">
                      {faq.a}
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
