import { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Plus, Minus } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const FAQ = () => {
  const sectionRef = useRef<HTMLElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const accordionRef = useRef<HTMLDivElement>(null);
  const titleRef = useRef<HTMLHeadingElement>(null);
  const descRef = useRef<HTMLParagraphElement>(null);
  const ctaRef = useRef<HTMLAnchorElement>(null);
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  const faqs = [
    {
      question: 'How much does a website cost?',
      answer: 'Website costs vary based on requirements. A basic business website starts at INR 15,000, while custom web applications range from INR 50,000-2,00,000+. Contact us for a detailed quote tailored to your needs.',
    },
    {
      question: 'How long does it take to build a website?',
      answer: 'A standard business website takes 2-3 weeks. Complex web applications or SaaS platforms may take 1-3 months depending on features and complexity. We always provide timeline estimates before starting.',
    },
    {
      question: 'Do you provide website maintenance?',
      answer: 'Yes, we offer comprehensive maintenance packages including security updates, content updates, performance optimization, and 24/7 support starting at INR 3,000/month.',
    },
    {
      question: 'What technologies do you use?',
      answer: 'We use modern technologies including React, Next.js, Node.js, Python, WordPress, and cloud platforms like AWS and Vercel. We choose the best stack for your specific project requirements.',
    },
    {
      question: 'Can you help with SEO?',
      answer: 'Absolutely! We implement SEO best practices in every website we build, including technical SEO, on-page optimization, schema markup, and performance optimization to help you rank higher on Google.',
    },
  ];

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Left content animation
      if (titleRef.current) {
        gsap.fromTo(
          titleRef.current,
          { x: -30, opacity: 0 },
          {
            x: 0,
            opacity: 1,
            duration: 0.6,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: contentRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }

      if (descRef.current) {
        gsap.fromTo(
          descRef.current,
          { y: 20, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.5,
            delay: 0.2,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: contentRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }

      if (ctaRef.current) {
        gsap.fromTo(
          ctaRef.current,
          { scale: 0.9, opacity: 0 },
          {
            scale: 1,
            opacity: 1,
            duration: 0.4,
            delay: 0.4,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: contentRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }

      // Accordion items animation
      const items = accordionRef.current?.querySelectorAll('.faq-item');
      if (items) {
        gsap.fromTo(
          items,
          { x: 30, opacity: 0 },
          {
            x: 0,
            opacity: 1,
            duration: 0.5,
            stagger: 0.1,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: accordionRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }
    }, sectionRef);

    return () => ctx.revert();
  }, []);

  const toggleFAQ = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  return (
    <section
      id="blog"
      ref={sectionRef}
      className="relative py-20 sm:py-28"
    >
      <div className="section-padding">
        <div className="container-max">
          <div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
            {/* Left Column - Content */}
            <div ref={contentRef} className="lg:col-span-2">
              <h2 
                ref={titleRef}
                className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 font-['Outfit']"
              >
                <span className="text-white">Frequently Asked</span>
                <br />
                <span className="gradient-text">Questions</span>
              </h2>

              <p 
                ref={descRef}
                className="text-[#94a3b8] text-base sm:text-lg mb-8"
              >
                Have questions? We have answers. If you don't find what you're 
                looking for, feel free to contact us.
              </p>

              <a 
                ref={ctaRef}
                href="#contact" 
                className="btn-primary inline-flex items-center gap-2"
              >
                Contact Us
              </a>
            </div>

            {/* Right Column - Accordion */}
            <div ref={accordionRef} className="lg:col-span-3 space-y-4">
              {faqs.map((faq, i) => (
                <div
                  key={i}
                  className={`faq-item glass-card overflow-hidden transition-all duration-300 ${
                    openIndex === i
                      ? 'border-[#3b6aff]/50 shadow-lg shadow-[#3b6aff]/10'
                      : 'border-white/10'
                  }`}
                >
                  <button
                    onClick={() => toggleFAQ(i)}
                    className="w-full flex items-center justify-between p-5 text-left"
                  >
                    <span className="text-white font-medium pr-4">{faq.question}</span>
                    <div
                      className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 transition-all duration-300 ${
                        openIndex === i
                          ? 'bg-[#3b6aff] text-white'
                          : 'bg-white/10 text-[#94a3b8]'
                      }`}
                    >
                      {openIndex === i ? <Minus size={18} /> : <Plus size={18} />}
                    </div>
                  </button>

                  <div
                    className={`overflow-hidden transition-all duration-400 ${
                      openIndex === i ? 'max-h-96' : 'max-h-0'
                    }`}
                  >
                    <div className="px-5 pb-5">
                      <p className="text-[#94a3b8] text-sm leading-relaxed">
                        {faq.answer}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default FAQ;