"use client";

import { Plus } from "lucide-react";
import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";

interface FAQItem {
  id: string;
  question: string;
  answer: string;
}

const faqs: FAQItem[] = [
  {
    id: "item-1",
    question: "How does Planpost AI work?",
    answer:
      "Planpost AI uses artificial intelligence to generate engaging social media content, schedule posts, monitor performance, and analyze competitors to improve your social media strategy.",
  },
  {
    id: "item-2",
    question: "What features does Planpost AI offer?",
    answer:
      "Planpost AI offers a comprehensive suite of features including content generation, post scheduling, analytics tracking, competitor analysis, AI-powered image creation, hashtag suggestions, and automated posting across multiple social media platforms.",
  },
  {
    id: "item-3",
    question: "Is Planpost AI suitable for my business?",
    answer:
      "Yes! Planpost AI is designed to serve businesses of all sizes, from individual creators to large enterprises. Our flexible plans allow you to choose the features that best match your needs and scale as your business grows.",
  },
  {
    id: "item-4",
    question: "How secure is my data with Planpost AI?",
    answer:
      "We take data security seriously. Planpost AI employs industry-standard encryption, regular security audits, and strict access controls to ensure your data remains protected. We are fully compliant with GDPR and other privacy regulations.",
  },
];

export default function FAQSection() {
  const [openItems, setOpenItems] = React.useState<Set<string>>(new Set());

  const handleItemClick = (itemId: string) => {
    const newOpenItems = new Set(openItems);
    if (newOpenItems.has(itemId)) {
      newOpenItems.delete(itemId);
    } else {
      newOpenItems.add(itemId);
    }
    setOpenItems(newOpenItems);
  };

  return (
    <div id="faqSection" className="py-12 px-4 md:px-6 lg:px-8 bg-[#f5f1ff]">
      <div className="max-w-3xl mx-auto">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">
          Frequently asked <span className="text-[#7c3aed]">Question</span>
        </h2>

        <div className="space-y-4">
          {faqs.map((faq) => (
            <motion.div
              key={faq.id}
              initial={false}
              animate={openItems.has(faq.id) ? "open" : "closed"}
              className="bg-white rounded-lg overflow-hidden"
            >
              <motion.button
                onClick={() => handleItemClick(faq.id)}
                className="w-full text-left p-6 flex items-center justify-between hover:bg-gray-50"
                whileHover={{ backgroundColor: "rgba(0, 0, 0, 0.02)" }}
                transition={{ duration: 0.2 }}
              >
                <span className="text-lg text-[#7c3aed] font-medium">
                  {faq.question}
                </span>
                <motion.div
                  variants={{
                    open: { rotate: 45 },
                    closed: { rotate: 0 },
                  }}
                  transition={{ duration: 0.2 }}
                  className="relative w-6 h-6 flex items-center justify-center"
                >
                  <Plus className="h-5 w-5 text-[#7c3aed] absolute" />
                </motion.div>
              </motion.button>

              <AnimatePresence initial={false}>
                {openItems.has(faq.id) && (
                  <motion.div
                    initial="collapsed"
                    animate="open"
                    exit="collapsed"
                    variants={{
                      open: {
                        opacity: 1,
                        height: "auto",
                        transition: {
                          duration: 0.3,
                          ease: [0.4, 0, 0.2, 1],
                        },
                      },
                      collapsed: {
                        opacity: 0,
                        height: 0,
                        transition: {
                          duration: 0.3,
                          ease: [0.4, 0, 0.2, 1],
                        },
                      },
                    }}
                  >
                    <motion.div
                      variants={{
                        open: {
                          y: 0,
                          opacity: 1,
                          transition: {
                            duration: 0.3,
                            ease: [0.4, 0, 0.2, 1],
                            delay: 0.1,
                          },
                        },
                        collapsed: {
                          y: 20,
                          opacity: 0,
                          transition: {
                            duration: 0.3,
                            ease: [0.4, 0, 0.2, 1],
                          },
                        },
                      }}
                      className="px-6 pb-6"
                    >
                      <p className="text-gray-600">{faq.answer}</p>
                    </motion.div>
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}
