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

const FAQ = () => {
    const faqData = [
        {
            q: 'How can I create a meme video?',
            a: 'Use the video editor on top to start making your meme! Edit your caption, background and meme. Once satisfied, press the Export button to download your video!',
        },
        {
            q: 'What features are available now?',
            a: 'At the moment, All 200+ meme templates and 200+ backgrounds are completely free! We will be adding more memes and backgrounds to the library soon!',
        },
        {
            q: 'Why is video export slow for me?',
            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 video format do you export?',
            a: 'We export high-quality MP4 videos optimized for all social media platforms in 9:16 format, which is compatible for TikTok, Youtube Shorts, Instagram Reels, and more.',
        },
        {
            q: 'Is there a mobile app?',
            a: "Our web app is fully responsive and works perfectly on mobile devices. Do you want a mobile app? We'll see what can be done. Let us know in our Discord group.",
        },
        {
            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! Want a certain content? Let us know in our Discord group.',
        },
    ];

    return (
        <section className="">
            <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">Any questions?</h2>
                </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 text-balance">{faq.a}</AccordionContent>
                            </AccordionItem>
                        ))}
                    </Accordion>
                </div>
            </div>
        </section>
    );
};

export default FAQ;