FAQ

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion"

const faqs = [
  {
    question: "Is there a free trial available?",
    answer:
      "Yes, we offer a 14-day free trial on all plans. No credit card required. You can explore every feature and decide which plan works best for your team before committing.",
  },
  {
    question: "Can I change my plan later?",
    answer:
      "Absolutely. You can upgrade, downgrade, or switch plans at any time from your account settings. Changes take effect at the start of your next billing cycle, and we'll prorate any differences.",
  },
  {
    question: "What payment methods do you accept?",
    answer:
      "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers for annual plans. Enterprise customers can also pay via invoice with net-30 terms.",
  },
  {
    question: "How does customer support work?",
    answer:
      "All plans include access to our help center and community forums. Pro plans get priority email support with a 4-hour response time. Enterprise plans include a dedicated account manager and 24/7 phone support.",
  },
  {
    question: "Can I cancel my subscription at any time?",
    answer:
      "Yes, you can cancel your subscription at any time with no penalty. Your account will remain active until the end of your current billing period. We also offer a 30-day money-back guarantee on all paid plans.",
  },
]

export default function FAQ01() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-2xl px-6">
        <h2 className="mb-10 text-center text-3xl font-bold tracking-tight text-foreground">
          Frequently Asked Questions
        </h2>
        <Accordion>
          {faqs.map((faq, index) => (
            <AccordionItem key={index}>
              <AccordionTrigger>{faq.question}</AccordionTrigger>
              <AccordionContent>
                <p>{faq.answer}</p>
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  )
}

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion"

const faqs = [
  {
    question: "How do I get started?",
    answer:
      "Sign up for a free account, choose a template, and start building in minutes. Our onboarding wizard will guide you through the setup process step by step.",
  },
  {
    question: "Is my data secure?",
    answer:
      "Security is our top priority. We use end-to-end encryption, conduct regular security audits, and are SOC 2 Type II certified. Your data is stored in geographically distributed data centers with 99.99% uptime.",
  },
  {
    question: "Do you offer team collaboration features?",
    answer:
      "Yes, all plans include real-time collaboration with role-based access controls, shared workspaces, commenting, and version history. Enterprise plans add SSO integration and audit logs.",
  },
  {
    question: "Can I integrate with my existing tools?",
    answer:
      "We offer 200+ native integrations with popular tools like Slack, GitHub, Jira, Figma, and Google Workspace. We also provide a REST API and webhooks for custom integrations.",
  },
  {
    question: "What happens when I reach my plan limits?",
    answer:
      "We'll notify you when you're approaching your limits. You can upgrade your plan at any time, or we'll gracefully handle overages without disrupting your workflow. No surprise charges.",
  },
]

export default function FAQ02() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-5xl px-6">
        <div className="grid gap-12 md:grid-cols-2">
          <div>
            <h2 className="text-3xl font-bold tracking-tight text-foreground">
              Frequently Asked Questions
            </h2>
            <p className="mt-4 text-muted-foreground">
              Everything you need to know about the product. Can&apos;t find
              what you&apos;re looking for? Feel free to{" "}
              <a href="#" className="text-primary underline underline-offset-4">
                contact our team
              </a>
              .
            </p>
          </div>
          <Accordion>
            {faqs.map((faq, index) => (
              <AccordionItem key={index}>
                <AccordionTrigger>{faq.question}</AccordionTrigger>
                <AccordionContent>
                  <p>{faq.answer}</p>
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  )
}