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

import { FAQAnimationWrapper, FAQItemWrapper } from "./client-faq"

const faqItems = [
  {
    id: "pricing",
    question: "What pricing plans do you offer?",
    answer:
      "We offer three flexible plans: Starter ($29/month), Professional ($99/month), and Enterprise (custom pricing). Each plan includes different feature sets and support levels to match your business needs.",
  },
  {
    id: "data-security",
    question: "How do you ensure data security?",
    answer:
      "We implement end-to-end encryption, ISO 27001 certified secure servers, and daily backups. All data is stored in GDPR-compliant data centers with regular security audits and penetration testing.",
  },
  {
    id: "integration",
    question: "Can I integrate your solution with my existing tools?",
    answer:
      "Yes! We provide a comprehensive REST API and webhooks that enable seamless integration with popular tools like Slack, Microsoft Teams, Salesforce, and many more. Our documentation includes detailed integration guides.",
  },
  {
    id: "support",
    question: "What kind of support do you provide?",
    answer:
      "We offer 24/7 priority support through chat, email, and phone for all paid plans. Our Enterprise customers also get a dedicated account manager and custom onboarding sessions.",
  },
  {
    id: "trial",
    question: "Is there a free trial available?",
    answer:
      "Yes, we offer a 14-day free trial with full access to all Professional plan features. No credit card required to start, and you can upgrade or cancel at any time.",
  },
]

export function FAQ() {
  return (
    <section
      className="bg-background relative isolate px-6 py-24 lg:px-8"
      aria-labelledby="faq-heading"
      aria-describedby="faq-description"
    >
      <div
        aria-hidden="true"
        className="absolute inset-x-0 top-48 -z-10 container mx-auto max-w-7xl transform-gpu overflow-hidden px-36 blur-3xl"
      >
        <svg
          className="text-primary h-full opacity-10"
          viewBox="0 0 188 99"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <circle
            cx="38.6201"
            cy="60.4951"
            r="37.5"
            transform="rotate(-178.473 38.6201 60.4951)"
            fill="currentColor"
          />
          <circle cx="173" cy="15" r="15" fill="currentColor" />
          <circle cx="155" cy="30" r="20" fill="currentColor" />
        </svg>
      </div>
      <div className="mx-auto max-w-7xl">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-4 text-center">
          <h2
            className="text-primary font-medium"
            aria-label="Section category"
          >
            FAQ
          </h2>
          <p
            id="faq-heading"
            className="text-foreground text-4xl text-[clamp(40px,10vw,44px)] leading-[1.2] font-bold tracking-tighter text-balance sm:text-5xl"
          >
            Frequently Asked Questions
          </p>
          <p
            id="faq-description"
            className="text-muted-foreground leading-7 font-normal text-pretty sm:max-w-[600px] sm:text-lg"
          >
            Welcome to our comprehensive FAQ section, where we address your most
            pressing questions about our automation platform.
          </p>
        </div>
        <FAQAnimationWrapper>
          <Accordion
            type="single"
            collapsible
            className="w-full"
            aria-label="Frequently asked questions accordion"
          >
            {faqItems.map((item, index) => (
              <FAQItemWrapper
                key={item.id}
                isLast={index === faqItems.length - 1}
              >
                <AccordionItem
                  value={item.id}
                  className="border-border bg-secondary rounded-xl border px-4"
                  aria-label={`Question ${index + 1}: ${item.question}`}
                >
                  <AccordionTrigger
                    className="text-base hover:no-underline"
                    aria-label={`Toggle answer for: ${item.question}`}
                  >
                    {item.question}
                  </AccordionTrigger>
                  <AccordionContent
                    className="text-muted-foreground"
                    aria-label={`Answer: ${item.answer}`}
                  >
                    {item.answer}
                  </AccordionContent>
                </AccordionItem>
              </FAQItemWrapper>
            ))}
          </Accordion>
        </FAQAnimationWrapper>
      </div>
    </section>
  )
}
Faq 01

Faq 02
