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: "Preciso ter conhecimento prévio em tecnologia?",
      a: "Não. O material foi desenhado do absoluto zero para que você consiga implementar os sistemas mesmo que seja total iniciante no mercado digital."
    },
    {
      q: "Quanto tempo de acesso eu terei?",
      a: "O acesso é vitalício. Você pode assistir e revisar o conteúdo quantas vezes quiser, no seu próprio ritmo, sem prazos de validade."
    },
    {
      q: "Como receberei o acesso ao material?",
      a: "Imediatamente após a confirmação do pagamento, os dados restritos de acesso à plataforma serão enviados automaticamente para o seu e-mail cadastrado na hora da compra."
    },
    {
      q: "Funciona para quem vende produto físico?",
      a: "Sim. A arquitetura de vendas ensinada foca em aumentar o valor percebido e gerenciar o fluxo comercial."
    }
  ];

  return (
    <section className="py-24 border-t border-white/5 bg-neutral-950/20">
      <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-medium mb-4 tracking-tight">
            Perguntas Frequentes.
          </h2>
        </div>

        <div className="space-y-4">
          {faqs.map((faq, i) => (
            <motion.div 
              key={i}
              initial={{ opacity: 0, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="border border-white/10 rounded-2xl bg-neutral-900/30 overflow-hidden transition-colors hover:border-white/20"
            >
              <button
                onClick={() => setOpenIndex(openIndex === i ? null : i)}
                className="w-full px-6 py-6 flex items-center justify-between text-left"
              >
                <span className="font-medium pr-8">{faq.q}</span>
                <div className={cn(
                  "w-8 h-8 rounded-full border border-white/10 flex items-center justify-center shrink-0 transition-colors",
                  openIndex === i ? "bg-white text-black" : "bg-neutral-800 text-white"
                )}>
                  {openIndex === i ? <Minus className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
                </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 }}
                  >
                    <div className="px-6 pb-6 text-neutral-400 font-light leading-relaxed">
                      {faq.a}
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}