import React, { useRef } from 'react';
import { useScrollFadeIn } from '../hooks/useScrollAnimations';

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

const FAQItem: React.FC<FAQItemProps> = ({ question, answer }) => {
    const [isOpen, setIsOpen] = React.useState(false);

    return (
        <div className="border-b border-stone-200 dark:border-stone-700">
            <button
                className="w-full py-6 flex justify-between items-center text-left focus:outline-none"
                onClick={() => setIsOpen(!isOpen)}
                aria-expanded={isOpen}
            >
                <h3 className="text-lg font-display text-text-main dark:text-white">{question}</h3>
                <span className={`transform transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`}>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
                </span>
            </button>
            <div
                className={`overflow-hidden transition-all duration-500 ease-in-out ${isOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'}`}
            >
                <p className="pb-6 text-text-muted dark:text-gray-400 font-body leading-relaxed max-w-2xl">
                    {answer}
                </p>
            </div>
        </div>
    );
};

const FAQ: React.FC = () => {
    const containerRef = useRef<HTMLDivElement>(null);
    useScrollFadeIn(containerRef);

    const faqs = [
        {
            question: "Do you ship your ceramics internationally?",
            answer: "Currently, we ship our handmade pottery mainly within Texas and the United States. We occasionally open international shipping spots for specific drops. Sign up for our newsletter to be notified."
        },
        {
            question: "Are your pieces dishwasher and microwave safe?",
            answer: "Yes! Our functional stoneware, including mugs, plates, and bowls, is fired to cone 6 oxidation, making it durable for daily use. However, hand washing is always recommended to prolong the life of your unique handmade ceramics."
        },
        {
            question: "Where is your studio located?",
            answer: "Our studio is based in the heart of Corpus Christi, Texas. We take inspiration from the Gulf Coast landscape. We offer local pickup for our Corpus Christi neighbors!"
        },
        {
            question: "Do you offer pottery classes in Corpus Christi?",
            answer: "We are working on bringing intimate wheel-throwing workshops to our Corpus Christi studio soon. Check our 'Atelier' page or follow us on Instagram for announcements."
        },
        {
            question: "Do you take custom orders or commissions?",
            answer: "We accept a limited number of custom dinnerware commissions each year. If you are looking for a bespoke set for your home or restaurant, please contact us directly."
        },
        {
            question: "How often do you restock the shop?",
            answer: "We work in small batches and typically release a new 'Sandstone' or 'Seafoam' collection every 4-6 weeks. Join our email list to get early access to the next kiln opening."
        },
        {
            question: "What clay bodies and glazes do you use?",
            answer: "We use a proprietary blend of stoneware clay that mimics the texture of Texas limestone. Our glazes are formulated in-house to reflect colors of the sea and sand."
        }
    ];

    return (
        <section ref={containerRef} className="py-24 px-6 md:px-20 bg-stone-50 dark:bg-stone-900/50">
            <div className="max-w-4xl mx-auto">
                <span className="block font-body text-xs uppercase tracking-[0.2em] text-text-muted mb-8">
                    Common Questions
                </span>
                <h2 className="font-display text-4xl md:text-5xl text-text-main dark:text-white mb-16">
                    Studio FAQ
                </h2>
                <div className="flex flex-col">
                    {faqs.map((faq, index) => (
                        <FAQItem key={index} question={faq.question} answer={faq.answer} />
                    ))}
                </div>
            </div>
        </section>
    );
};

export default FAQ;