Faq 2

"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Badge } from "@/components/ui/badge"
import { FancyButton } from "@/components/ui/fancy-button"
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

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

const faqs: FaqItem[] = [
  {
    value: "item-1",
    question: "What countries do you support?",
    answer:
      "We currently support operations in 45+ countries across North America, Europe, Asia, and Australia. We're continuously expanding our reach. Check our website for the most up-to-date list of supported countries and regions.",
    date: "10 Jan, 2025",
  },
  {
    value: "item-2",
    question: "How secure is my financial data?",
    answer:
      "We use bank-level encryption, two-factor authentication, and comply with major global standards such as PSD2, GDPR, and SOC 2.\n\nYour financial data is encrypted both at rest and in transit, and our systems are monitored 24/7 for unusual activity. We also undergo regular third-party audits to ensure the highest level of security and compliance.",
    date: "24 May, 2025",
  },
  {
    value: "item-3",
    question: "Is there a free trial available?",
    answer:
      "Yes! We offer a 14-day free trial with full access to all features. No credit card is required to start. After the trial period, you can choose a plan that best fits your needs.",
    date: "15 Dec, 2024",
  },
  {
    value: "item-4",
    question: "How long do transfers usually take?",
    answer:
      "Most domestic transfers are completed within 1-2 business days. International transfers typically take 3-5 business days depending on the destination country and banking system. Expedited transfers are available for an additional fee.",
    date: "8 Jan, 2025",
  },
  {
    value: "item-5",
    question: "Can I upgrade or downgrade my plan anytime?",
    answer: "Absolutely. We'll prorate any adjustments to your account.",
    date: "20 Nov, 2024",
  },
  {
    value: "item-6",
    question: "Do you offer customer support in other languages?",
    answer:
      "We provide support in English, Spanish, French, and German during business hours.",
  },
]

export function Faq() {
  return (
    <section
      aria-label="FAQ"
      className="mx-auto flex w-full max-w-xl flex-col gap-8 text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <header className="flex flex-col items-center gap-3 text-center">
        <Badge variant="secondary" className="w-fit">
          <span className="size-1.5 shrink-0 rounded-full bg-primary" />
          Need help?
        </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">
            Getting started
          </h1>
          <p className="max-w-md text-muted-foreground">
            The first answers most teams look up after they create a workspace.
          </p>
        </div>
      </header>

      <h2 className="sr-only">Questions</h2>

      <Accordion className="gap-2">
        {faqs.map((item) => (
          <AccordionItem
            key={item.value}
            value={item.value}
            className="overflow-hidden rounded-xl border-0 bg-muted"
          >
            <AccordionTrigger className="p-4 text-muted-foreground hover:text-foreground hover:no-underline aria-expanded:text-foreground *:data-[slot=accordion-trigger-icon]:hidden">
              <span>{item.question}</span>
              <ChevronDownIcon  aria-hidden="true" className="ml-auto size-4 shrink-0 text-muted-foreground group-aria-expanded/accordion-trigger:hidden" />
              <ChevronUpIcon  aria-hidden="true" className="ml-auto hidden size-4 shrink-0 text-muted-foreground group-aria-expanded/accordion-trigger:inline" />
            </AccordionTrigger>
            <AccordionContent className="flex flex-col gap-2 px-4 pb-4 text-pretty text-foreground">
              <p className="text-sm whitespace-pre-line">{item.answer}</p>
              {item.date && (
                <p className="text-xs text-muted-foreground">{item.date}</p>
              )}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>

      <div className="flex justify-center">
        <FancyButton size="lg">Ask a specialist</FancyButton>
      </div>
    </section>
  )
}