import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';

const FAQ = () => {
    const faqData = [
        {
            q: 'How does the platform work?',
            a: 'Choose from 400+ free meme templates and backgrounds, customize with the video editor, and export as MP4. AI features coming soon!',
        },
        {
            q: "What's available now?",
            a: 'All 200+ meme templates and 200+ backgrounds are completely free! Create unlimited memes using our library.',
        },
        {
            q: 'Why is video export slow?',
            a: 'Video processing happens entirely in your browser using advanced web technology. Export speed depends on your video content complexity and device performance. High-end devices export quickly, while older/slower devices may take longer or even crash. If your phone is too slow, try using a faster device like a desktop computer for better performance.',
        },
        {
            q: 'What AI features are coming?',
            a: "Soon you'll be able to generate custom captions and backgrounds using AI. Enter any text prompt and get tailored content!",
        },
        {
            q: 'What can I do with the video editor?',
            a: 'Play/pause your meme, drag to position text, meme templates, and backgrounds anywhere on the canvas, then export as MP4.',
        },
        {
            q: 'What video format do you export?',
            a: 'We export high-quality MP4 videos optimized for all social media platforms in 9:16 format.',
        },
        {
            q: 'How will credits work?',
            a: 'Once launched, credits will unlock AI features for generating custom captions and backgrounds. All current features remain free!',
        },
        {
            q: 'Is there a mobile app?',
            a: 'Our web app is fully responsive and works perfectly on mobile devices. Create memes anywhere with the same features!',
        },
        {
            q: 'How often do you add new content?',
            a: 'We just started building this platform and will gradually add more meme templates and backgrounds over time, so everyone can continue using it for free with fresh content!',
        },
    ];

    return (
        <section className="bg-muted/30">
            <div className="mx-auto max-w-4xl space-y-10 px-4 sm:px-6 lg:px-8">
                <div className="text-center">
                    <h2 className="text-foreground mb-4 text-3xl font-bold sm:text-4xl lg:text-5xl">Frequently Asked Questions</h2>
                    <p className="text-muted-foreground text-lg">Everything you need to know about creating viral memes</p>
                </div>

                <div className="bg-background rounded-2xl border p-6 sm:p-8">
                    <Accordion type="single" collapsible className="w-full" defaultValue="item-1">
                        {faqData.map((faq, index) => (
                            <AccordionItem key={index} value={`item-${index + 1}`} className="border-b last:border-b-0">
                                <AccordionTrigger className="py-4 text-left font-medium hover:no-underline">{faq.q}</AccordionTrigger>
                                <AccordionContent className="text-muted-foreground pb-4 leading-relaxed">{faq.a}</AccordionContent>
                            </AccordionItem>
                        ))}
                    </Accordion>
                </div>
            </div>
        </section>
    );
};

export default FAQ;