Faq 18

"use client"

import { Badge } from "@/components/ui/badge"

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

const faqs: FaqItem[] = [
  {
    value: "how-long-does-a-transfer-take",
    question: "How long does a transfer take?",
    answer:
      "Most domestic transfers clear in one or two business days. International is three to five, depending on the receiving bank.",
  },
  {
    value: "can-i-stop-a-transfer-after-i-send-it",
    question: "Can I stop a transfer after I send it?",
    answer:
      "If it is still pending, yes, open Activity and void it. Once the bank has it, you need a recall, which is not guaranteed.",
  },
  {
    value: "why-is-an-international-transfer-more",
    question: "Why is an international transfer more?",
    answer:
      "The fee is the correspondent bank, not a markup we add later. The quote you see before you confirm is the amount that leaves.",
  },
  {
    value: "do-weekends-count-as-business-days",
    question: "Do weekends count as business days?",
    answer:
      "No. Saturday and Sunday sit in the queue. A Friday send that misses the cutoff moves to Monday.",
  },
]

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 items-center gap-3 text-center">
        <Badge variant="secondary" className="w-fit">
          Split view
        </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">
            Ask on the left
          </h1>
          <p className="text-muted-foreground">
            The question sits in a quiet well. The answer sits beside it.
          </p>
        </div>
      </header>

      <div className="flex flex-col gap-3">
        {faqs.map((pair) => (
          <div
            key={pair.value}
            className="grid gap-3 md:grid-cols-2 md:items-stretch"
          >
            <p className="rounded-2xl bg-muted p-4 text-sm font-medium">
              {pair.question}
            </p>
            <p className="rounded-2xl bg-card p-4 text-sm text-muted-foreground shadow-elevated-xs">
              {pair.answer}
            </p>
          </div>
        ))}
      </div>
    </section>
  )
}