Accordion embedded within a Card

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "arrow-up-right") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
</script>

<template>
  <div class="mx-auto mb-auto w-full max-w-lg">
    <Card>
      <CardHeader>
        <CardTitle>Subscription & Billing</CardTitle>
        <CardDescription>Common questions about your account, plans, and payments</CardDescription>
      </CardHeader>
      <CardContent>
        <Accordion type="multiple" :default-value="['plans']">
          <AccordionItem value="plans">
            <AccordionTrigger>What subscription plans do you offer?</AccordionTrigger>
            <AccordionContent>
              <p>
                <a href="#" class="text-primary hover:underline">Annual billing is available</a> with a 20%
                discount. All plans include a 14-day free trial with no credit card required.
              </p>
              <Button size="sm" class="mt-4">
                View plans
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="size-4"
                >
                  <path d="M7 7h10v10" />
                  <path d="M7 17 17 7" />
                </svg>
              </Button>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="billing">
            <AccordionTrigger>How does billing work?</AccordionTrigger>
            <AccordionContent>
              <p>
                Billing occurs automatically at the start of each billing cycle. We accept all major credit cards,
                PayPal, and ACH transfers for enterprise customers.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="security">
            <AccordionTrigger>Is my data secure?</AccordionTrigger>
            <AccordionContent>
              <p>
                We take security seriously. All data is encrypted at rest using AES-256 and in transit via TLS 1.3.
                We perform regular third-party security audits and maintain SOC 2 Type II compliance.
              </p>
              <p>You can also enable multi-factor authentication (MFA) and single sign-on (SSO) for additional security.</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </CardContent>
    </Card>
  </div>
</template>