Advanced accordion with custom icons and badges

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "settings"/"lock"/"circle-question-mark", он же
  "help-circle") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
</script>

<template>
  <div class="mx-auto mb-auto w-full max-w-lg">
    <Accordion type="single" collapsible default-value="account" class="space-y-3 border-0">
      <AccordionItem value="account" class="border-border bg-card rounded-lg border px-2 **:data-[slot=accordion-content]:p-0!">
        <AccordionTrigger class="items-center px-1 py-3 font-semibold hover:no-underline">
          <div class="flex items-center gap-3">
            <div class="bg-muted rounded-lg flex size-8 items-center justify-center">
              <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="text-muted-foreground size-4"
              >
                <path
                  d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
                />
                <circle cx="12" cy="12" r="3" />
              </svg>
            </div>
            <span>Account Settings</span>
            <Badge variant="success-light">New</Badge>
          </div>
        </AccordionTrigger>
        <AccordionContent class="text-muted-foreground px-2 pt-0 pb-4 leading-relaxed">
          <div class="pl-11">
            Manage your account preferences, security settings, and personal information. You can also configure
            two-factor authentication here.
          </div>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="privacy" class="border-border bg-card rounded-lg border px-2 **:data-[slot=accordion-content]:p-0!">
        <AccordionTrigger class="items-center px-1 py-3 font-semibold hover:no-underline">
          <div class="flex items-center gap-3">
            <div class="bg-muted rounded-lg flex size-8 items-center justify-center">
              <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="text-muted-foreground size-4"
              >
                <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
              </svg>
            </div>
            <span>Privacy & Security</span>
          </div>
        </AccordionTrigger>
        <AccordionContent class="text-muted-foreground px-2 pt-0 pb-4 leading-relaxed">
          <div class="pl-11">
            Control who can see your profile and what data we collect. View our latest security audits and
            transparency reports.
          </div>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="support" class="border-border bg-card rounded-lg border px-2 **:data-[slot=accordion-content]:p-0!">
        <AccordionTrigger class="items-center px-1 py-3 font-semibold hover:no-underline">
          <div class="flex items-center gap-3">
            <div class="bg-muted rounded-lg flex size-8 items-center justify-center">
              <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="text-muted-foreground size-4"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                <path d="M12 17h.01" />
              </svg>
            </div>
            <span>Help & Support</span>
          </div>
        </AccordionTrigger>
        <AccordionContent class="text-muted-foreground px-2 pt-0 pb-4 leading-relaxed">
          <div class="pl-11">
            Access our help center, community forums, and contact support. We're here to help you 24/7.
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
</template>