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

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

  const faqs = t.faq.items;

  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">{t.faq.title}</h2>
          <p className="text-indigo-500 font-medium text-lg">{t.faq.subtitle}</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>
  );
}
