Accordion items integrated within Frame and FramePanel

<!--
  Расхождение с апстримом: `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 { Frame, FramePanel } from "@/components/reui/frame"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
</script>

<template>
  <div class="mx-auto mb-auto w-full max-w-lg">
    <Frame stacked spacing="sm">
      <FramePanel>
        <Accordion type="single" collapsible default-value="account" class="border-none">
          <AccordionItem value="account" class="border-none bg-transparent **:data-[slot=accordion-content]:p-0!">
            <AccordionTrigger class="items-center px-1 py-1 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" class="ms-1">New</Badge>
              </div>
            </AccordionTrigger>
            <AccordionContent class="text-muted-foreground p-0 ps-1!">
              <div class="ps-11! pe-2">
                Manage your account preferences, security settings, and personal information. You can also
                configure two-factor authentication here.
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </FramePanel>
      <FramePanel>
        <Accordion type="single" collapsible default-value="account" class="border-none">
          <AccordionItem value="privacy" class="border-none bg-transparent **:data-[slot=accordion-content]:p-0!">
            <AccordionTrigger class="items-center px-1 py-1 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 p-0 ps-1!">
              <div class="ps-11! pe-2">
                Control who can see your profile and what data we collect. View our latest security audits and
                transparency reports.
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </FramePanel>
      <FramePanel>
        <Accordion type="single" collapsible default-value="account" class="border-none">
          <AccordionItem value="support" class="border-none bg-transparent **:data-[slot=accordion-content]:p-0!">
            <AccordionTrigger class="items-center px-1 py-1 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 p-0 ps-1!">
              <div class="ps-11! pe-2">
                Access our help center, community forums, and contact support. We're here to help you 24/7.
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </FramePanel>
    </Frame>
  </div>
</template>