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: "Is the online shop currently open?",
            answer: "Our online shop is temporarily closed while we focus on new collections and studio work. Follow us on Instagram or sign up for our newsletter to be the first to know when it reopens. For commissions, reach out directly at knuth.claudia@gmail.com."
        },
        {
            question: "Are your pieces dishwasher and microwave safe?",
            answer: "Yes! Our functional stoneware, including mugs, plates, and bowls, is high-fire kiln fired, 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 work is rooted in Corpus Christi, Texas, inspired by the colors and textures of the Gulf Coast."
        },
        {
            question: "Do you offer pottery classes in Corpus Christi?",
            answer: "Pottery classes and wheel-throwing workshops are available through the Art Center of Corpus Christi. Visit the Art Center for current schedules and registration."
        },
        {
            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, reach out directly at knuth.claudia@gmail.com."
        },
        {
            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;