import PageBanner from "@/components/PageBanner";
import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";
import { ChevronDown } from "lucide-react";
import heroProducts from "@/assets/hero-products.jpg";

const faqs = [
  {
    q: "What types of gold products do you offer?",
    a: "We supply three primary gold products: Gold Dust (92–96% purity), Gold Nuggets (85–95% purity), and Gold Doré Bars (96–99% purity). All products are sourced from licensed artisanal miners in the DRC.",
  },
  {
    q: "What payment methods do you accept?",
    a: "We accept international bank wire transfers (SWIFT), escrow services for added buyer protection, and cryptocurrency payments including USDT on both TRC20 (Tron) and ERC20 (Ethereum) networks. Crypto payments allow fast, borderless transactions without currency conversion fees.",
  },
  {
    q: "How does USDT payment work?",
    a: "USDT (Tether) is a stablecoin pegged 1:1 to the US Dollar. You can send payment via the TRC20 (Tron) or ERC20 (Ethereum) network to our verified wallet address. Transactions are confirmed within minutes, and we provide full payment receipts. This method is preferred by many international buyers for its speed and low transaction costs.",
  },
  {
    q: "How do you verify the quality and purity of gold?",
    a: "Every batch of gold undergoes rigorous assaying — independent laboratory testing using fire assay, XRF spectroscopy, and ICP analysis. Buyers receive certified assay reports with every shipment, providing verified proof of purity, weight, and composition.",
  },
  {
    q: "Is your gold conflict-free?",
    a: "Yes. Primera Gold Africa is committed to 100% conflict-free gold sourcing. We work exclusively with licensed mining cooperatives that comply with DRC regulations and international responsible sourcing standards. Full chain-of-custody documentation is provided.",
  },
  {
    q: "What documentation do I receive with my shipment?",
    a: "Every shipment includes: Export License, Certificate of Origin, Assay Certificate, Commercial Invoice, Packing List, and Air Waybill. These documents ensure full compliance with international import/export regulations.",
  },
  {
    q: "How long does delivery take?",
    a: "Delivery timelines depend on the destination and order size. Typically, air freight shipments arrive within 3–7 business days after all documentation and payment have been finalized. We provide real-time tracking for all shipments.",
  },
  {
    q: "How do I start a purchase?",
    a: "Contact us via email, WhatsApp, or our website contact form. Our team will discuss your requirements, provide pricing, and guide you through the purchase process including documentation, payment, and delivery logistics.",
  },
];

const FAQ = () => {
  const [openIdx, setOpenIdx] = useState<number | null>(null);

  return (
    <div>
      <PageBanner title="Frequently Asked Questions" subtitle="Answers to the most common questions about gold trading with Primera Gold Africa" image={heroProducts} />

      <section className="section-padding bg-background">
        <div className="container mx-auto max-w-3xl">
          <div className="space-y-3">
            {faqs.map((faq, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 10 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.05 }}
                className="bg-card rounded-xl border border-border overflow-hidden"
              >
                <button
                  onClick={() => setOpenIdx(openIdx === i ? null : i)}
                  className="w-full flex items-center justify-between p-5 text-left"
                >
                  <span className="font-heading font-semibold text-foreground text-sm md:text-base pr-4">{faq.q}</span>
                  <ChevronDown size={20} className={`text-primary shrink-0 transition-transform ${openIdx === i ? "rotate-180" : ""}`} />
                </button>
                <AnimatePresence>
                  {openIdx === i && (
                    <motion.div
                      initial={{ height: 0, opacity: 0 }}
                      animate={{ height: "auto", opacity: 1 }}
                      exit={{ height: 0, opacity: 0 }}
                      transition={{ duration: 0.3 }}
                    >
                      <p className="px-5 pb-5 text-muted-foreground text-sm leading-relaxed">{faq.a}</p>
                    </motion.div>
                  )}
                </AnimatePresence>
              </motion.div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

export default FAQ;
