'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { useState } from 'react';
import { ChevronDown, HelpCircle, MessageCircle, FileText, Users, Globe, Target, Clock, CheckCircle } from 'lucide-react';

const FAQSection = () => {
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1,
  });

  const [openItem, setOpenItem] = useState<string | null>(null);
  const [activeCategory, setActiveCategory] = useState<number>(0); // Start with General Questions

  const toggleItem = (faqId: string) => {
    setOpenItem(prev => prev === faqId ? null : faqId);
  };

  const faqCategories = [
    {
      id: 0,
      icon: HelpCircle,
      title: "General Questions",
      count: 5
    },
    {
      id: 1,
      icon: FileText,
      title: "Content & Publishing",
      count: 5
    },
    {
      id: 2,
      icon: Globe,
      title: "Website Selection",
      count: 5
    }
  ];

  const allFaqs = [
    // General Questions - 5 items
    {
      id: 'general-1',
      category: 0,
      question: "How long does the guest posting process take?",
      answer: "Our typical turnaround time is 3-7 days from content submission to live publication. This includes our editorial review, any necessary revisions, and coordination with the publishing website. Rush delivery options are available for urgent requests.",
      icon: Clock
    },
    {
      id: 'general-2',
      category: 0,
      question: "What types of websites do you work with?",
      answer: "We partner exclusively with premium websites that have Domain Authority (DA) 40+ and Domain Rating (DR) 50+. Our network includes top-tier publications in technology, business, marketing, healthcare, and lifestyle niches. All sites maintain high editorial standards and organic traffic.",
      icon: Globe
    },
    {
      id: 'general-3',
      category: 0,
      question: "Do you offer content writing services?",
      answer: "Yes! We have a team of professional writers who specialize in creating SEO-optimized, engaging content that meets publication standards. Our content service includes research, writing, and optimization for your target keywords. Pricing starts at $30 per article.",
      icon: FileText
    },
    {
      id: 'general-4',
      category: 0,
      question: "What is your refund policy?",
      answer: "We offer a 100% satisfaction guarantee. If we're unable to place your content on a suitable website, you'll receive a full refund. We also offer revisions and alternative placements if your content requires adjustments.",
      icon: CheckCircle
    },
    {
      id: 'general-5',
      category: 0,
      question: "How do I track my order progress?",
      answer: "You'll receive access to our client dashboard where you can track your order status in real-time. We also provide regular email updates and you can always contact our support team for immediate assistance.",
      icon: HelpCircle
    },

    // Content & Publishing - 5 items
    {
      id: 'content-1',
      category: 1,
      question: "What are your content guidelines?",
      answer: "We require original, well-researched content of 1000+ words that provides genuine value to readers. Content should be SEO-optimized, include proper citations, and avoid promotional language. We'll provide detailed guidelines and examples after you place your order.",
      icon: FileText
    },
    {
      id: 'content-2',
      category: 1,
      question: "Can I include links in my guest post?",
      answer: "Absolutely! Each guest post includes 1-2 dofollow links to your website, depending on the publication's policy. We ensure all links are contextually relevant and placed naturally within the content. Additional links may be available for premium placements.",
      icon: Target
    },
    {
      id: 'content-3',
      category: 1,
      question: "Do you provide publication proof?",
      answer: "Yes, we provide comprehensive publication proof including the live URL, screenshots of the published article, and a performance report. You'll also receive access to our client dashboard where you can track all your publications and their performance metrics.",
      icon: MessageCircle
    },
    {
      id: 'content-4',
      category: 1,
      question: "Can I request revisions after publication?",
      answer: "Yes, we offer a 7-day revision period after publication for any minor corrections or updates. Major changes may require additional coordination with the publishing website, which we'll handle on your behalf.",
      icon: CheckCircle
    },
    {
      id: 'content-5',
      category: 1,
      question: "Do you handle image optimization and inclusion?",
      answer: "Yes, our editorial team optimizes and includes relevant images in your guest post. We ensure all images are properly credited, optimized for web performance, and enhance the overall readability of your content.",
      icon: FileText
    },

    // Website Selection - 5 items
    {
      id: 'website-1',
      category: 2,
      question: "How do I choose the right website for my niche?",
      answer: "Our platform includes advanced filtering by niche, domain authority, traffic, and audience demographics. You can also request personalized recommendations from our experts based on your industry and SEO goals. We'll help you select websites that align perfectly with your target audience.",
      icon: Users
    },
    {
      id: 'website-2',
      category: 2,
      question: "Can I request specific websites?",
      answer: "Yes! If you have specific target websites in mind, we can check their availability and negotiate placements on your behalf. We have established relationships with thousands of premium publications and can often secure placements on highly sought-after sites.",
      icon: Target
    },
    {
      id: 'website-3',
      category: 2,
      question: "What if my content gets rejected?",
      answer: "We have a 98% acceptance rate. In the rare case of rejection, our editorial team will work with you to revise the content or we'll place it on an alternative website of equal or higher quality at no additional cost. Your satisfaction is guaranteed.",
      icon: HelpCircle
    },
    {
      id: 'website-4',
      category: 2,
      question: "What metrics do you use to evaluate websites?",
      answer: "We evaluate websites based on Domain Authority (DA), Domain Rating (DR), organic traffic, spam score, content quality, and audience engagement. All websites in our network maintain high editorial standards and genuine reader engagement.",
      icon: Globe
    },
    {
      id: 'website-5',
      category: 2,
      question: "Can I see website statistics before ordering?",
      answer: "Yes, our platform provides detailed statistics for each website including DA, DR, monthly traffic, audience demographics, and niche information. You can review all metrics before making your selection.",
      icon: CheckCircle
    }
  ];

  const filteredFaqs = allFaqs.filter(faq => faq.category === activeCategory);

  const accordionVariants = {
    closed: {
      height: 0,
      opacity: 0,
      transition: {
        duration: 0.3,
        ease: "easeOut" as const
      }
    },
    open: {
      height: "auto",
      opacity: 1,
      transition: {
        duration: 0.4,
        ease: "easeOut" as const
      }
    }
  };

  const iconVariants = {
    closed: { rotate: 0 },
    open: { rotate: 180 }
  };

  return (
    <section id="faq" className="py-24 bg-gradient-to-br from-slate-50 via-white to-blue-50/30 relative overflow-hidden">
      {/* Background Elements */}
      <div className="absolute top-0 left-0 w-72 h-72 bg-blue-100/20 rounded-full blur-3xl"></div>
      <div className="absolute bottom-0 right-0 w-96 h-96 bg-purple-100/20 rounded-full blur-3xl"></div>
      
      <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <motion.div
          ref={ref}
          initial={{ opacity: 0, y: 40 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8 }}
          className="text-center mb-16"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={inView ? { opacity: 1, scale: 1 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="inline-flex items-center gap-3 bg-blue-50 text-blue-700 px-6 py-3 rounded-2xl text-sm font-semibold mb-8 border border-blue-200/50"
          >
            <HelpCircle className="h-5 w-5" />
            Frequently Asked Questions
          </motion.div>
          
          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6"
          >
            Your Questions
            <span className="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent ml-2 md:ml-4">
              Answered
            </span>
          </motion.h2>
          
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed font-light"
          >
            Everything you need to know about our guest posting service. 
            <span className="font-semibold text-blue-600"> Can`t find your answer? Contact our support team.</span>
          </motion.p>
        </motion.div>

        {/* Category Filter */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.5 }}
          className="flex flex-wrap justify-center gap-4 mb-12"
        >
          {faqCategories.map((category) => (
            <button
              key={category.id}
              onClick={() => setActiveCategory(category.id)}
              className={`px-6 py-3 rounded-2xl font-semibold transition-all duration-300 flex items-center gap-3 ${
                activeCategory === category.id
                  ? `bg-gradient-to-r from-blue-600 to-cyan-600 text-white shadow-lg scale-105`
                  : 'bg-white text-gray-700 shadow-md hover:shadow-lg border border-gray-200 hover:scale-105'
              }`}
            >
              <category.icon className="h-5 w-5" />
              {category.title}
              <span className={`px-2 py-1 rounded-full text-xs ${
                activeCategory === category.id
                  ? 'bg-white/20 text-white'
                  : 'bg-gray-100 text-gray-600'
              }`}>
                {category.count}
              </span>
            </button>
          ))}
        </motion.div>

        {/* FAQ Accordions - Single Column */}
        <div className="space-y-4 max-w-4xl mx-auto">
          {filteredFaqs.map((faq) => (
            <div
              key={faq.id}
              className="bg-white rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 overflow-hidden"
            >
              <button
                onClick={() => toggleItem(faq.id)}
                className="w-full px-6 py-6 text-left flex items-center justify-between gap-4 hover:bg-gray-50/50 transition-colors duration-200"
              >
                <div className="flex items-start gap-4 flex-1">
                  <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-cyan-600 rounded-xl flex items-center justify-center flex-shrink-0 mt-1">
                    <faq.icon className="h-5 w-5 text-white" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="text-lg font-semibold text-gray-900 pr-4 leading-tight">
                      {faq.question}
                    </h3>
                  </div>
                </div>
                <motion.div
                  variants={iconVariants}
                  animate={openItem === faq.id ? "open" : "closed"}
                  transition={{ duration: 0.3 }}
                  className="flex-shrink-0"
                >
                  <ChevronDown className="h-5 w-5 text-gray-500" />
                </motion.div>
              </button>

              <AnimatePresence initial={false}>
                {openItem === faq.id && (
                  <motion.div
                    variants={accordionVariants}
                    initial="closed"
                    animate="open"
                    exit="closed"
                    className="overflow-hidden"
                  >
                    <div className="px-6 pb-6">
                      <div className="w-12 h-1 bg-gradient-to-r from-blue-600 to-cyan-600 rounded-full mb-4"></div>
                      <p className="text-gray-600 leading-relaxed">
                        {faq.answer}
                      </p>
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          ))}
        </div>

        {/* CTA Section */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.8 }}
          className="text-center mt-16"
        >
          <div className="bg-gradient-to-r from-blue-600 to-cyan-600 rounded-3xl p-8 text-white shadow-2xl">
            <div className="max-w-2xl mx-auto">
              <h3 className="text-2xl md:text-3xl font-bold mb-4">
                Still Have Questions?
              </h3>
              <p className="text-blue-100 mb-6 text-lg">
                Our support team is here to help you get the answers you need.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button className="bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 rounded-2xl font-semibold hover:scale-105 transition-all duration-300 shadow-lg flex items-center gap-3">
                  <MessageCircle className="h-5 w-5" />
                  Contact Support
                </button>
                <button className="border-2 border-white text-white hover:bg-white/10 px-8 py-4 rounded-2xl font-semibold hover:scale-105 transition-all duration-300">
                  Schedule a Call
                </button>
              </div>
            </div>
          </div>
          
          <p className="text-gray-500 mt-6 text-sm">
            Average response time: 2 hours • 24/7 support available
          </p>
        </motion.div>
      </div>
    </section>
  );
};

export default FAQSection;