import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';

interface FAQItem {
    question: string;
    answer: string;
}

const faqData: FAQItem[] = [
    {
        question: "Are your ceramics safe for food, oven, and dishwasher use?",
        answer: "Yes – all our pottery is glazed and food-safe. We use durable, non-toxic glazes that are oven-, microwave-, and dishwasher-safe. To extend their life, we still recommend hand-washing and avoiding harsh scrubbing. Treat your ceramicware gently (like any quality dishware) to keep the colors vibrant and the glaze strong."
    },
    {
        question: "How unique is each piece?",
        answer: "Every piece in our shop is designed and handcrafted in small batches. That means no two pieces are exactly alike. You will see slight variations and unique markings that make each item one-of-a-kind. We do our best to photograph products accurately, but please allow for some artisanal differences. These natural imperfections are a sign of true craftsmanship."
    },
    {
        question: "How long will it take to receive my order?",
        answer: "Once you place an order, please allow 1–3 business days for us to carefully prepare and package your item (handmade pottery takes a bit of extra time). After that, standard shipping via USPS usually takes 3–5 business days within the U.S. You'll receive a tracking number by email as soon as your order ships."
    },
    {
        question: "Do you ship outside the USA?",
        answer: "Currently we ship nationwide within the U.S. only. We do not offer international shipping at this time. Orders ship from Corpus Christi, Texas. We focus on providing fast, reliable delivery to Texas and all U.S. customers."
    },
    {
        question: "What if my order arrives damaged?",
        answer: "We take great care in packaging each piece using recyclable and padded materials. Still, accidents happen. If any item arrives broken or damaged, please contact us immediately. Take a photo of the damage (and packaging, if possible), and email us within 7 days of receipt. All orders are fully insured during transit. Once we review the details, we'll be happy to repair, replace, or refund damaged items at no additional cost to you."
    },
    {
        question: "What is your return/exchange policy?",
        answer: "We want you to love your purchase. Because each piece is handmade and unique, all sales are final except in cases of damage or defect. If something isn't right with your order, please let us know. We handle returns or exchanges for defective items (typically within 14 days of delivery). You'll just need to return the piece unused, in its original condition and packaging. (Sorry, we cannot accept returns on change-of-mind or carelessly broken items.) See our Returns page for full details."
    },
    {
        question: "How do I contact you with questions?",
        answer: "We're here to help! Feel free to reach out anytime. You can email our customer support at support@knuthceramics.com or use the contact form on our site. We aim to respond within 1–2 business days. Thank you for choosing KNUTH Ceramics – we love answering your questions and hearing your feedback!"
    }
];

const FAQ: React.FC = () => {
    const [openIndex, setOpenIndex] = useState<number | null>(null);

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

    return (
        <div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
            <div className="max-w-[1200px] mx-auto px-6 md:px-12">
                {/* Header */}
                <div className="mb-24">
                    <motion.span
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ duration: 1 }}
                        className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
                    >
                        Help Center
                    </motion.span>
                    <motion.h1
                        initial={{ y: 30, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.2, duration: 0.8 }}
                        className="font-display text-5xl md:text-7xl lg:text-8xl leading-none text-text-main dark:text-white mb-8"
                    >
                        Frequently Asked<br />Questions
                    </motion.h1>
                    <motion.p
                        initial={{ y: 30, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.4, duration: 0.8 }}
                        className="font-body text-lg font-light text-stone-500 leading-relaxed max-w-2xl"
                    >
                        Find answers to common questions about our handcrafted ceramics, shipping, care instructions, and more.
                    </motion.p>
                </div>

                {/* FAQ Items */}
                <div className="space-y-4">
                    {faqData.map((item, index) => (
                        <motion.div
                            key={index}
                            initial={{ y: 20, opacity: 0 }}
                            animate={{ y: 0, opacity: 1 }}
                            transition={{ delay: index * 0.1, duration: 0.6 }}
                            className="border border-stone-200 dark:border-stone-800 bg-white dark:bg-black"
                        >
                            <button
                                onClick={() => toggleFAQ(index)}
                                className="w-full px-8 py-6 flex justify-between items-center hover:bg-stone-50 dark:hover:bg-stone-900 transition-colors"
                            >
                                <h3 className="font-body text-lg md:text-xl text-left text-text-main dark:text-white pr-8">
                                    {item.question}
                                </h3>
                                <motion.div
                                    animate={{ rotate: openIndex === index ? 45 : 0 }}
                                    transition={{ duration: 0.3 }}
                                    className="flex-shrink-0"
                                >
                                    <svg
                                        className="w-6 h-6 text-stone-400"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={1.5}
                                            d="M12 4v16m8-8H4"
                                        />
                                    </svg>
                                </motion.div>
                            </button>

                            <AnimatePresence>
                                {openIndex === index && (
                                    <motion.div
                                        initial={{ height: 0, opacity: 0 }}
                                        animate={{ height: "auto", opacity: 1 }}
                                        exit={{ height: 0, opacity: 0 }}
                                        transition={{ duration: 0.3 }}
                                        className="overflow-hidden"
                                    >
                                        <div className="px-8 pb-6 border-t border-stone-100 dark:border-stone-800 pt-6">
                                            <p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
                                                {item.answer}
                                            </p>
                                        </div>
                                    </motion.div>
                                )}
                            </AnimatePresence>
                        </motion.div>
                    ))}
                </div>

                {/* Contact CTA */}
                <motion.div
                    initial={{ y: 30, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 0.8, duration: 0.8 }}
                    className="mt-24 p-12 bg-primary dark:bg-black text-white text-center border border-stone-800"
                >
                    <h2 className="font-display text-3xl md:text-4xl mb-4">Still have questions?</h2>
                    <p className="font-body font-light text-stone-400 mb-8 max-w-xl mx-auto">
                        We're here to help. Reach out to our customer support team.
                    </p>
                    <Link
                        to="/contact"
                        className="inline-block bg-white text-black px-10 py-4 text-xs font-bold uppercase tracking-widest hover:bg-stone-200 transition-colors"
                    >
                        Contact Us
                    </Link>
                </motion.div>
            </div>
        </div>
    );
};

export default FAQ;