Accordion

import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/ui/accordion"
const faqs = [  {    q: "How are seats billed?",    a: "You pay for active seats at the start of each cycle. Seats added mid cycle are prorated to the day and appear on the next invoice.",  },  {    q: "Can I switch from monthly to annual billing?",    a: "Yes. Annual billing saves 18% and starts the day you switch. Unused time on the monthly plan is credited to your account.",  },  {    q: "What happens when a payment fails?",    a: "We retry three times over seven days and email the billing contacts each time. The workspace stays active until the last retry.",  },  {    q: "Do you offer invoicing by bank transfer?",    a: "Bank transfer is available on annual plans over $10,000. Contact billing@halden.io to set it up.",  },]
export default function AccordionDefault() {  return (    <Accordion defaultValue={["seats"]} className="max-w-lg">      {faqs.map((f, i) => (        <AccordionItem key={f.q} value={i === 0 ? "seats" : f.q}>          <AccordionTrigger>{f.q}</AccordionTrigger>          <AccordionContent>{f.a}</AccordionContent>        </AccordionItem>      ))}    </Accordion>  )}

import { DatabaseIcon, GlobeIcon, ShieldCheckIcon } from "lucide-react"
import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/components/ui/accordion"import { Badge } from "@/components/ui/badge"import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
const sections = [  {    value: "residency",    icon: GlobeIcon,    title: "Data residency",    meta: "EU (Frankfurt)",    body: "Customer data, backups and logs are stored in eu-central-1. Moving regions requires a migration window of about 2 hours.",  },  {    value: "retention",    icon: DatabaseIcon,    title: "Retention",    meta: "400 days",    body: "Events older than 400 days are deleted every night at 03:00 UTC. Exports you downloaded are not affected.",  },  {    value: "sso",    icon: ShieldCheckIcon,    title: "Single sign-on",    meta: "Okta",    body: "SAML is enforced for halden.io addresses. Guests outside the domain still sign in with email and a one time code.",  },]
export default function AccordionCard() {  return (    <Card className="w-full max-w-lg">      <CardHeader>        <CardTitle>Security and compliance</CardTitle>        <CardDescription>Workspace defaults set by your admins.</CardDescription>      </CardHeader>      <CardContent>        <Accordion multiple className="border-t">          {sections.map(({ value, icon: Icon, title, meta, body }) => (            <AccordionItem key={value} value={value}>              <AccordionTrigger>                <span className="flex flex-1 items-center gap-2.5">                  <Icon />                  {title}                </span>                <Badge size="sm" variant="secondary">                  {meta}                </Badge>              </AccordionTrigger>              <AccordionContent className="pl-6.5">{body}</AccordionContent>            </AccordionItem>          ))}        </Accordion>      </CardContent>    </Card>  )}