Faq 13

"use client"

import { Badge } from "@/components/ui/badge"
import { FancyButton } from "@/components/ui/fancy-button"

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

const faqs: FaqItem[] = [
  {
    value: "1",
    question: "Can I cancel anytime?",
    answer:
      "Yes, you can cancel your subscription at any time. Your access will remain active until the billing cycle ends, and no additional charges will be applied.",
  },
  {
    value: "2",
    question: "Do you offer student discounts?",
    answer:
      "Yes, students receive a 50% discount on all plans. Verification is required with a valid enrollment document, and the discount is applied immediately.",
  },
  {
    value: "3",
    question: "Is my data kept secure?",
    answer:
      "Yes, all customer data is encrypted and stored safely. We follow strict compliance standards, with regular audits to keep your information protected.",
  },
  {
    value: "4",
    question: "Can I upgrade or downgrade my plan?",
    answer:
      "Yes. Switch plans anytime. Changes take effect immediately, and billing is prorated automatically.",
  },
  {
    value: "5",
    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.",
  },
  {
    value: "6",
    question: "How do I reach support?",
    answer:
      "Yes. Support is available around the clock by live chat and email, with typical replies in under two hours.",
  },
]

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">
          Snapshot
        </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">
            Six answers at a glance
          </h1>
          <p className="text-muted-foreground">
            Cancel, discounts, security, plans, onboarding, and how to reach us.
          </p>
        </div>
      </header>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        {faqs.map((faq) => (
          <div
            key={faq.value}
            className="flex gap-4 rounded-xl bg-card p-6 shadow-elevated-sm"
          >
            <span className="min-w-fit text-sm font-medium text-muted-foreground">
              {String(faq.value).padStart(2, "0")}
            </span>
            <div className="flex flex-col gap-1.5">
              <h2 className="text-sm font-medium text-foreground">
                {faq.question}
              </h2>
              <p className="text-sm text-muted-foreground">{faq.answer}</p>
            </div>
          </div>
        ))}
      </div>

      <div className="flex justify-start md:justify-center">
        <FancyButton size="lg">Browse the guides</FancyButton>
      </div>
    </section>
  )
}