Accordion

"use client"

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

export default function AccordionDemo() {
  return (
    <Accordion defaultValue={["ats"]} className="max-w-lg">
      <AccordionItem value="ats">
        <AccordionTrigger>Is Kickresume ATS-friendly?</AccordionTrigger>
        <AccordionContent>
          Yes — every template is parsed cleanly by applicant tracking systems,
          so recruiters and their software read your resume correctly.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="export">
        <AccordionTrigger>Can I export to PDF?</AccordionTrigger>
        <AccordionContent>
          Export your resume to PDF or Word in one click, straight from the
          builder.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="ai">
        <AccordionTrigger>Does the AI writer help?</AccordionTrigger>
        <AccordionContent>
          It drafts tailored summaries and quantified bullet points based on the
          role you&apos;re targeting.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

"use client"

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

const items = [
  {
    value: "item-1",
    trigger: "How do I reset my password?",
    content:
      "Click 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset it. The link expires in 24 hours.",
  },
  {
    value: "item-2",
    trigger: "Can I change my subscription plan?",
    content:
      "Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes take effect on your next billing cycle.",
  },
  {
    value: "item-3",
    trigger: "What payment methods do you accept?",
    content:
      "We accept all major credit cards and PayPal. Every payment is processed securely through our payment partners.",
  },
]

export default function AccordionBasic() {
  return (
    <Accordion defaultValue={["item-1"]} className="max-w-lg">
      {items.map((item) => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionTrigger>{item.trigger}</AccordionTrigger>
          <AccordionContent>{item.content}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

"use client"

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

const items = [
  {
    value: "notifications",
    trigger: "Notification settings",
    content:
      "Choose how you hear from us. Enable email alerts for application updates or push notifications for job-match reminders.",
  },
  {
    value: "privacy",
    trigger: "Privacy & security",
    content:
      "Control your privacy and security preferences. Enable two-factor authentication, review active sessions, and manage which recruiters can see your profile. You can also download your data or delete your account at any time.",
  },
  {
    value: "billing",
    trigger: "Billing & subscription",
    content:
      "View your current plan, payment history, and upcoming invoices. Update your payment method, switch tiers, or cancel your subscription.",
  },
]

export default function AccordionMultiple() {
  return (
    <Accordion multiple className="max-w-lg" defaultValue={["notifications"]}>
      {items.map((item) => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionTrigger>{item.trigger}</AccordionTrigger>
          <AccordionContent>{item.content}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

"use client"

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

export default function AccordionDisabled() {
  return (
    <Accordion className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Can I access my account history?</AccordionTrigger>
        <AccordionContent>
          Yes, you can view your complete account history — every resume edit,
          plan change, and support ticket — in the Account History section of
          your dashboard.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2" disabled>
        <AccordionTrigger>Premium feature information</AccordionTrigger>
        <AccordionContent>
          This section covers premium features. Upgrade your plan to unlock this
          content.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>How do I update my email address?</AccordionTrigger>
        <AccordionContent>
          You can update your email address in your account settings.
          You&apos;ll receive a verification email at your new address to
          confirm the change.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

"use client"

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

const items = [
  {
    value: "billing",
    trigger: "How does billing work?",
    content:
      "We offer monthly and annual plans. Billing is charged at the start of each cycle, and you can cancel anytime. Every plan includes unlimited exports, template access, and priority support.",
  },
  {
    value: "security",
    trigger: "Is my data secure?",
    content:
      "Yes. We use end-to-end encryption and regular third-party security audits. All resume data is encrypted at rest and in transit using industry-standard protocols.",
  },
  {
    value: "integration",
    trigger: "What integrations do you support?",
    content:
      "Connect Kickresume to LinkedIn, Google Drive, and Dropbox to import your experience and sync your documents. You can also share a public link to any resume.",
  },
]

export default function AccordionBorders() {
  return (
    <Accordion className="max-w-lg rounded-lg border" defaultValue={["billing"]}>
      {items.map((item) => (
        <AccordionItem
          key={item.value}
          value={item.value}
          className="border-b px-4 last:border-b-0"
        >
          <AccordionTrigger>{item.trigger}</AccordionTrigger>
          <AccordionContent>{item.content}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

const items = [
  {
    value: "plans",
    trigger: "What subscription plans do you offer?",
    content:
      "Kickresume comes in three tiers: Free, Premium, and Teams. Each step up unlocks more templates, unlimited documents, the AI writer, and priority support.",
  },
  {
    value: "billing",
    trigger: "How does billing work?",
    content:
      "Billing happens automatically at the start of each cycle. We accept all major credit cards and PayPal, and you'll receive an invoice by email after every payment.",
  },
  {
    value: "cancel",
    trigger: "How do I cancel my subscription?",
    content:
      "You can cancel anytime from your account settings — no fees or penalties. Your access continues until the end of the current billing period.",
  },
]

export default function AccordionCard() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Subscription & billing</CardTitle>
        <CardDescription>
          Common questions about your account, plans, payments and
          cancellations.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Accordion defaultValue={["plans"]}>
          {items.map((item) => (
            <AccordionItem key={item.value} value={item.value}>
              <AccordionTrigger>{item.trigger}</AccordionTrigger>
              <AccordionContent>{item.content}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </CardContent>
    </Card>
  )
}