import { useEffect, useRef, useState } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { MessageCircle, Send, Mail, HelpCircle, ChevronDown, CheckCircle, AlertCircle } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const faqs = [
  {
    question: 'Is Kanva Pro really free through MFA Tools?',
    answer: 'Yes! We provide free access to Kanva Pro through education teams. Students and educators can join our teams and get full Kanva Pro features at no cost.',
  },
  {
    question: 'How long does the access last?',
    answer: 'Access is typically lifetime as long as you remain an active member of the education team. We maintain multiple teams to ensure continuous availability.',
  },
  {
    question: 'Do I need to provide payment information?',
    answer: 'No credit card or payment information is required. Simply join one of our education teams and accept the invitation sent to your email.',
  },
  {
    question: 'Is this legal and safe?',
    answer: 'Yes, we use Kanva\'s official education program. We create and manage education teams that are compliant with Kanva\'s terms of service for educational use.',
  },
  {
    question: 'What features do I get with Kanva Pro?',
    answer: 'You get access to all Kanva Pro features including: unlimited templates, premium stock photos, background remover, brand kit, resize designs, and much more.',
  },
  {
    question: 'How do I get support if I have issues?',
    answer: 'We offer 24/7 support through WhatsApp and Telegram. Our team typically responds within minutes during active hours and within a few hours otherwise.',
  },
];

const contactMethods = [
  {
    name: 'WhatsApp Support',
    description: 'Fastest response time',
    url: 'https://wa.me/917038146526',
    icon: MessageCircle,
    color: '#25D366',
    action: 'Chat Now',
  },
  {
    name: 'Telegram Support',
    description: 'Community & direct support',
    url: 'https://t.me/mfatool',
    icon: Send,
    color: '#0088CC',
    action: 'Message Us',
  },
  {
    name: 'Email Support',
    description: 'For detailed inquiries',
    url: 'mailto:support@mfatools.pro',
    icon: Mail,
    color: '#CCFF00',
    action: 'Send Email',
  },
];

