Faq 12

"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: "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">
        <Badge variant="secondary" className="w-fit">
          Knowledge base
        </Badge>
        <div className="flex flex-col gap-2">
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl md:text-5xl">
            Grouped by topic
          </h1>
          <p className="text-muted-foreground">
            Account, support, and payments live in separate cards so you can
            scan faster.
          </p>
        </div>
      </header>

      <div className="flex flex-col gap-4">
        {categories.map((category) => (
          <div
            key={category.label}
            className="flex flex-col gap-4 rounded-xl bg-card p-4 shadow-elevated-sm"
          >
            <h2 className="text-sm font-medium text-muted-foreground">
              {category.label}
            </h2>
            <Accordion multiple className="gap-2">
              {category.items.map((item) => (
                <AccordionItem
                  key={item.value}
                  value={item.value}
                  className="border-0"
                >
                  <AccordionTrigger className="text-sm text-muted-foreground hover:text-foreground hover:no-underline aria-expanded:text-foreground">
                    {item.question}
                  </AccordionTrigger>
                  <AccordionContent className="flex flex-col gap-2 pb-2 text-pretty text-foreground">
                    <p className="text-sm">{item.answer}</p>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        ))}
      </div>

      <div className="mx-auto flex w-full max-w-3xl flex-col items-start gap-0.5 rounded-lg bg-muted p-2 text-sm text-muted-foreground md:flex-row">
        <span>Was your question not answered? You can reach us via email </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>
  )
}