Faq 19

"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 { Icons } from "@/components/ui/icons"

type FaqItem = {
  value: string
  question: string
  answer: string
  media?: "muted" | "primary"
}

const faqs: FaqItem[] = [
  {
    value: "01",
    question: "Can I cancel anytime?",
    media: "muted" as const,
    answer:
      "Yes. You can cancel from billing at any time. Access stays active until the end of the cycle, and you will not be charged again.",
  },
  {
    value: "02",
    question: "Do you offer student discounts?",
    media: "primary" as const,
    answer:
      "Yes. Students get 50% off every plan. Verify with a current enrollment document and the discount applies immediately.",
  },
  {
    value: "03",
    question: "Is my data kept secure?",
    answer:
      "Yes. Data is encrypted in transit and at rest. We follow SOC 2 and GDPR, with regular third-party audits.",
  },
  {
    value: "04",
    question: "Can I upgrade or downgrade my plan?",
    answer:
      "Yes. Switch plans anytime. Changes take effect immediately, and billing is prorated automatically.",
  },
  {
    value: "05",
    question: "Do you provide onboarding support?",
    answer:
      "Yes. Every customer gets guided setup, interactive demos, and a shared checklist so the first publish is straightforward.",
  },
]

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 gap-3">
        <Badge variant="secondary" className="w-fit">
          Visual answers
        </Badge>
        <div className="flex flex-col gap-2">
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl md:text-5xl">
            Plans, security, and onboarding
          </h1>
          <p className="text-muted-foreground">
            A few questions include a preview so you can see what the product
            looks like.
          </p>
        </div>
      </header>

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

      <Accordion defaultValue={["01"]} className="gap-2">
        {faqs.map((item) => (
          <AccordionItem key={item.value} value={item.value}>
            <AccordionTrigger className="text-muted-foreground aria-expanded:text-foreground">
              {item.question}
            </AccordionTrigger>
            <AccordionContent className="flex flex-col gap-3 pb-3 text-pretty text-foreground">
              <p className="text-sm">{item.answer}</p>
              {item.media === "muted" ? (
                <div className="flex aspect-24/9 w-full items-center justify-center rounded-xl bg-muted">
                  <Icons.Logo
                    aria-hidden="true"
                    className="h-8 w-auto [&_path]:fill-foreground"
                  />
                </div>
              ) : null}
              {item.media === "primary" ? (
                <div className="flex aspect-24/9 w-full items-center justify-center rounded-xl bg-primary">
                  <Icons.Logo aria-hidden="true" className="h-8 w-auto" />
                </div>
              ) : null}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>

      <FancyButton size="lg" className="w-fit">
        Chat with us
      </FancyButton>
    </section>
  )
}