Faq 8

"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"
import { FancyButton } from "@/components/ui/fancy-button"
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

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

const faqs: FaqItem[][] = [
  [
    {
      value: "item-1",
      question: "What countries do you support?",
      answer:
        "We support 45+ countries across North America, Europe, Asia, and Australia. The list on our site updates as we add regions.",
    },
    {
      value: "item-2",
      question: "How secure is my financial data?",
      answer:
        "Bank-level encryption, two-factor authentication, and compliance with PSD2, GDPR, and SOC 2. Data is encrypted at rest and in transit.",
    },
    {
      value: "item-3",
      question: "Is there a free trial available?",
      answer:
        "Yes. 14 days with full access. No card required. After the trial, pick the plan that fits.",
    },
  ],
  [
    {
      value: "item-4",
      question: "How long do transfers usually take?",
      answer:
        "Domestic transfers finish in 1-2 business days. International is 3-5 days depending on the destination bank.",
    },
    {
      value: "item-5",
      question: "Can I upgrade or downgrade my plan anytime?",
      answer:
        "Yes. Changes apply immediately and we prorate any difference on the next invoice.",
    },
    {
      value: "item-6",
      question: "Do you offer support in other languages?",
      answer:
        "English, Spanish, French, and German during business hours. More languages are on the roadmap.",
    },
  ],
]

export function Faq() {
  return (
    <section
      aria-label="FAQ"
      className="mx-auto flex w-full max-w-4xl 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 gap-2 md:items-center">
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl md:text-5xl">
            Scan both sides at once
          </h1>
          <p className="text-muted-foreground">
            Six common questions in a balanced grid. Open either column without
            swiping.
          </p>
        </div>
      </header>

      <h2 className="sr-only">Questions</h2>
      <div className="grid gap-4 md:grid-cols-2">
        {faqs.map((items) => (
          <Accordion
            key={items[0].value}
            defaultValue={items.slice(0, 1).map((item) => item.value)}
            className="gap-2"
          >
            {items.map((item) => (
              <AccordionItem
                key={item.value}
                value={item.value}
                className="overflow-hidden rounded-xl border-0 bg-muted"
              >
                <AccordionTrigger className="p-4 text-left hover:no-underline *:data-[slot=accordion-trigger-icon]:hidden">
                  <span className="font-medium">{item.question}</span>
                  <span className="ml-auto flex size-7 shrink-0 items-center justify-center">
                    <ChevronDownIcon  aria-hidden="true" className="size-3.5 text-muted-foreground group-aria-expanded/accordion-trigger:hidden" />
                    <ChevronUpIcon  aria-hidden="true" className="hidden size-3.5 text-muted-foreground group-aria-expanded/accordion-trigger:inline" />
                  </span>
                </AccordionTrigger>
                <AccordionContent className="px-4 pb-4 text-sm text-muted-foreground">
                  {item.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        ))}
      </div>

      <div className="flex flex-col items-start gap-3 md:items-center">
        <FancyButton size="lg">Talk to sales</FancyButton>
        <div className="flex flex-col items-start gap-0.5 text-sm text-muted-foreground md:items-center">
          <span>Need something specific? 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>
      </div>
    </section>
  )
}