import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"
import { siteConfig } from "@/config/site"
export function FAQSection() {
return (
<section className="py-24 sm:py-32">
<div className="mx-auto max-w-4xl px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-section-title font-space-grotesk mb-4">
Frequently Asked Questions
</h2>
<p className="text-lg text-muted-foreground">
Everything you need to know about Refine Backlog
</p>
</div>
<Accordion type="single" collapsible className="space-y-4">
{siteConfig.faq.map((item, index) => (
<AccordionItem
key={index}
value={`item-${index}`}
className="border border-border/50 bg-card/30 backdrop-blur px-6 rounded-lg data-[state=open]:bg-card/50"
>
<AccordionTrigger className="text-left hover:no-underline hover:text-emerald-400 transition-colors">
{item.q}
</AccordionTrigger>
<AccordionContent className="text-muted-foreground leading-relaxed">
{item.a}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
<div className="text-center mt-12">
<p className="text-muted-foreground">
Still have questions?{" "}
<a
href="mailto:refinebacklog@gmail.com"
className="text-emerald-400 hover:underline"
>
Contact our support team
</a>
</p>
</div>
</div>
</section>
)
}
