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ê 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. Com o Kit Festa você tem 30 créditos para usar no seu ritmo. Baixa tudo em lote diretamente da plataforma!"
    },
    {
      q: "O que são os 30 créditos?",
      a: "Cada crédito gera uma arte personalizada do nosso catálogo com mais de 21 modelos (convite, topo de bolo, banner, caixa de pipoca, tag, saia de cupcake, adesivos e muito mais). Com 30 créditos você pode, por exemplo, gerar 5 convites com variações diferentes, 3 banners, 10 tags de lembrancinha... você escolhe como usar!"
    },
    {
      q: "Como funciona a geração da arte em IA?",
      a: "Após a compra, você recebe acesso imediato ao painel. Faça o upload de 1 foto do seu filho (de preferência de corpo inteiro e frente), escolha o item e o estilo. A IA transforma o rosto dele em um personagem 3D estilo Pixar/Disney e aplica na arte escolhida. A primeira imagem é por nossa conta — não consome nenhum crédito!"
    },
    {
      q: "Por quanto tempo ficam disponíveis os créditos?",
      a: "Os 30 créditos ficam ativos por 60 dias a partir da data da compra. Você pode usar no seu ritmo, sem pressa — gere hoje, amanhã, ou vai usando ao longo do tempo conforme precisa de cada item."
    },
    {
      q: "Como faço para baixar todas as imagens de uma vez?",
      a: "No painel, você tem um botão de download em lote que baixa todas as artes geradas de uma só vez em um arquivo ZIP. Cada arquivo já vem em PDF formatado e em alta resolução, pronto para impressão."
    },
    {
      q: "Preciso de algum programa para imprimir?",
      a: "Não! Os arquivos já chegam em PDF na medida exata para impressão. Basta abrir no celular ou computador e mandar imprimir — em casa ou na gráfica mais próxima."
    },
    {
      q: "Quanto tempo demora para ficar pronto?",
      a: "A geração de cada arte leva de 2 a 5 minutos. O acesso ao painel é imediato após o pagamento."
    }
  ];

  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 antes de comprar.</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>
  );
}
