import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from '@/components/ui/accordion';
import { Button } from '@/components/ui/button';
import Layout from '@/layouts/client/layout';
import { contact } from '@/routes';
import { Head, Link } from '@inertiajs/react';

export default function Faq() {
    return (
        <>
            <Layout>
                <Head title="FAQs" />
                <section className="mx-auto flex max-w-screen-2xl gap-32 px-12 py-8">
                    <div className="flex flex-col gap-4">
                        <div>
                            <h1 className="font-serif text-4xl font-medium tracking-tight">
                                Frequently Asked Questions
                            </h1>
                            <p>Any question, answered right here</p>
                        </div>
                        <Link href={contact()}>
                            <Button
                                className="cursor-pointer border border-primary font-serif ring-primary"
                                variant={'outline'}
                            >
                                Contact Now
                            </Button>
                        </Link>
                    </div>
                    <div className="w-full">
                        <Accordion
                            type="single"
                            collapsible
                            className="w-full"
                            defaultValue="item-1"
                        >
                            <AccordionItem value="item-1">
                                <AccordionTrigger className="w-full">
                                    Is it accessible?
                                </AccordionTrigger>
                                <AccordionContent>
                                    Yes. It adheres to the WAI-ARIA design
                                    pattern.
                                </AccordionContent>
                            </AccordionItem>{' '}
                            <AccordionItem value="item-2">
                                <AccordionTrigger className="w-full">
                                    Is it accessible?
                                </AccordionTrigger>
                                <AccordionContent>
                                    Yes. It adheres to the WAI-ARIA design
                                    pattern.
                                </AccordionContent>
                            </AccordionItem>{' '}
                            <AccordionItem value="item-3">
                                <AccordionTrigger className="w-full">
                                    Is it accessible?
                                </AccordionTrigger>
                                <AccordionContent>
                                    Yes. It adheres to the WAI-ARIA design
                                    pattern.
                                </AccordionContent>
                            </AccordionItem>{' '}
                            <AccordionItem value="item-4">
                                <AccordionTrigger className="w-full">
                                    Is it accessible?
                                </AccordionTrigger>
                                <AccordionContent>
                                    Yes. It adheres to the WAI-ARIA design
                                    pattern.
                                </AccordionContent>
                            </AccordionItem>
                        </Accordion>
                    </div>
                </section>
            </Layout>
        </>
    );
}
