@page "/components/mega-menu"

<PageTitle>Mega Menu — Lumeo</PageTitle>

<PageHeader Title="Mega Menu" Description="A navigation bar with expandable mega panel dropdowns — supports multi-column layouts, grouped links, and horizontal or vertical orientations." />

<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>Large navigation panels with grouped links for complex site structures</li>
        <li>E-commerce category menus with multi-column product groupings</li>
        <li>Feature-rich headers that need to display many links organized by section</li>
        <li>Marketing sites or documentation portals with deep navigation hierarchies</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Mega Menu" Code="@_basicCode" OverflowVisible="true">
        <MegaMenu>
            <MegaMenuItem Label="Products">
                <MegaMenuPanel Columns="3">
                    <MegaMenuGroup Title="Design">
                        <MegaMenuLink Href="#" Title="Components" Description="Pre-built UI components" />
                        <MegaMenuLink Href="#" Title="Templates" Description="Starter page templates" />
                        <MegaMenuLink Href="#" Title="Icons" Description="Icon library browser" />
                    </MegaMenuGroup>
                    <MegaMenuGroup Title="Development">
                        <MegaMenuLink Href="#" Title="CLI" Description="Command-line tooling" />
                        <MegaMenuLink Href="#" Title="API Reference" Description="Complete API docs" />
                        <MegaMenuLink Href="#" Title="Changelog" Description="What's new in each version" />
                    </MegaMenuGroup>
                    <MegaMenuGroup Title="Resources">
                        <MegaMenuLink Href="#" Title="Tutorials" Description="Step-by-step guides" />
                        <MegaMenuLink Href="#" Title="Blog" Description="News and updates" />
                        <MegaMenuLink Href="#" Title="Community" Description="Forums and Discord" />
                    </MegaMenuGroup>
                </MegaMenuPanel>
            </MegaMenuItem>
            <MegaMenuItem Label="Solutions">
                <MegaMenuPanel Columns="2">
                    <MegaMenuGroup Title="By Role">
                        <MegaMenuLink Href="#" Title="Developers" Description="Tools for building fast" />
                        <MegaMenuLink Href="#" Title="Designers" Description="Design system resources" />
                        <MegaMenuLink Href="#" Title="Teams" Description="Collaboration features" />
                    </MegaMenuGroup>
                    <MegaMenuGroup Title="By Industry">
                        <MegaMenuLink Href="#" Title="Enterprise" Description="Large-scale deployments" />
                        <MegaMenuLink Href="#" Title="Startups" Description="Ship faster" />
                        <MegaMenuLink Href="#" Title="Agencies" Description="Client project tooling" />
                    </MegaMenuGroup>
                </MegaMenuPanel>
            </MegaMenuItem>
            <MegaMenuItem Label="Pricing" Href="#" />
            <MegaMenuItem Label="Blog" Href="#" />
        </MegaMenu>
    </ComponentDemo>

    <ComponentDemo Title="Single Column Panel" Code="@_singleCode" OverflowVisible="true">
        <MegaMenu>
            <MegaMenuItem Label="Company">
                <MegaMenuPanel Columns="1" FullWidth="false">
                    <MegaMenuGroup>
                        <MegaMenuLink Href="#" Title="About Us" Description="Our story and mission" />
                        <MegaMenuLink Href="#" Title="Careers" Description="Open positions" />
                        <MegaMenuLink Href="#" Title="Press" Description="Media kit and news" />
                        <MegaMenuLink Href="#" Title="Contact" Description="Get in touch" />
                    </MegaMenuGroup>
                </MegaMenuPanel>
            </MegaMenuItem>
            <MegaMenuItem Label="Docs" Href="#" />
        </MegaMenu>
    </ComponentDemo>

    <ComponentDemo Title="Orientation — interactive" Code="@_orientationInteractiveCode" OverflowVisible="true">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live. <strong>Horizontal</strong> arranges items in a row; <strong>Vertical</strong> stacks them in a column sidebar style.</Lumeo.Text>
            <Segmented @bind-Value="_megaMenuOrientationSel" Options="_megaMenuOrientationOptions" />
            <MegaMenu Orientation="@_activeMegaMenuOrientation">
                <MegaMenuItem Label="Products">
                    <MegaMenuPanel Columns="2">
                        <MegaMenuGroup Title="Design">
                            <MegaMenuLink Href="#" Title="Components" Description="Pre-built UI components" />
                            <MegaMenuLink Href="#" Title="Templates" Description="Starter page templates" />
                        </MegaMenuGroup>
                        <MegaMenuGroup Title="Development">
                            <MegaMenuLink Href="#" Title="CLI" Description="Command-line tooling" />
                            <MegaMenuLink Href="#" Title="API Reference" Description="Complete API docs" />
                        </MegaMenuGroup>
                    </MegaMenuPanel>
                </MegaMenuItem>
                <MegaMenuItem Label="Docs" Href="#" />
                <MegaMenuItem Label="Blog" Href="#" />
            </MegaMenu>
        </Stack>
    </ComponentDemo>
