import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
 
interface FaqItem {
    id: string;
    question: string;
    answer: string;
}
 
const faq: FaqItem[] = [
    {
        id: '1',
        question: 'How do I create an account?',
        answer: "To create an account, click on the 'Sign Up' button in the top right corner of our homepage. Fill in your details, verify your email address, and you're all set to go!",
    },
    {
        id: '2',
        question: 'What payment methods do you accept?',
        answer: 'We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers. For enterprise customers, we also offer invoicing options.',
    },
    {
        id: '3',
        question: 'Can I cancel my subscription at any time?',
        answer: "Yes, you can cancel your subscription at any time. Go to your account settings, select 'Subscription', and click on 'Cancel Subscription'. Your access will continue until the end of your current billing period.",
    },
    {
        id: '4',
        question: 'How do I reset my password?',
        answer: "To reset your password, click on the 'Login' button, then select 'Forgot Password'. Enter your email address, and we'll send you instructions on how to create a new password.",
    },
    {
        id: '5',
        question: 'Is there a free trial available?',
        answer: "Yes, we offer a 14-day free trial for all new users. No credit card is required to start your trial. You'll get full access to all features during this period.",
    },
];
 
export default function FaqSection() {
    return (
        <section className="py-16 lg:py-32">
            <div className="mx-auto w-full max-w-2xl px-6 lg:max-w-7xl">
                <div className="mx-auto max-w-xl text-center">
                    <h2 className="text-3xl/tight font-semibold tracking-tight sm:text-4xl/tight">Frequently asked questions</h2>
                    <p className="text-muted-foreground mt-4 text-base/7 sm:text-lg/8">
                        Aliquet adipiscing lectus praesent cras sed quis lectus egestas.
                    </p>
                </div>
                <div className="mx-auto mt-12 max-w-3xl">
                    <Accordion type="single" defaultValue="1" collapsible className="-mt-2 w-full space-y-6">
                        {faq.map((item: FaqItem) => (
                            <AccordionItem key={item.id} value={item.id} className="border-b pb-2">
                                <AccordionTrigger className="hover:no-underline hover:opacity-75 lg:text-lg">{item.question}</AccordionTrigger>
                                <AccordionContent className="text-muted-foreground text-sm/6">{item.answer}</AccordionContent>
                            </AccordionItem>
                        ))}
                    </Accordion>
                </div>
            </div>
        </section>
    );
}