@page "/components/accordion"

<PageTitle>Accordion — Lumeo</PageTitle>

<PageHeader Title="Accordion" Description="A vertically stacked set of interactive headings that each reveal a section of content." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Build FAQ sections where users can expand answers to individual questions.</li>
        <li>Organize long content into collapsible sections to reduce visual clutter.</li>
        <li>Create settings panels where each category expands to reveal its options.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Single (Default)" Code="@_singleCode">
        <Container MaxWidth="md" Center="false">
            <Accordion Type="Accordion.AccordionType.Single">
                <AccordionItem Value="item-1">
                    <AccordionTrigger>Is it accessible?</AccordionTrigger>
                    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
                </AccordionItem>
                <AccordionItem Value="item-2">
                    <AccordionTrigger>Is it styled?</AccordionTrigger>
                    <AccordionContent>Yes. It comes with default styles that match the other components' aesthetic.</AccordionContent>
                </AccordionItem>
                <AccordionItem Value="item-3">
                    <AccordionTrigger>Is it animated?</AccordionTrigger>
                    <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>
                </AccordionItem>
            </Accordion>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="FAQ" Code="@_faqCode">
        <Container MaxWidth="md" Center="false">
            <Accordion Type="Accordion.AccordionType.Single">
                <AccordionItem Value="q1">
                    <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>
                    <AccordionContent>We accept all major credit cards (Visa, Mastercard, Amex), PayPal, and bank transfers for enterprise plans.</AccordionContent>
                </AccordionItem>
                <AccordionItem Value="q2">
                    <AccordionTrigger>Can I cancel my subscription at any time?</AccordionTrigger>
                    <AccordionContent>Yes, you can cancel your subscription at any time. Your access continues until the end of your billing period.</AccordionContent>
                </AccordionItem>
                <AccordionItem Value="q3">
                    <AccordionTrigger>Do you offer a free trial?</AccordionTrigger>
                    <AccordionContent>We offer a 14-day free trial with no credit card required. Explore all Pro features before committing.</AccordionContent>
                </AccordionItem>
                <AccordionItem Value="q4">
                    <AccordionTrigger>How do I get support?</AccordionTrigger>
                    <AccordionContent>Support is available via email, live chat, and our community Discord. Pro and Enterprise plans include priority support.</AccordionContent>
                </AccordionItem>
            </Accordion>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Multiple" Code="@_multipleCode">
        <Container MaxWidth="md" Center="false">
            <Accordion Type="Accordion.AccordionType.Multiple">
                <AccordionItem Value="item-1">
                    <AccordionTrigger>What is Lumeo?</AccordionTrigger>
                    <AccordionContent>Lumeo is a Blazor component library inspired by shadcn/ui, built with Tailwind CSS.</AccordionContent>
                </AccordionItem>
                <AccordionItem Value="item-2">
                    <AccordionTrigger>Which .NET version?</AccordionTrigger>
                    <AccordionContent>Lumeo targets .NET 10 and uses Tailwind CSS v4 for styling.</AccordionContent>
                </AccordionItem>
                <AccordionItem Value="item-3">
                    <AccordionTrigger>Can I customize it?</AccordionTrigger>
                    <AccordionContent>Absolutely. All components accept a Class parameter for additional CSS classes.</AccordionContent>
                </AccordionItem>
            </Accordion>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Type — interactive" Code="@_typeInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live. <strong>Single</strong> collapses the previously open item; <strong>Multiple</strong> lets any number remain open at once.</Lumeo.Text>
            <Segmented @bind-Value="_accordionTypeSel" Options="_accordionTypeOptions" />
            <Container MaxWidth="md" Center="false">
                <Accordion Type="@_activeAccordionType">
                    <AccordionItem Value="a">
                        <AccordionTrigger>Is it accessible?</AccordionTrigger>
                        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
                    </AccordionItem>
                    <AccordionItem Value="b">
                        <AccordionTrigger>Is it styled?</AccordionTrigger>
                        <AccordionContent>Yes. It comes with default styles that match the other components' aesthetic.</AccordionContent>
                    </AccordionItem>
                    <AccordionItem Value="c">
                        <AccordionTrigger>Is it animated?</AccordionTrigger>
                        <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>
                    </AccordionItem>
                </Accordion>
            </Container>
        </Stack>
    </ComponentDemo>
</Stack>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>Enter</Kbd></TableCell><TableCell>Toggles the focused accordion item open or closed.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Space</Kbd></TableCell><TableCell>Toggles the focused accordion item open or closed.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowDown</Kbd></TableCell><TableCell>Moves focus to the next accordion trigger.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowUp</Kbd></TableCell><TableCell>Moves focus to the previous accordion trigger.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Home</Kbd></TableCell><TableCell>Moves focus to the first accordion trigger.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>End</Kbd></TableCell><TableCell>Moves focus to the last accordion trigger.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">Accordion</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Type</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">AccordionType</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Single</td>
                            <td class="p-3 text-muted-foreground">Controls whether one or multiple items can be open at a time. Values: Single, Multiple.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">DefaultValues</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;string&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Initial list of open item values.</td>
                        </tr>
</tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">AccordionItem</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Value</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">""</td>
                            <td class="p-3 text-muted-foreground">Unique identifier for this accordion item. Used to track open/closed state. Required.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">Disabled</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Disables this item so its trigger cannot toggle.</td>
                        </tr>
</tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">AccordionTrigger / AccordionContent</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary italic text-muted-foreground" colspan="4">AccordionTrigger is the clickable button that toggles the item. AccordionContent is the collapsible content panel. Both read their state from the parent AccordionItem context.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/collapsible" class="text-primary hover:underline">Collapsible</a> — A simpler expand/collapse for a single section of content.</li>
        <li><a href="/components/tabs" class="text-primary hover:underline">Tabs</a> — Use when content sections are mutually exclusive and always visible.</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — Use for non-collapsible grouped content with header and body sections.</li>
    </ul>
</div>

@code {
    // Interactive: Type
    private string _accordionTypeSel = "Single";
    private Accordion.AccordionType _activeAccordionType => Enum.Parse<Accordion.AccordionType>(_accordionTypeSel);
    private List<Segmented.SegmentedOption> _accordionTypeOptions = new()
    {
        new() { Label = "Single", Value = "Single" },
        new() { Label = "Multiple", Value = "Multiple" },
    };
    private string _typeInteractiveCode = @"<Segmented @bind-Value=""_accordionTypeSel"" Options=""_accordionTypeOptions"" />
<Accordion Type=""@_activeAccordionType"">
    <AccordionItem Value=""a"">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
    </AccordionItem>
    <AccordionItem Value=""b"">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>Yes. It comes with default styles.</AccordionContent>
    </AccordionItem>
    <AccordionItem Value=""c"">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>Yes. Animated by default.</AccordionContent>
    </AccordionItem>
</Accordion>

@code {
    private string _accordionTypeSel = ""Single"";
    private Accordion.AccordionType _activeAccordionType => Enum.Parse<Accordion.AccordionType>(_accordionTypeSel);
    private List<Segmented.SegmentedOption> _accordionTypeOptions = new()
    {
        new() { Label = ""Single"", Value = ""Single"" },
        new() { Label = ""Multiple"", Value = ""Multiple"" },
    };
}";

    private string _singleCode = @"<Accordion Type=""Accordion.AccordionType.Single"">
    <AccordionItem Value=""item-1"">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
    </AccordionItem>
    <AccordionItem Value=""item-2"">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>Yes. It comes with default styles that match the other components' aesthetic.</AccordionContent>
    </AccordionItem>
    <AccordionItem Value=""item-3"">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>Yes. It's animated by default, but you can disable it if you prefer.</AccordionContent>
    </AccordionItem>
</Accordion>";

    private string _faqCode = @"<Accordion Type=""Accordion.AccordionType.Single"">
    <AccordionItem Value=""q1"">
        <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>
        <AccordionContent>We accept all major credit cards, PayPal, and bank transfers.</AccordionContent>
    </AccordionItem>
    <AccordionItem Value=""q2"">
        <AccordionTrigger>Can I cancel my subscription at any time?</AccordionTrigger>
        <AccordionContent>Yes, cancel anytime. Access continues until end of billing period.</AccordionContent>
    </AccordionItem>
    <AccordionItem Value=""q3"">
        <AccordionTrigger>Do you offer a free trial?</AccordionTrigger>
        <AccordionContent>14-day free trial, no credit card required.</AccordionContent>
    </AccordionItem>
</Accordion>";

    private string _multipleCode = @"<Accordion Type=""Accordion.AccordionType.Multiple"">
    <AccordionItem Value=""item-1"">
        <AccordionTrigger>What is Lumeo?</AccordionTrigger>
        <AccordionContent>Lumeo is a Blazor component library inspired by shadcn/ui, built with Tailwind CSS.</AccordionContent>
    </AccordionItem>
    <AccordionItem Value=""item-2"">
        <AccordionTrigger>Which .NET version?</AccordionTrigger>
        <AccordionContent>Lumeo targets .NET 10 and uses Tailwind CSS v4 for styling.</AccordionContent>
    </AccordionItem>
    <AccordionItem Value=""item-3"">
        <AccordionTrigger>Can I customize it?</AccordionTrigger>
        <AccordionContent>Absolutely. All components accept a Class parameter for additional CSS classes.</AccordionContent>
    </AccordionItem>
</Accordion>";
}