export default function Contact() {
  const sectionRef = useRef<HTMLElement>(null);
  const headingRef = useRef<HTMLDivElement>(null);
  const contactRef = useRef<HTMLDivElement>(null);
  const faqRef = useRef<HTMLDivElement>(null);
  const [openFaq, setOpenFaq] = useState<number | null>(0);

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Heading animation
      gsap.fromTo(
        headingRef.current,
        { opacity: 0, y: 50 },
        {
          opacity: 1,
          y: 0,
          duration: 0.8,
          ease: 'power3.out',
          scrollTrigger: {
            trigger: headingRef.current,
            start: 'top 80%',
            toggleActions: 'play none none reverse',
          },
        }
      );

      // Contact cards animation
      const contactCards = contactRef.current?.querySelectorAll('.contact-card');
      if (contactCards) {
        gsap.fromTo(
          contactCards,
          { opacity: 0, y: 40 },
          {
            opacity: 1,
            y: 0,
            duration: 0.6,
            stagger: 0.1,
            ease: 'power3.out',
            scrollTrigger: {
              trigger: contactRef.current,
              start: 'top 75%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }

      // FAQ animation
      const faqItems = faqRef.current?.querySelectorAll('.faq-item');
      if (faqItems) {
        gsap.fromTo(
          faqItems,
          { opacity: 0, x: -30 },
          {
            opacity: 1,
            x: 0,
            duration: 0.5,
            stagger: 0.08,
            ease: 'power3.out',
            scrollTrigger: {
              trigger: faqRef.current,
              start: 'top 75%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }
    }, sectionRef);

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

  const toggleFaq = (index: number) => {
    setOpenFaq(openFaq === index ? null : index);
  };

  return (
    <section
      id="contact"
      ref={sectionRef}
      className="relative py-24 md:py-32 px-4 overflow-hidden"
    >
      <div className="max-w-7xl mx-auto">
        {/* Section Header */}
        <div ref={headingRef} className="text-center mb-16 md:mb-20">
          <div className="inline-flex items-center gap-2 px-4 py-2 mb-6 rounded-full bg-white/5 border border-white/10">
            <HelpCircle className="w-4 h-4 text-[#CCFF00]" />
            <span className="font-['Rajdhani'] text-sm text-white/70">
              Get In Touch
            </span>
          </div>
          <h2 className="font-['Orbitron'] text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4">
            We're Here to <span className="gradient-text">Help</span>
          </h2>
          <p className="font-['Rajdhani'] text-lg md:text-xl text-white/60 max-w-2xl mx-auto">
            Have questions? Our support team is available 24/7 to assist you. 
            Reach out through any of our channels.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16">
          {/* Contact Methods */}
          <div ref={contactRef}>
            <h3 className="font-['Orbitron'] text-2xl font-bold text-white mb-6">
              Contact Support
            </h3>
            <div className="space-y-4">
              {contactMethods.map((method, index) => (
                <a
                  key={index}
                  href={method.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="contact-card glass-card p-5 flex items-center gap-4 group hover:border-[#CCFF00]/50 transition-all duration-300"
                >
                  <div
                    className="w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0 transition-transform duration-300 group-hover:scale-110"
                    style={{
                      backgroundColor: `${method.color}20`,
                    }}
                  >
                    <method.icon
                      className="w-7 h-7"
                      style={{ color: method.color }}
                    />
                  </div>
                  <div className="flex-1">
                    <h4 className="font-['Orbitron'] text-lg font-bold text-white group-hover:text-[#CCFF00] transition-colors">
                      {method.name}
                    </h4>
                    <p className="font-['Rajdhani'] text-sm text-white/60">
                      {method.description}
                    </p>
                  </div>
                  <span
                    className="px-4 py-2 rounded-full font-['Rajdhani'] text-sm font-semibold transition-all duration-300"
                    style={{
                      backgroundColor: `${method.color}20`,
                      color: method.color,
                    }}
                  >
                    {method.action}
                  </span>
                </a>
              ))}
            </div>

            {/* Response Time */}
            <div className="mt-8 glass-card p-6">
              <div className="flex items-center gap-3 mb-4">
                <CheckCircle className="w-6 h-6 text-[#CCFF00]" />
                <h4 className="font-['Orbitron'] text-lg font-bold text-white">
                  Response Times
                </h4>
              </div>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="font-['Rajdhani'] text-white/70">WhatsApp</span>
                  <span className="font-['Rajdhani'] text-[#CCFF00]">~5 minutes</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="font-['Rajdhani'] text-white/70">Telegram</span>
                  <span className="font-['Rajdhani'] text-[#CCFF00]">~10 minutes</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="font-['Rajdhani'] text-white/70">Email</span>
                  <span className="font-['Rajdhani'] text-[#CCFF00]">~24 hours</span>
                </div>
              </div>
            </div>
          </div>

          {/* FAQ Section */}
          <div ref={faqRef}>
            <h3 className="font-['Orbitron'] text-2xl font-bold text-white mb-6">
              Frequently Asked Questions
            </h3>
            <div className="space-y-3">
              {faqs.map((faq, index) => (
                <div
                  key={index}
                  className="faq-item glass-card overflow-hidden"
                >
                  <button
                    onClick={() => toggleFaq(index)}
                    className="w-full p-5 flex items-center justify-between text-left"
                  >
                    <span className="font-['Orbitron'] text-base font-semibold text-white pr-4">
                      {faq.question}
                    </span>
                    <ChevronDown
                      className={`w-5 h-5 text-[#CCFF00] flex-shrink-0 transition-transform duration-300 ${
                        openFaq === index ? 'rotate-180' : ''
                      }`}
                    />
                  </button>
                  <div
                    className={`overflow-hidden transition-all duration-300 ${
                      openFaq === index ? 'max-h-48' : 'max-h-0'
                    }`}
                  >
                    <div className="px-5 pb-5">
                      <p className="font-['Rajdhani'] text-white/70">
                        {faq.answer}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Still Need Help */}
            <div className="mt-6 glass-card p-6 border border-[#CCFF00]/30">
              <div className="flex items-start gap-4">
                <AlertCircle className="w-6 h-6 text-[#CCFF00] flex-shrink-0 mt-1" />
                <div>
                  <h4 className="font-['Orbitron'] text-lg font-bold text-white mb-2">
                    Still Need Help?
                  </h4>
                  <p className="font-['Rajdhani'] text-white/70 mb-4">
                    Can't find what you're looking for? Our support team is ready to assist you.
                  </p>
                  <a
                    href="https://wa.me/917038146526"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 text-[#CCFF00] font-['Rajdhani'] font-semibold hover:underline"
                  >
                    Contact Support
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* FAQ Schema.org Structured Data */}
      <script type="application/ld+json">
        {JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'FAQPage',
          mainEntity: faqs.map(faq => ({
            '@type': 'Question',
            name: faq.question,
            acceptedAnswer: {
              '@type': 'Answer',
              text: faq.answer,
            },
          })),
        })}
      </script>
    </section>
  );
}