</Stack>

<!-- 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">MegaMenu</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">Orientation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">MegaMenuOrientation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Horizontal</td>
                            <td class="p-3 text-muted-foreground">Horizontal (row layout) or Vertical (column layout).</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
        <Stack>
            <Heading Level="3" Class="mb-3">MegaMenuItem</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">Label</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">The nav item label text.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Href</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">When set, renders as a plain link instead of a dropdown trigger.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ChildContent</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">MegaMenuPanel to show when hovering this item.</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">Disable the menu item.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">Icon</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">SvgIcon?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Optional Blazicons SVG rendered before the label.</td>
                        </tr>
</tbody>
                </table>
            </Stack>
        </Stack>
        <Stack>
            <Heading Level="3" Class="mb-3">MegaMenuPanel</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">FullWidth</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">true</td>
                            <td class="p-3 text-muted-foreground">Span the full width of the parent nav container.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Columns</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">int</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">4</td>
                            <td class="p-3 text-muted-foreground">Number of grid columns for the panel content.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
        <Stack>
            <Heading Level="3" Class="mb-3">MegaMenuLink</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">Title</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">Bold link text.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Description</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">Muted description text below the title.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Href</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">Navigation URL.</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">Disable this link.</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/navigation-menu" class="text-primary hover:underline">NavigationMenu</a> — Simpler navigation menu for standard site navigation</li>
        <li><a href="/components/menubar" class="text-primary hover:underline">Menubar</a> — Horizontal menu bar for application-style menus</li>
        <li><a href="/components/dropdown-menu" class="text-primary hover:underline">DropdownMenu</a> — Single-column dropdown for simpler menu needs</li>
    </ul>
</div>

@code {
    // Interactive: Orientation
    private string _megaMenuOrientationSel = "Horizontal";
    private MegaMenu.MegaMenuOrientation _activeMegaMenuOrientation => Enum.Parse<MegaMenu.MegaMenuOrientation>(_megaMenuOrientationSel);
    private List<Segmented.SegmentedOption> _megaMenuOrientationOptions = new()
    {
        new() { Label = "Horizontal", Value = "Horizontal" },
        new() { Label = "Vertical", Value = "Vertical" },
    };
    private string _orientationInteractiveCode = @"<Segmented @bind-Value=""_orientationSel"" Options=""_orientationOptions"" />
<MegaMenu Orientation=""@_activeMegaMenuOrientation"">
    <MegaMenuItem Label=""Products"">
        <MegaMenuPanel Columns=""2"">
            <MegaMenuGroup Title=""Design"">
                <MegaMenuLink Href=""#"" Title=""Components"" Description=""Pre-built UI components"" />
            </MegaMenuGroup>
            <MegaMenuGroup Title=""Development"">
                <MegaMenuLink Href=""#"" Title=""CLI"" Description=""Command-line tooling"" />
            </MegaMenuGroup>
        </MegaMenuPanel>
    </MegaMenuItem>
    <MegaMenuItem Label=""Docs"" Href=""#"" />
</MegaMenu>

@code {
    private string _orientationSel = ""Horizontal"";
    private MegaMenu.MegaMenuOrientation _activeMegaMenuOrientation =>
        Enum.Parse<MegaMenu.MegaMenuOrientation>(_orientationSel);
    private List<Segmented.SegmentedOption> _orientationOptions = new()
    {
        new() { Label = ""Horizontal"", Value = ""Horizontal"" },
        new() { Label = ""Vertical"", Value = ""Vertical"" },
    };
}";

    private string _basicCode = @"<MegaMenu>
    <MegaMenuItem Label=""Products"">
        <MegaMenuPanel Columns=""3"">
            <MegaMenuGroup Title=""Design"">
                <MegaMenuLink Href=""/components"" Title=""Components"" Description=""Pre-built UI components"" />
                <MegaMenuLink Href=""/templates"" Title=""Templates"" Description=""Starter templates"" />
            </MegaMenuGroup>
            <MegaMenuGroup Title=""Development"">
                <MegaMenuLink Href=""/docs"" Title=""Documentation"" Description=""Full API reference"" />
            </MegaMenuGroup>
        </MegaMenuPanel>
    </MegaMenuItem>
    <MegaMenuItem Label=""Pricing"" Href=""/pricing"" />
</MegaMenu>";

    private string _singleCode = @"<MegaMenu>
    <MegaMenuItem Label=""Company"">
        <MegaMenuPanel Columns=""1"" FullWidth=""false"">
            <MegaMenuGroup>
                <MegaMenuLink Href=""/about"" Title=""About Us"" />
                <MegaMenuLink Href=""/careers"" Title=""Careers"" />
            </MegaMenuGroup>
        </MegaMenuPanel>
    </MegaMenuItem>
</MegaMenu>";
}
