Nested accordion example with bordered items

<script setup lang="ts">
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

const nestedItems = [
  {
    value: "sub-item-1",
    trigger: "Technical Specifications",
    content: "Detailed technical specs including dimensions, weight, and power requirements.",
  },
  {
    value: "sub-item-2",
    trigger: "Compatibility",
    content: "List of supported devices and operating systems for this product.",
  },
]
</script>

<template>
  <div class="mx-auto mb-auto w-full max-w-lg">
    <Accordion type="single" collapsible default-value="details" class="space-y-2 border-none">
      <AccordionItem value="product-info" class="border-border rounded-lg border bg-transparent px-4">
        <AccordionTrigger class="items-center py-3 font-medium hover:no-underline">Product Overview</AccordionTrigger>
        <AccordionContent class="text-muted-foreground h-auto">
          This product is designed for high-performance enterprise environments requiring maximum reliability.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="details" class="border-border rounded-lg border bg-transparent px-4">
        <AccordionTrigger class="items-center py-3 font-medium hover:no-underline">Additional Details</AccordionTrigger>
        <AccordionContent class="text-muted-foreground h-auto">
          <Accordion type="single" collapsible default-value="sub-item-1" class="space-y-2 border-none">
            <AccordionItem
              v-for="subItem in nestedItems"
              :key="subItem.value"
              :value="subItem.value"
              class="border-border rounded-lg border bg-transparent px-3"
            >
              <AccordionTrigger class="text-foreground items-center py-3 font-medium hover:no-underline">
                {{ subItem.trigger }}
              </AccordionTrigger>
              <AccordionContent class="text-sm">{{ subItem.content }}</AccordionContent>
            </AccordionItem>
          </Accordion>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="shipping" class="border-border rounded-lg border bg-transparent px-4">
        <AccordionTrigger class="items-center py-3 font-medium hover:no-underline">Shipping & Returns</AccordionTrigger>
        <AccordionContent class="text-muted-foreground h-auto">
          Free standard shipping on orders over $500. 30-day return policy applies.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
</template>