import { useState } from 'react';
import { motion } from 'framer-motion';
import { ChevronDown, MessageCircle } from 'lucide-react';
import SEO from '../components/SEO';
import SectionTitle from '../components/SectionTitle';
import { useApp } from '../context/AppContext';
import { pageKeywords } from '../data/keywords';
import { OrganizationSchema, FAQSchema } from '../components/schemas';

export default function FAQ() {
  const { t } = useApp();
  const [open, setOpen] = useState<number | null>(null);

  const faqs = [
    { q: t('whatPaymentMethods'), a: "We accept UPI (Google Pay, PhonePe, Paytm), PayPal, Binance, and BTC/USDT. Honestly, whatever works for you works for us. All transactions are encrypted and secure." },
    { q: t('howFastDelivery'), a: "99% of our orders are delivered in 2-10 minutes. Sometimes it's literally instant. Your license details get sent to both your email and WhatsApp right after we confirm payment." },
    { q: t('areTheseGenuine'), a: "100% genuine. We don't touch cracked software or shared passwords. Every product is authentic, and you get your own credentials. We've got a reputation to protect — we've served 50,000+ customers." },
    { q: t('whatRefundPolicy'), a: "7-day money-back guarantee on everything. If something's wrong and we can't fix it within 24 hours, you get your money back. No awkward questions, no runaround." },
    { q: t('howGetSupport'), a: "WhatsApp us at +91 70351 46526 or message @mfatool on Telegram. Our average response time is under 10 minutes. Sometimes we're even faster. We also offer a 24-hour fix guarantee — or your money back." },
    { q: t('canTrust'), a: "Absolutely. We've delivered 50,000+ orders across 40+ countries with a 4.9/5 rating. Check our reviews page — those are real people, not bots. We're a small team that actually cares." },
    { q: 'Do you deliver worldwide?', a: "Yes! We deliver digital tools to over 40 countries. Doesn't matter if you're in India, the US, UK, Canada, UAE, Australia, or somewhere we've never heard of — we've got you covered." },
    { q: 'Can I pay in USD or other currencies?', a: "We primarily show INR prices, but you can pay via PayPal, Binance, or BTC/USDT from anywhere in the world. We also show USD prices on every product page for reference." },
  ];

  const schema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: faqs.map((item) => ({
      '@type': 'Question',
      name: item.q,
      acceptedAnswer: { '@type': 'Answer', text: item.a },
    })),
  };

  return (
    <>
      <SEO
        title="MFA Tools FAQ | Kanva Pro, ChatGPT Plus & Digital Tools Questions"
        description="Find answers about Free Kanva Pro, payments, delivery, refunds, product authenticity, and support. 7-day refund guarantee. Instant delivery. 24/7 WhatsApp support."
        keywords={pageKeywords.faq}
        schema={schema}
      />
      <OrganizationSchema />
      <FAQSchema faqs={faqs.map((item) => ({ question: item.q, answer: item.a }))} />

      <section className="pt-28 pb-10 lg:pt-32 lg:pb-14">
        <div className="container-main max-w-[800px] text-center">
          <SectionTitle label="FAQ" title={t('faq')} subtitle="Everything you need to know before ordering. If you don't find your answer here, just WhatsApp us — we're friendly, promise." centered />
        </div>
      </section>

      <section className="pb-16 lg:pb-20">
        <div className="container-main max-w-[800px]">
          <div className="space-y-3">
            {faqs.map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4, delay: i * 0.05 }}
                className="border border-bg-border rounded-xl overflow-hidden hover:border-[#3A3A3A] transition-colors"
              >
                <button
                  onClick={() => setOpen(open === i ? null : i)}
                  className="w-full flex items-center justify-between px-5 py-4 text-left"
                >
                  <span className="text-white text-sm font-medium pr-4">{item.q}</span>
                  <ChevronDown size={18} className={`text-text-tertiary shrink-0 transition-transform ${open === i ? 'rotate-180' : ''}`} />
                </button>
                {open === i && (
                  <div className="px-5 pb-4">
                    <p className="text-text-secondary text-sm leading-relaxed">{item.a}</p>
                  </div>
                )}
              </motion.div>
            ))}
          </div>

          <div className="mt-10 bg-bg-secondary border border-bg-border rounded-2xl p-6 text-center">
            <p className="text-white font-semibold mb-2">{t('stillHaveQuestions')}</p>
            <p className="text-text-secondary text-sm mb-4">Our team is basically always online. Seriously, message us.</p>
            <a
              href="https://wa.me/917035146526?text=Hello%20MFA%20Tools%20Net%2C%20I%20have%20a%20question."
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 bg-whatsapp text-white font-semibold px-6 py-3 rounded-xl hover:bg-[#128C7E] transition-colors"
            >
              <MessageCircle size={18} /> {t('chatWhatsApp')}
            </a>
          </div>
        </div>
      </section>
    </>
  );
}