Faq 20

"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"
import { FancyButton } from "@/components/ui/fancy-button"
import { ArrowUpRightIcon, MessageCircleIcon } 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-2xl 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">
        <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl md:text-5xl">
          Ask in chat
        </h1>
        <p className="max-w-lg text-muted-foreground">
          Questions look like messages you send. Answers appear as replies
          underneath.
        </p>
      </header>

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

      <Accordion multiple className="flex flex-col gap-4">
        {faqs.map((item) => (
          <AccordionItem
            value={item.value}
            key={item.value}
            className="group/msg border-0"
          >
            <AccordionTrigger className="p-0 text-muted-foreground hover:text-foreground hover:no-underline aria-expanded:text-foreground *:data-[slot=accordion-trigger-icon]:hidden">
              <div className="flex w-full justify-end">
                <div className="max-w-xs rounded-l-xl rounded-tr-xl bg-primary px-4 py-2 text-sm text-primary-foreground">
                  {item.question}
                </div>
              </div>
            </AccordionTrigger>
            <AccordionContent className="origin-top-left pt-2 transition-[opacity,transform] duration-300 ease-out data-ending-style:translate-x-2 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:translate-x-2 data-starting-style:scale-95 data-starting-style:opacity-0">
              <div className="flex justify-start">
                <div className="max-w-xs origin-top-left translate-x-2 scale-95 rounded-tl-xl rounded-r-xl bg-muted p-4 text-sm text-foreground opacity-0 transition-[opacity,transform] duration-300 ease-out group-data-open/msg:translate-x-0 group-data-open/msg:scale-100 group-data-open/msg:opacity-100 motion-reduce:translate-x-0 motion-reduce:scale-100 motion-reduce:opacity-100">
                  <div className="flex flex-col gap-1">
                    <p className="whitespace-pre-line">{item.answer}</p>
                    {item.date && (
                      <p className="text-xs opacity-70">{item.date}</p>
                    )}
                  </div>
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>

      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <FancyButton size="lg">
          <MessageCircleIcon  aria-hidden="true" data-icon="inline-start" />
          Live Chat
        </FancyButton>
        <Button variant="secondary" size="lg" className="group bg-muted">
          View all FAQs
          <ArrowUpRightIcon  aria-hidden="true" className="transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-primary motion-reduce:transform-none" data-icon="inline-end" />
        </Button>
      </div>
    </section>
  )
}