import { faqs } from "@/content/faq";
import { Section } from "@/components/layout/Section";
import { TopoProseSurface } from "@/components/layout/TopoProseSurface";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export function Faq() {
  return (
    <Section id="faq">
      <TopoProseSurface className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-bold">Frequently asked questions</h2>
      </TopoProseSurface>
      <TopoProseSurface className="mx-auto mt-10 max-w-2xl">
      <Accordion type="single" collapsible>
        {faqs.map((faq, i) => (
          <AccordionItem key={faq.id} value={faq.id}>
            <AccordionTrigger className="text-left">
              <span className="mr-3 text-[#ffb300]">{String(i + 1).padStart(2, "0")}.</span>
              {faq.question}
            </AccordionTrigger>
            <AccordionContent className="text-[#3d5248]">{faq.answer}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
      </TopoProseSurface>
    </Section>
  );
}