import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from '@/components/ui/accordion';
import FadeUp from './FadeUp';
import { faqs } from './plan-data';

export default function FaqSection() {
    return (
        <section className="pf-section pf-section-tint">
            <div className="pf-container">
                <FadeUp className="mb-12 text-center">
                    <h2 className="pf-display text-foreground text-3xl font-bold">
                        Frequently asked questions
                    </h2>
                </FadeUp>
                <FadeUp className="mx-auto max-w-3xl">
                    <Accordion type="single" collapsible className="space-y-3">
                        {faqs.map((faq, i) => (
                            <AccordionItem
                                key={i}
                                value={`faq-${i}`}
                                className="pf-card overflow-hidden border-0 px-0"
                            >
                                <AccordionTrigger className="text-foreground hover:text-primary px-6 py-5 text-left text-sm font-semibold hover:no-underline">
                                    {faq.q}
                                </AccordionTrigger>
                                <AccordionContent className="text-muted-foreground px-6 pb-5 text-sm leading-relaxed">
                                    {faq.a}
                                </AccordionContent>
                            </AccordionItem>
                        ))}
                    </Accordion>
                </FadeUp>
            </div>
        </section>
    );
}