Faq 6

"use client"

import Link from "next/link"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

type FaqItem = {
  value: string
  question: string
  answer: string
}

type FaqCategory = {
  label: string
  items: FaqItem[]
}

const categories: FaqCategory[] = [
  {
    label: "Account",
    items: [
      {
        value: "item-1",
        question: "How do I change my email address?",
        answer:
          "You can update your email address in your account settings. We'll send a verification link to confirm the change.",
      },
      {
        value: "item-2",
        question: "Can I update my payment details online?",
        answer:
          "Yes, you can update your payment information anytime in the billing section of your account settings.",
      },
      {
        value: "item-3",
        question: "What should I do if I forget my password?",
        answer:
          "Click 'Forgot Password' on the login page and follow the reset instructions sent to your email.",
      },
    ],
  },
  {
    label: "Support",
    items: [
      {
        value: "item-4",
        question: "How can I contact customer support?",
        answer:
          "You can reach our support team via live chat, email, or phone. We're available 24/7 to help.",
      },
      {
        value: "item-5",
        question: "Do you provide weekend assistance?",
        answer:
          "Yes, our support team is available 7 days a week, including weekends and holidays.",
      },
      {
        value: "item-6",
        question: "Is live chat support available?",
        answer:
          "Yes, live chat support is available during business hours. For after-hours issues, please email us.",
      },
    ],
  },
  {
    label: "Security",
    items: [
      {
        value: "item-9",
        question: "How secure is my data?",
        answer:
          "We use bank-level encryption and comply with industry standards. All data is encrypted at rest and in transit.",
      },
      {
        value: "item-10",
        question: "Do you have two-factor authentication?",
        answer:
          "Yes, we offer two-factor authentication for enhanced account security. You can enable it in your security settings.",
      },
      {
        value: "item-11",
        question: "How often do you conduct security audits?",
        answer:
          "We conduct comprehensive security audits quarterly and perform continuous monitoring to detect and prevent threats.",
      },
    ],
  },
  {
    label: "Payments",
    items: [
      {
        value: "item-7",
        question: "How long does it take to process a payment?",
        answer:
          "Most payments are processed within 1-2 business days depending on your payment method.",
      },
      {
        value: "item-8",
        question: "Are refunds handled automatically?",
        answer:
          "Yes, refunds are processed automatically and typically appear in your account within 3-5 business days.",
      },
    ],
  },
]

export function Faq() {
  return (
    <section
      aria-label="FAQ"
      className="mx-auto flex w-full max-w-3xl flex-col gap-8 text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <header className="flex flex-col gap-3 md:items-center md:text-center">
        <Badge variant="secondary" className="w-fit">
          Two columns
        </Badge>
        <div className="flex flex-col items-center gap-2">
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl md:text-5xl">
            A compact knowledge base
          </h1>
          <p className="max-w-xl text-muted-foreground md:text-center">
            Account, payments, security, and support sit side by side so you can
            compare topics.
          </p>
        </div>
      </header>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        {categories.map((category) => (
          <div key={category.label} className="flex flex-col gap-2">
            <h2 className="ml-1 text-sm font-medium text-muted-foreground">
              {category.label}
            </h2>
            <Accordion
              defaultValue={category.items
                .slice(0, 1)
                .map((item) => item.value)}
              className="gap-2"
            >
              {category.items.map((item) => (
                <AccordionItem
                  key={item.value}
                  value={item.value}
                  className="overflow-hidden rounded-lg border-0 bg-muted"
                >
                  <AccordionTrigger className="px-4 text-sm text-muted-foreground hover:no-underline aria-expanded:text-foreground">
                    {item.question}
                  </AccordionTrigger>
                  <AccordionContent className="flex flex-col gap-2 px-4 pb-2 text-pretty text-foreground">
                    <p className="text-sm">{item.answer}</p>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        ))}
      </div>

      <div className="flex flex-col items-start gap-0.5 text-sm text-muted-foreground md:flex-row md:items-center md:justify-center">
        <span>Still have questions? Email us at</span>
        <Button
          variant="link"
          className="h-auto p-0"
          nativeButton={false}
          role="link"
          render={<Link href="mailto:user@example.com" role="link" />}
        >
          user@example.com
        </Button>
      </div>
    </section>
  )
}