@page "/"

<PageTitle>Lumeo — The Blazor component library you'd actually want to ship</PageTitle>

<!-- ======================= HERO ======================= -->
<section class="relative overflow-hidden">
    <!-- Subtle grid pattern background -->
    <div class="absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--border))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--border))_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)] pointer-events-none opacity-50"></div>

    <Container MaxWidth="6xl" Class="relative px-4 py-24">
        <BlurFade DelayMs="0">
            <Stack Gap="6" Class="items-center text-center">
                <!-- Version badge -->
                <Lumeo.Link Href="docs/changelog" Class="no-underline group">
                    <Flex Inline="true" Align="center" Gap="2" Class="rounded-full border border-border/60 bg-background/80 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur-sm hover:border-primary/40 hover:text-foreground transition-colors">
                        <Badge Variant="Badge.BadgeVariant.Default" Class="h-4 px-1.5 text-[10px] leading-none">New</Badge>
                        <Lumeo.Text As="span">v2.2.2 — DataGrid Groupable columns now show a drag-to-group affordance on hover · group-panel placeholder localised</Lumeo.Text>
                        <DynamicIcon Name="ArrowRight" Class="h-3 w-3 transition-transform group-hover:translate-x-0.5" />
                    </Flex>
                </Lumeo.Link>

                <!-- Giant headline -->
                <Heading Level="1" Class="text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight leading-[1.02] max-w-4xl">
                    The Blazor library<br />
                    you'd actually want to <Lumeo.Text As="span" Class="text-primary">ship</Lumeo.Text>.
                </Heading>

                <!-- Subtitle. "~400 KB core" links to /docs/bundle-facts for the full
                     animated breakdown — keeps the hero short while detail stays one click away. -->
                <Lumeo.Text Size="lg" Color="muted" Class="max-w-2xl leading-relaxed">
                    145 components across a
                    <Lumeo.Link Href="/docs/bundle-facts" Class="font-semibold text-foreground decoration-dotted decoration-primary/60 underline underline-offset-4 hover:text-primary transition-colors no-underline">
                        ~400 KB core
                    </Lumeo.Link>
                    plus opt-in satellites.
                </Lumeo.Text>


                <!-- CTA row -->
                <Flex Gap="3" Wrap="true" Justify="center" Class="pt-2">
                    <Lumeo.Link Href="docs/introduction" Class="no-underline">
                        <ShimmerButton Size="Button.ButtonSize.Lg" Class="rounded-lg">
                            Get Started
                            <DynamicIcon Name="ArrowRight" Class="h-4 w-4" />
                        </ShimmerButton>
                    </Lumeo.Link>
                    <Lumeo.Link Href="components/button" Class="inline-flex h-10 items-center gap-2 justify-center rounded-lg border border-border/60 bg-background px-6 text-sm font-semibold hover:bg-accent hover:text-accent-foreground transition-colors no-underline">
                        <DynamicIcon Name="LayoutGrid" Class="h-4 w-4" />
                        Browse Components
                    </Lumeo.Link>
                </Flex>

                <!-- Install command wrapped in BorderBeam -->
                <Stack Align="center" Gap="2" Class="pt-4">
                    <BorderBeam DurationMs="6000" Class="inline-block">
                        <Flex Align="center" Gap="0" Class="rounded-lg border border-border/40 bg-muted/30 pl-4 pr-2 py-2 font-mono text-xs text-foreground backdrop-blur-sm">
                            <Lumeo.Text As="span" Color="muted" Class="mr-2 select-none">$</Lumeo.Text>
                            <Lumeo.Text As="span" Class="whitespace-nowrap">dotnet add package Lumeo</Lumeo.Text>
                            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm" Class="ml-3 inline-flex items-center justify-center h-8 w-8 p-0 rounded-md text-muted-foreground hover:text-foreground" OnClick="CopyInstall" aria-label="Copy install command">
                                @if (_installCopied)
                                {
                                    <DynamicIcon Name="Check" Class="h-4 w-4 text-primary" />
                                }
                                else
                                {
                                    <DynamicIcon Name="Copy" Class="h-4 w-4" />
                                }
                            </Button>
                        </Flex>
                    </BorderBeam>
                    <Lumeo.Text Size="xs" Color="muted">Core only — <Lumeo.Link Href="docs/introduction" Class="underline underline-offset-2 hover:text-foreground transition-colors">satellites</Lumeo.Link> ship separately.</Lumeo.Text>
                </Stack>
            </Stack>
        </BlurFade>
    </Container>
</section>

<Separator Class="opacity-30" />


<!-- ======================= SIZE COMPARISON BENTO ======================= -->
<section class="py-24">
    <Container MaxWidth="6xl" Class="px-4">
        <BlurFade DelayMs="0">
            <Stack Gap="3" Class="text-center mb-12">
                <Badge Variant="Badge.BadgeVariant.Outline" Class="mx-auto w-fit">The hook</Badge>
                <Heading Level="2" Class="text-3xl sm:text-4xl font-bold tracking-tight">A fraction of the size.</Heading>
                <Lumeo.Text Color="muted" Class="max-w-xl mx-auto">
                    Brotli-compressed assembly size — what an end user's browser actually downloads from your published app.
                </Lumeo.Text>
            </Stack>
        </BlurFade>

        <Bento Columns="4" Gap="Bento.BentoGap.Md">
            <!-- Central tile spans 2 cols and 2 rows — the size chart -->
            <BentoTile Span="2" RowSpan="2" Class="border-border/60 p-6">
                <Stack Gap="5" Class="h-full">
                    <Stack Gap="1">
                        <Flex Align="center" Gap="2">
                            <Heading Level="3" Class="text-2xl font-semibold tracking-tight">
                                145 components across 7 packages. <Lumeo.Text As="span" Class="text-primary">~400 KB core</Lumeo.Text>.
                            </Heading>
                        </Flex>
                        <Lumeo.Text Size="sm" Color="muted">Per-package breakdown — install only the satellites you use. Each row shows what that package adds to your app's bundle.</Lumeo.Text>
                    </Stack>

                    <Stack Gap="4" Class="flex-1 justify-center">
                        @foreach (var row in _sizeRows)
                        {
                            <Stack Gap="1.5">
                                <Flex Align="center" Justify="between" Class="text-sm">
                                    <Flex Align="center" Gap="2">
                                        <span class="h-2 w-2 rounded-full @(row.IsCore ? "bg-primary" : "bg-primary/50")"></span>
                                        <Lumeo.Text As="span" Weight="@(row.IsCore ? "semibold" : "medium")" Color="foreground">@row.Name</Lumeo.Text>
                                        <Lumeo.Text As="span" Size="xs" Color="muted">@row.Components</Lumeo.Text>
                                    </Flex>
                                    <Lumeo.Text As="span" Size="xs" Class="@(row.IsCore ? "font-mono text-primary font-semibold" : "font-mono text-muted-foreground")">@row.Size</Lumeo.Text>
                                </Flex>
                                <div class="relative h-2 rounded-md bg-muted/40 overflow-hidden">
                                    <div class="@(row.IsCore ? "bg-primary" : "bg-primary/50") h-full rounded-md transition-all"
                                         style="width: @(row.Percent)%;"></div>
                                </div>
                            </Stack>
                        }
                    </Stack>

                    <Flex Align="center" Gap="2" Class="pt-1 text-xs text-muted-foreground border-t border-border/40 pt-4">
                        <DynamicIcon Name="Info" Class="h-3.5 w-3.5" />
                        <Lumeo.Text As="span">Brotli-compressed assembly bytes (rc.40, 2026-05-13). NuGet <code class="text-foreground">.nupkg</code> now ~660 KB (rc.40 moved the shadcn-style CLI registry to the docs CDN — was ~1.35 MB through rc.39).</Lumeo.Text>
                    </Flex>
                </Stack>
            </BentoTile>

            <!-- 4 KPI tiles stacked on the right -->
            <BentoTile Class="border-border/60 p-5">
                <Stack Gap="2" Class="h-full">
                    <Flex Align="center" Gap="2">
                        <div class="flex h-7 w-7 items-center justify-center rounded-md bg-accent/40 text-primary">
                            <DynamicIcon Name="TestTube" Class="h-4 w-4" />
                        </div>
                        <Lumeo.Text Size="sm" Color="muted">Tests</Lumeo.Text>
                    </Flex>
                    <div class="text-3xl font-semibold tracking-tight text-foreground">
                        <NumberTicker Value="1727" DurationMs="1800" />
                    </div>
                    <Lumeo.Text Size="xs" Color="muted" Class="mt-auto">CI green, every commit.</Lumeo.Text>
                </Stack>
            </BentoTile>

            <BentoTile Class="border-border/60 p-5">
                <Stack Gap="2" Class="h-full">
                    <Flex Align="center" Gap="2">
                        <div class="flex h-7 w-7 items-center justify-center rounded-md bg-accent/40 text-primary">
                            <DynamicIcon Name="Languages" Class="h-4 w-4" />
                        </div>
                        <Lumeo.Text Size="sm" Color="muted">Locales</Lumeo.Text>
                    </Flex>
                    <div class="text-3xl font-semibold tracking-tight text-foreground">
                        <NumberTicker Value="14" DurationMs="1600" />
                    </div>
                    <Lumeo.Text Size="xs" Color="muted" Class="mt-auto">Bundled ILumeoLocalizer.</Lumeo.Text>
                </Stack>
            </BentoTile>

            <BentoTile Class="border-border/60 p-5">
                <Stack Gap="2" Class="h-full">
                    <Flex Align="center" Gap="2">
                        <div class="flex h-7 w-7 items-center justify-center rounded-md bg-accent/40 text-primary">
                            <DynamicIcon Name="Palette" Class="h-4 w-4" />
                        </div>
                        <Lumeo.Text Size="sm" Color="muted">Themes</Lumeo.Text>
                    </Flex>
                    <div class="text-3xl font-semibold tracking-tight text-foreground">
                        <NumberTicker Value="8" DurationMs="1400" />
                    </div>
                    <Lumeo.Text Size="xs" Color="muted" Class="mt-auto">CSS-variable presets.</Lumeo.Text>
                </Stack>
            </BentoTile>

            <BentoTile Class="border-border/60 p-5">
                <Stack Gap="2" Class="h-full">
                    <Flex Align="center" Gap="2">
                        <div class="flex h-7 w-7 items-center justify-center rounded-md bg-accent/40 text-primary">
                            <DynamicIcon Name="Accessibility" Class="h-4 w-4" />
                        </div>
                        <Lumeo.Text Size="sm" Color="muted">Compliance</Lumeo.Text>
                    </Flex>
                    <div class="text-3xl font-semibold tracking-tight text-foreground">WCAG AA</div>
                    <Lumeo.Text Size="xs" Color="muted" Class="mt-auto">Keyboard + ARIA built in.</Lumeo.Text>
                </Stack>
            </BentoTile>
        </Bento>
    </Container>
</section>


<!-- ======================= MARQUEE WALL (two rows, opposite directions) ======================= -->
<section class="py-14 border-y border-border/40 bg-gradient-to-b from-muted/30 via-muted/10 to-muted/30 overflow-hidden relative">
    @* Edge fades so pills dissolve in/out instead of hard-cutting at the container. *@
    <div class="pointer-events-none absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-background to-transparent z-10"></div>
    <div class="pointer-events-none absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-background to-transparent z-10"></div>

    <BlurFade DelayMs="0">
        <Stack Gap="4">
            <Marquee Speed="Marquee.MarqueeSpeed.Slow" PauseOnHover="true" Class="[--gap:1rem]">
                @foreach (var p in _marqueeRowA)
                {
                    <span class="mx-2 inline-flex items-center gap-2 rounded-lg border border-border/40 bg-card px-4 py-2 text-sm font-medium text-foreground whitespace-nowrap shadow-sm hover:border-primary/40 hover:shadow-md transition-all">
                        <DynamicIcon Name="@p.Icon" Class="h-4 w-4 text-primary shrink-0" />
                        @p.Label
                    </span>
                }
            </Marquee>

            <Marquee Speed="Marquee.MarqueeSpeed.Slow" PauseOnHover="true" Reverse="true" Class="[--gap:1rem]">
                @foreach (var p in _marqueeRowB)
                {
                    <span class="mx-2 inline-flex items-center gap-2 rounded-lg bg-primary/10 text-primary px-4 py-2 text-sm font-semibold whitespace-nowrap hover:bg-primary/15 transition-colors">
                        <DynamicIcon Name="@p.Icon" Class="h-4 w-4 shrink-0" />
                        @p.Label
                    </span>
                }
            </Marquee>
        </Stack>
    </BlurFade>
</section>


<!-- ======================= LIVE COMPONENT SHOWCASE ======================= -->
<section class="py-24">
    <Container MaxWidth="6xl" Class="px-4">
        <BlurFade DelayMs="0">
            <Stack Gap="3" Class="text-center mb-12">
                <Badge Variant="Badge.BadgeVariant.Outline" Class="mx-auto w-fit">Live</Badge>
                <Heading Level="2" Class="text-3xl sm:text-4xl font-bold tracking-tight">Real components. No screenshots.</Heading>
                <Lumeo.Text Color="muted" Class="max-w-xl mx-auto">
                    Every tile below is the actual Lumeo component rendered in your browser.
                </Lumeo.Text>
            </Stack>
        </BlurFade>

        <Bento Columns="4" Gap="Bento.BentoGap.Md">

            <!-- DataGrid — wide tile -->
            <BentoTile Span="2" Class="border-border/60 p-0 overflow-hidden">
                <div class="flex h-full flex-col">
                    <div class="flex-1 p-5 bg-muted/10">
                        <DataGrid TItem="Employee" Items="@_employees" PageSize="4" ShowPagination="false">
                            <DataGridColumnDef TItem="Employee" Title="Name" Field="Name" />
                            <DataGridColumnDef TItem="Employee" Title="Team" Field="Department" />
                            <DataGridColumnDef TItem="Employee" Title="Role" Field="Role" />
                            <DataGridColumnDef TItem="Employee" Title="Salary" Field="Salary" Format="C0" />
                        </DataGrid>
                    </div>
                    <Flex Align="center" Justify="between" Class="border-t border-border/40 px-4 py-2.5">
                        <Flex Align="center" Gap="2">
                            <DynamicIcon Name="Table2" Class="h-4 w-4 text-primary" />
                            <Lumeo.Text Size="xs" Weight="semibold">DataGrid</Lumeo.Text>
                        </Flex>
                        <Lumeo.Link Href="components/datagrid" Class="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 no-underline">
                            View docs <DynamicIcon Name="ArrowRight" Class="h-3 w-3" />
                        </Lumeo.Link>
                    </Flex>
                </div>
            </BentoTile>

            <!-- BarChart — wide tile -->
            <BentoTile Span="2" Class="border-border/60 p-0 overflow-hidden">
                <div class="flex h-full flex-col">
                    <div class="flex-1 p-4 bg-muted/10 min-h-[260px]">
                        <BarChart Categories="_chartCategories" Series="_chartSeries" Height="240px" />
                    </div>
                    <Flex Align="center" Justify="between" Class="border-t border-border/40 px-4 py-2.5">
                        <Flex Align="center" Gap="2">
                            <DynamicIcon Name="BarChart3" Class="h-4 w-4 text-primary" />
                            <Lumeo.Text Size="xs" Weight="semibold">Charts · powered by ECharts</Lumeo.Text>
                        </Flex>
                        <Lumeo.Link Href="components/charts/bar" Class="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 no-underline">
                            View docs <DynamicIcon Name="ArrowRight" Class="h-3 w-3" />
                        </Lumeo.Link>
                    </Flex>
                </div>
            </BentoTile>

            <!-- Form controls — spans 1 col, 2 rows -->
            <BentoTile RowSpan="2" Class="border-border/60 p-0 overflow-hidden">
                <div class="flex h-full flex-col">
                    <Stack Gap="4" Class="flex-1 justify-center p-6 bg-muted/10">
                        <Flex Align="center" Gap="3">
                            <Switch @bind-Checked="_switchOn" Label="Notifications" />
                            <Lumeo.Text Size="sm" Color="muted">@(_switchOn ? "Notifications on" : "Off")</Lumeo.Text>
                        </Flex>
                        <Stack Gap="2">
                            <Lumeo.Text Size="xs" Color="muted" id="lumeo-volume-label">Volume · @((int)_sliderVal)%</Lumeo.Text>
                            <Slider @bind-Value="_sliderVal" AriaLabel="Volume" />
                        </Stack>
                        <Flex Gap="3" Align="center">
                            <Checkbox @bind-Checked="_checkOn" AriaLabel="Subscribe" />
                            <Lumeo.Text Size="sm" Color="muted">Subscribe</Lumeo.Text>
                        </Flex>
                        <Flex Gap="2" Align="center">
                            <Toggle @bind-Pressed="_togglePressed" AriaLabel="Bold">
                                <DynamicIcon Name="Bold" Class="h-4 w-4" />
                            </Toggle>
                            <Toggle AriaLabel="Italic">
                                <DynamicIcon Name="Italic" Class="h-4 w-4" />
                            </Toggle>
                            <Toggle AriaLabel="Underline">
                                <DynamicIcon Name="Underline" Class="h-4 w-4" />
                            </Toggle>
                        </Flex>
                    </Stack>
                    <Flex Align="center" Justify="between" Class="border-t border-border/40 px-4 py-2.5">
                        <Flex Align="center" Gap="2">
                            <DynamicIcon Name="SlidersHorizontal" Class="h-4 w-4 text-primary" />
                            <Lumeo.Text Size="xs" Weight="semibold">Form controls</Lumeo.Text>
                        </Flex>
                        <Lumeo.Link Href="components/switch" Class="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 no-underline">
                            Docs <DynamicIcon Name="ArrowRight" Class="h-3 w-3" />
                        </Lumeo.Link>
                    </Flex>
                </div>
            </BentoTile>

            <!-- Kanban -->
            <BentoTile Span="3" Class="border-border/60 p-0 overflow-hidden">
                <div class="flex h-full flex-col">
                    <div class="flex-1 p-4 bg-muted/10">
                        <div class="grid grid-cols-3 gap-3">
                            <div class="rounded-lg border border-border/40 bg-background p-3">
                                <Flex Align="center" Justify="between" Class="mb-3">
                                    <Lumeo.Text Size="xs" Weight="semibold">To do</Lumeo.Text>
                                    <Badge Variant="Badge.BadgeVariant.Secondary" Class="h-5 px-1.5 text-[10px]">2</Badge>
                                </Flex>
                                <Stack Gap="2">
                                    <div class="rounded-md border border-border/40 bg-card p-2.5 text-xs">
                                        <Lumeo.Text Size="xs" Weight="medium">Design audit</Lumeo.Text>
                                        <Lumeo.Text Size="xs" Color="muted" Class="mt-0.5">Review spacing scale</Lumeo.Text>
                                    </div>
                                    <div class="rounded-md border border-border/40 bg-card p-2.5 text-xs">
                                        <Lumeo.Text Size="xs" Weight="medium">Write docs</Lumeo.Text>
                                    </div>
                                </Stack>
                            </div>
                            <div class="rounded-lg border border-border/40 bg-background p-3">
                                <Flex Align="center" Justify="between" Class="mb-3">
                                    <Lumeo.Text Size="xs" Weight="semibold">In progress</Lumeo.Text>
                                    <Badge Class="h-5 px-1.5 text-[10px]">1</Badge>
                                </Flex>
                                <Stack Gap="2">
                                    <div class="rounded-md border border-primary/40 bg-card p-2.5 text-xs ring-1 ring-primary/20">
                                        <Lumeo.Text Size="xs" Weight="medium">DataGrid export</Lumeo.Text>
                                        <Lumeo.Text Size="xs" Color="muted" Class="mt-0.5">CSV + Excel</Lumeo.Text>
                                    </div>
                                </Stack>
                            </div>
                            <div class="rounded-lg border border-border/40 bg-background p-3">
                                <Flex Align="center" Justify="between" Class="mb-3">
                                    <Lumeo.Text Size="xs" Weight="semibold">Done</Lumeo.Text>
                                    <Badge Variant="Badge.BadgeVariant.Success" Class="h-5 px-1.5 text-[10px]">3</Badge>
                                </Flex>
                                <Stack Gap="2">
                                    <div class="rounded-md border border-border/40 bg-card/60 p-2.5 text-xs opacity-75">
                                        <Lumeo.Text Size="xs" Weight="medium">Theme presets</Lumeo.Text>
                                    </div>
                                </Stack>
                            </div>
                        </div>
                    </div>
                    <Flex Align="center" Justify="between" Class="border-t border-border/40 px-4 py-2.5">
                        <Flex Align="center" Gap="2">
                            <DynamicIcon Name="LayoutList" Class="h-4 w-4 text-primary" />
                            <Lumeo.Text Size="xs" Weight="semibold">Kanban</Lumeo.Text>
                        </Flex>
                        <Lumeo.Link Href="components/kanban" Class="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 no-underline">
                            Docs <DynamicIcon Name="ArrowRight" Class="h-3 w-3" />
                        </Lumeo.Link>
                    </Flex>
                </div>
            </BentoTile>

            <!-- Buttons -->
            <BentoTile Span="2" Class="border-border/60 p-0 overflow-hidden">
                <div class="flex h-full flex-col">
                    <Stack Gap="3" Class="flex-1 items-center justify-center p-5 min-h-[160px] bg-muted/10">
                        <Flex Gap="2" Wrap="true" Justify="center">
                            <Button Size="Button.ButtonSize.Sm">Primary</Button>
                            <Button Variant="Button.ButtonVariant.Secondary" Size="Button.ButtonSize.Sm">Secondary</Button>
                            <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">Outline</Button>
                            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">Ghost</Button>
                            <Button Variant="Button.ButtonVariant.Destructive" Size="Button.ButtonSize.Sm">Destructive</Button>
                        </Flex>
                        <Flex Gap="2" Wrap="true" Align="center" Justify="center">
                            <Badge>Default</Badge>
                            <Badge Variant="Badge.BadgeVariant.Secondary">Secondary</Badge>
                            <Badge Variant="Badge.BadgeVariant.Outline">Outline</Badge>
                            <Badge Variant="Badge.BadgeVariant.Success">Success</Badge>
                            <Badge Variant="Badge.BadgeVariant.Warning">Warning</Badge>
                            <Badge Variant="Badge.BadgeVariant.Destructive">Error</Badge>
                        </Flex>
                    </Stack>
                    <Flex Align="center" Justify="between" Class="border-t border-border/40 px-4 py-2.5">
                        <Flex Align="center" Gap="2">
                            <DynamicIcon Name="SquareMousePointer" Class="h-4 w-4 text-primary" />
                            <Lumeo.Text Size="xs" Weight="semibold">Button &amp; Badge</Lumeo.Text>
                        </Flex>
                        <Lumeo.Link Href="components/button" Class="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 no-underline">
                            Docs <DynamicIcon Name="ArrowRight" Class="h-3 w-3" />
                        </Lumeo.Link>
                    </Flex>
                </div>
            </BentoTile>

            <!-- DatePicker + Dialog -->
            <BentoTile Span="2" Class="border-border/60 p-0 overflow-hidden">
                <div class="flex h-full flex-col">
                    <Stack Gap="3" Class="flex-1 items-center justify-center p-5 min-h-[160px] bg-muted/10">
                        <div class="w-full max-w-[240px]">
                            <DatePicker @bind-Value="_selectedDate" Placeholder="Pick a date" />
                        </div>
                        <Dialog @bind-Open="_showDialog">
                            <DialogTrigger>
                                <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">
                                    <DynamicIcon Name="MousePointerClick" Class="h-4 w-4" />
                                    Open dialog
                                </Button>
                            </DialogTrigger>
                            <DialogContent>
                                <DialogHeader>
                                    <DialogTitle>Welcome to Lumeo</DialogTitle>
                                    <DialogDescription>
                                        Fully accessible, keyboard-navigable, and rendered by the real Lumeo Dialog.
                                    </DialogDescription>
                                </DialogHeader>
                                <DialogFooter>
                                    <DialogClose>
                                        <Button Variant="Button.ButtonVariant.Outline">Cancel</Button>
                                    </DialogClose>
                                    <DialogClose>
                                        <Button>Got it</Button>
                                    </DialogClose>
                                </DialogFooter>
                            </DialogContent>
                        </Dialog>
                    </Stack>
                    <Flex Align="center" Justify="between" Class="border-t border-border/40 px-4 py-2.5">
                        <Flex Align="center" Gap="2">
                            <DynamicIcon Name="Calendar" Class="h-4 w-4 text-primary" />
                            <Lumeo.Text Size="xs" Weight="semibold">DatePicker &amp; Dialog</Lumeo.Text>
                        </Flex>
                        <Lumeo.Link Href="components/date-picker" Class="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 no-underline">
                            Docs <DynamicIcon Name="ArrowRight" Class="h-3 w-3" />
                        </Lumeo.Link>
                    </Flex>
                </div>
            </BentoTile>

        </Bento>
    </Container>
</section>

<Separator Class="opacity-30" />


<!-- ======================= WHY LUMEO ======================= -->
<section class="py-24">
    <Container MaxWidth="6xl" Class="px-4">
        <BlurFade DelayMs="0">
            <Stack Gap="3" Class="text-center mb-12">
                <Badge Variant="Badge.BadgeVariant.Outline" Class="mx-auto w-fit">Built-in</Badge>
                <Heading Level="2" Class="text-3xl sm:text-4xl font-bold tracking-tight">Everything you'd otherwise build.</Heading>
                <Lumeo.Text Color="muted" Class="max-w-xl mx-auto">
                    A complete kit for modern Blazor apps — batteries included, DX-obsessed.
                </Lumeo.Text>
            </Stack>
        </BlurFade>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            @for (var i = 0; i < _features.Length; i++)
            {
                var f = _features[i];
                var delay = 40 * i;
                <BlurFade DelayMs="@delay">
                    <Stack Gap="3" Class="group h-full rounded-xl border border-border/40 bg-card p-5 hover:border-primary/50 hover:-translate-y-0.5 hover:shadow-sm transition-all duration-200">
                        <Flex Align="center" Justify="center" Class="h-9 w-9 rounded-md bg-accent/40 text-primary shrink-0 group-hover:bg-primary/15 transition-colors">
                            <DynamicIcon Name="@f.Icon" Class="h-5 w-5" />
                        </Flex>
                        <Heading Level="3" Class="text-base font-semibold">@f.Title</Heading>
                        <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed flex-1">@f.Body</Lumeo.Text>
                    </Stack>
                </BlurFade>
            }
        </div>
    </Container>
</section>

<Separator Class="opacity-30" />


<!-- ======================= INSTALL PATHS ======================= -->
<section class="py-24">
    <Container MaxWidth="6xl" Class="px-4">
        <BlurFade DelayMs="0">
            <Stack Gap="3" Class="text-center mb-12">
                <Badge Variant="Badge.BadgeVariant.Outline" Class="mx-auto w-fit">Install</Badge>
                <Heading Level="2" Class="text-3xl sm:text-4xl font-bold tracking-tight">Three ways to start.</Heading>
                <Lumeo.Text Color="muted" Class="max-w-xl mx-auto">
                    Pick the path that fits your workflow. Every option ends in a shipping-ready project.
                </Lumeo.Text>
            </Stack>
        </BlurFade>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- NuGet -->
            <Stack Gap="3" Class="rounded-xl border border-border/40 bg-card p-5">
                <Flex Align="center" Gap="2">
                    <div class="flex h-8 w-8 items-center justify-center rounded-md bg-accent/40 text-primary">
                        <DynamicIcon Name="Package" Class="h-4 w-4" />
                    </div>
                    <Heading Level="3" Class="text-base font-semibold">NuGet</Heading>
                </Flex>
                <Lumeo.Text Size="sm" Color="muted" Class="flex-1">Core package (~400 KB brotli) is always required. Add satellite packages only for the heavy or motion components you use.</Lumeo.Text>
                <div class="rounded-lg overflow-hidden ring-1 ring-border/40" style="background-color: #0a0a0a;">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="border-color: rgba(255,255,255,0.08);">
                        <div class="flex items-center gap-1.5">
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ff5f56;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ffbd2e;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #27c93f;"></span>
                        </div>
                        <span class="font-mono text-[10px]" style="color: rgba(255,255,255,0.55);">nuget</span>
                    </div>
<pre class="font-mono text-[12px] leading-relaxed whitespace-pre overflow-x-auto px-4 py-3 m-0" style="color: #e4e4e7;"><span style="color: #64748b;"># core — always</span>
<span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">dotnet</span> add package <span style="color: #fbbf24;">Lumeo</span>
<span style="color: #64748b;"># satellites — only what you need</span>
<span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">dotnet</span> add package <span style="color: #fbbf24;">Lumeo.Charts</span>
<span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">dotnet</span> add package <span style="color: #fbbf24;">Lumeo.DataGrid</span>
builder.Services.<span style="color: #a78bfa;">AddLumeo</span>();</pre>
                </div>
            </Stack>

            <!-- CLI -->
            <Stack Gap="3" Class="rounded-xl border border-border/40 bg-card p-5">
                <Flex Align="center" Gap="2">
                    <div class="flex h-8 w-8 items-center justify-center rounded-md bg-accent/40 text-primary">
                        <DynamicIcon Name="TerminalSquare" Class="h-4 w-4" />
                    </div>
                    <Heading Level="3" Class="text-base font-semibold">Lumeo CLI</Heading>
                </Flex>
                <Lumeo.Text Size="sm" Color="muted" Class="flex-1">Scaffold, vendor components into your repo, and own the source.</Lumeo.Text>
                <div class="rounded-lg overflow-hidden ring-1 ring-border/40" style="background-color: #0a0a0a;">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="border-color: rgba(255,255,255,0.08);">
                        <div class="flex items-center gap-1.5">
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ff5f56;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ffbd2e;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #27c93f;"></span>
                        </div>
                        <span class="font-mono text-[10px]" style="color: rgba(255,255,255,0.55);">lumeo</span>
                    </div>
<pre class="font-mono text-[12px] leading-relaxed whitespace-pre overflow-x-auto px-4 py-3 m-0" style="color: #e4e4e7;"><span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">dotnet</span> tool install -g <span style="color: #fbbf24;">Lumeo.Cli</span>
<span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">lumeo</span> init</pre>
                </div>
            </Stack>

            <!-- Templates -->
            <Stack Gap="3" Class="rounded-xl border border-border/40 bg-card p-5">
                <Flex Align="center" Gap="2">
                    <div class="flex h-8 w-8 items-center justify-center rounded-md bg-accent/40 text-primary">
                        <DynamicIcon Name="FolderGit2" Class="h-4 w-4" />
                    </div>
                    <Heading Level="3" Class="text-base font-semibold">dotnet new templates</Heading>
                </Flex>
                <Lumeo.Text Size="sm" Color="muted" Class="flex-1">Opinionated starters for dashboards, SaaS, and marketing sites.</Lumeo.Text>
                <div class="rounded-lg overflow-hidden ring-1 ring-border/40" style="background-color: #0a0a0a;">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="border-color: rgba(255,255,255,0.08);">
                        <div class="flex items-center gap-1.5">
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ff5f56;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #ffbd2e;"></span>
                            <span class="h-2.5 w-2.5 rounded-full" style="background-color: #27c93f;"></span>
                        </div>
                        <span class="font-mono text-[10px]" style="color: rgba(255,255,255,0.55);">templates</span>
                    </div>
<pre class="font-mono text-[12px] leading-relaxed whitespace-pre overflow-x-auto px-4 py-3 m-0" style="color: #e4e4e7;"><span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">dotnet</span> new install <span style="color: #fbbf24;">Lumeo.Templates</span>
<span style="color: #27c93f;">$</span> <span style="color: #60a5fa;">dotnet</span> new lumeo-app</pre>
                </div>
            </Stack>
        </div>
    </Container>
</section>

<Separator Class="opacity-30" />


<!-- ======================= BUILT FOR ======================= -->
<section class="py-24 bg-muted/10">
    <Container MaxWidth="6xl" Class="px-4">
        <BlurFade DelayMs="0">
            <Stack Gap="3" Class="text-center mb-12">
                <Badge Variant="Badge.BadgeVariant.Outline" Class="mx-auto w-fit">Use cases</Badge>
                <Heading Level="2" Class="text-3xl sm:text-4xl font-bold tracking-tight">Built for.</Heading>
                <Lumeo.Text Color="muted" Class="max-w-xl mx-auto">
                    Six surfaces where Lumeo ships the primitives you'd otherwise spend weeks building.
                </Lumeo.Text>
            </Stack>
        </BlurFade>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach (var uc in _useCases)
            {
                <BlurFade DelayMs="40">
                    <Stack Gap="3" Class="group h-full rounded-xl border border-border/40 bg-card p-5 hover:border-primary/50 hover:-translate-y-0.5 hover:shadow-sm transition-all duration-200">
                        <Flex Align="center" Justify="center" Class="h-9 w-9 rounded-md bg-accent/40 text-primary shrink-0 group-hover:bg-primary/15 transition-colors">
                            <DynamicIcon Name="@uc.Icon" Class="h-5 w-5" />
                        </Flex>
                        <Heading Level="3" Class="text-base font-semibold">@uc.Title</Heading>
                        <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed flex-1">@uc.Body</Lumeo.Text>
                        <Flex Wrap="true" Gap="1" Class="pt-1">
                            @foreach (var chip in uc.Components)
                            {
                                <span class="inline-flex items-center rounded-md bg-muted/60 px-2 py-0.5 text-xs font-mono text-muted-foreground ring-1 ring-border/40">@chip</span>
                            }
                        </Flex>
                    </Stack>
                </BlurFade>
            }
        </div>
    </Container>
</section>


<Separator Class="opacity-30" />


<!-- ======================= WHAT LUMEO GETS RIGHT ======================= -->
<section class="py-24">
    <Container MaxWidth="6xl" Class="px-4">
        <BlurFade DelayMs="0">
            <Stack Gap="3" Class="text-center mb-12">
                <Badge Variant="Badge.BadgeVariant.Outline" Class="mx-auto w-fit">Principles</Badge>
                <Heading Level="2" Class="text-3xl sm:text-4xl font-bold tracking-tight">What Lumeo gets right.</Heading>
                <Lumeo.Text Color="muted" Class="max-w-xl mx-auto">
                    Design decisions baked in from day one — not bolted on after.
                </Lumeo.Text>
            </Stack>
        </BlurFade>

        <Bento Columns="3" Gap="Bento.BentoGap.Md">
            <BentoTile Span="1" Class="border-border/60 p-6">
                <Stack Gap="3">
                    <Flex Align="center" Justify="center" Class="h-9 w-9 rounded-md bg-accent/40 text-primary shrink-0">
                        <DynamicIcon Name="FolderGit2" Class="h-5 w-5" />
                    </Flex>
                    <Heading Level="3" Class="text-base font-semibold">Source ownership</Heading>
                    <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed">
                        <code class="rounded bg-muted px-1 py-0.5 text-xs font-mono text-foreground">lumeo add component-name</code> copies the source into your repo. You own it — read it, modify it, ship it.
                    </Lumeo.Text>
                </Stack>
            </BentoTile>

            <BentoTile Span="1" Class="border-border/60 p-6">
                <Stack Gap="3">
                    <Flex Align="center" Justify="center" Class="h-9 w-9 rounded-md bg-accent/40 text-primary shrink-0">
                        <DynamicIcon Name="Palette" Class="h-5 w-5" />
                    </Flex>
                    <Heading Level="3" Class="text-base font-semibold">Tailwind v4 native</Heading>
                    <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed">
                        CSS variable theming throughout. No SCSS pipeline, no theme provider component, no JS-driven style injection. Switch palettes with <code class="rounded bg-muted px-1 py-0.5 text-xs font-mono text-foreground">lumeo apply --preset</code>.
                    </Lumeo.Text>
                </Stack>
            </BentoTile>

            <BentoTile Span="1" Class="border-border/60 p-6">
                <Stack Gap="3">
                    <Flex Align="center" Justify="center" Class="h-9 w-9 rounded-md bg-accent/40 text-primary shrink-0">
                        <DynamicIcon Name="Shield" Class="h-5 w-5" />
                    </Flex>
                    <Heading Level="3" Class="text-base font-semibold">MIT. No tiers.</Heading>
                    <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed">
                        Commercial use, white-label products, redistribution — all covered. No community edition. No revenue cap. No seat licensing.
                    </Lumeo.Text>
                </Stack>
            </BentoTile>

            <BentoTile Span="1" Class="border-border/60 p-6">
                <Stack Gap="3">
                    <Flex Align="center" Justify="center" Class="h-9 w-9 rounded-md bg-accent/40 text-primary shrink-0">
                        <DynamicIcon Name="Package" Class="h-5 w-5" />
                    </Flex>
                    <Heading Level="3" Class="text-base font-semibold">Lockstep packages</Heading>
                    <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed">
                        Start with the ~400 KB core. Pull in Charts, DataGrid, Editor, Scheduler, Gantt, or Motion only when you need them. All six satellites version together.
                    </Lumeo.Text>
                </Stack>
            </BentoTile>

            <BentoTile Span="1" Class="border-border/60 p-6">
                <Stack Gap="3">
                    <Flex Align="center" Justify="center" Class="h-9 w-9 rounded-md bg-accent/40 text-primary shrink-0">
                        <DynamicIcon Name="Accessibility" Class="h-5 w-5" />
                    </Flex>
                    <Heading Level="3" Class="text-base font-semibold">Accessibility as a contract</Heading>
                    <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed">
                        Keyboard nav, focus traps, ARIA roles, and prefers-reduced-motion respected in every interactive component. Verified in CI — not a checklist item.
                    </Lumeo.Text>
                </Stack>
            </BentoTile>

            <BentoTile Span="1" Class="border-border/60 p-6">
                <Stack Gap="3">
                    <Flex Align="center" Justify="center" Class="h-9 w-9 rounded-md bg-accent/40 text-primary shrink-0">
                        <DynamicIcon Name="Zap" Class="h-5 w-5" />
                    </Flex>
                    <Heading Level="3" Class="text-base font-semibold">Shipping today</Heading>
                    <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed">
                        145 components, AI primitives, a full motion library, and a virtualized DataGrid with export — all live on NuGet. Not on a roadmap.
                    </Lumeo.Text>
                </Stack>
            </BentoTile>
        </Bento>
    </Container>
</section>


<!-- ======================= FINAL CTA WITH SPARKLES ======================= -->
<section class="py-24">
    <Container MaxWidth="4xl" Class="px-4">
        <div class="relative overflow-hidden rounded-2xl border border-border/60 bg-card p-10 sm:p-16">
            <Sparkles Count="18" Class="absolute inset-0 pointer-events-none">
                <span></span>
            </Sparkles>
            <div class="relative z-10">
                <BlurFade DelayMs="0">
                    <Stack Gap="5" Class="text-center items-center">
                        <Heading Level="2" Class="text-4xl sm:text-5xl font-bold tracking-tight max-w-2xl">
                            Start shipping today.
                        </Heading>
                        <Lumeo.Text Color="muted" Class="max-w-xl text-base leading-relaxed">
                            Used by teams who care about bundle size. MIT-licensed — build commercial products for free.
                        </Lumeo.Text>
                        <Flex Gap="3" Wrap="true" Justify="center" Class="pt-3">
                            <Lumeo.Link Href="docs/introduction" Class="no-underline">
                                <ShimmerButton Size="Button.ButtonSize.Lg" Class="rounded-lg">
                                    Get started
                                    <DynamicIcon Name="ArrowRight" Class="h-4 w-4" />
                                </ShimmerButton>
                            </Lumeo.Link>
                            <a href="https://github.com/Brain2k-0005/Lumeo" target="_blank" rel="noopener"
                               class="inline-flex h-10 items-center gap-2 justify-center rounded-lg border border-border/60 bg-background px-6 text-sm font-semibold text-foreground hover:bg-accent hover:text-accent-foreground transition-colors no-underline">
                                <svg viewBox="0 0 24 24" class="h-4 w-4" fill="currentColor" aria-hidden="true">
                                    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
                                </svg>
                                Star on GitHub
                            </a>
                        </Flex>
                    </Stack>
                </BlurFade>
            </div>
        </div>
    </Container>
</section>


<!-- ======================= FOOTER STRIP ======================= -->
<footer class="border-t border-border/40 py-8">
    <Container MaxWidth="6xl" Class="px-4">
        <Flex Align="center" Justify="between" Wrap="true" Gap="4">
            <Lumeo.Text Size="xs" Color="muted">© Lumeo 2026 · MIT licensed · built with Lumeo</Lumeo.Text>
            <Flex Align="center" Gap="4">
                <Lumeo.Link Href="https://github.com/Brain2k-0005/Lumeo" Class="text-muted-foreground hover:text-foreground transition-colors no-underline"
                            aria-label="Lumeo on GitHub" title="Lumeo on GitHub">
                    <svg viewBox="0 0 24 24" class="h-4 w-4" fill="currentColor" aria-hidden="true">
                        <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
                    </svg>
                </Lumeo.Link>
                <Lumeo.Link Href="https://www.nuget.org/packages/Lumeo" Class="text-xs text-muted-foreground hover:text-foreground transition-colors no-underline">NuGet</Lumeo.Link>
                <Lumeo.Link Href="docs/introduction" Class="text-xs text-muted-foreground hover:text-foreground transition-colors no-underline">Docs</Lumeo.Link>
            </Flex>
        </Flex>
    </Container>
</footer>

@code {
    private bool _switchOn = true;
    private double _sliderVal = 62;
    private bool _togglePressed;
    private bool _checkOn = true;
    private bool _installCopied;
    private bool _showDialog;
    private DateOnly? _selectedDate = DateOnly.FromDateTime(DateTime.Today);

    private record FeatureItem(string Icon, string Title, string Body);
    private record UseCaseItem(string Icon, string Title, string Body, string[] Components);
    private record SizeRow(string Name, string Components, string Size, double Percent, bool IsCore);
    private record Employee(string Name, string Department, string Role, double Salary);
    // Per-package breakdown (verified 2026-05-13, brotli-compressed assembly bytes from rc.38).
    // Brotli is what a Blazor WASM browser actually downloads — matches what Bundlephobia and
    // the .NET framework loader report. Bars normalize against Lumeo core (~400 KB → 100%).
    private readonly SizeRow[] _sizeRows =
    {
        new("Lumeo",           "85 components", "~400 KB", 100.0, true),
        new("Lumeo.Charts",    "30 components", "120 KB",   30.0, false),
        new("Lumeo.DataGrid",  "5 components",  "100 KB",   25.0, false),
        new("Lumeo.Editor",    "2 components",  "26 KB",     6.5, false),
        new("Lumeo.Motion",    "10 components", "18 KB",     4.5, false),
        new("Lumeo.Scheduler", "1 component",   "16 KB",     4.0, false),
        new("Lumeo.Gantt",     "1 component",   "12 KB",     3.0, false),
    };

    private record MarqueePill(string Icon, string Label);

    // Two rows, opposing directions, icon-anchored pills. Content-rich so the strip
    // reads as "here's everything that ships" rather than a sparse ornament.
    private readonly MarqueePill[] _marqueeRowA =
    {
        new("Zap",             "AI primitives"),
        new("Sparkles",        "Motion primitives"),
        new("Table2",          "DataGrid"),
        new("BarChart3",       "Charts"),
        new("Calendar",        "Scheduler"),
        new("LayoutList",      "Gantt"),
        new("Columns3",        "Kanban"),
        new("Layers",          "Blocks"),
        new("ClipboardList",   "Forms"),
        new("CalendarDays",    "DatePicker"),
        new("PenLine",         "RichText Editor"),
        new("TrendingUp",      "Sparklines"),
        new("LayoutDashboard", "Dashboard tiles"),
        new("MessageCircle",   "Chat primitives"),
        new("Send",            "Streaming"),
    };

    private readonly MarqueePill[] _marqueeRowB =
    {
        new("Moon",             "Dark mode"),
        new("Languages",        "RTL support"),
        new("Globe",            "14 locales"),
        new("Rocket",           "MCP server"),
        new("TerminalSquare",   "CLI"),
        new("FolderPlus",       "dotnet new templates"),
        new("Code2",            "Source generators"),
        new("Palette",          "Tailwind v4 ready"),
        new("Package",          "~400 KB core + opt-in satellites"),
        new("ShieldCheck",      "WCAG AA"),
        new("TestTube",         "1,732 tests"),
        new("Shield",           "MIT licensed"),
        new("Monitor",          "WASM + Server"),
        new("Github",           "Source-available"),
        new("Lightbulb",        "shadcn-style vendoring"),
    };

    private readonly FeatureItem[] _features =
    {
        new("Palette", "Tailwind CSS v4", "Built on CSS custom properties. Theme with variables, not config files. Full v4 API."),
        new("Accessibility", "Accessible by default", "ARIA, keyboard navigation, and focus management built in. WCAG AA across the library."),
        new("Moon", "Dark mode", "Automatic dark mode via CSS variable swaps. No dark: prefixes. Instant theme switching."),
        new("Copy", "Copy & paste", "Every component ships with inline code examples. Copy into your project and done."),
        new("ChartBar", "ECharts integration", "30+ chart components powered by Apache ECharts. AOT-friendly and fully themeable."),
        new("Package", "Single NuGet package", "One install. No peer dependencies. Works with Blazor WASM and Server, .NET 10+."),
        new("Zap", "AI primitives", "Streaming messages, tool calls, markdown rendering — drop-in building blocks for AI chat UIs."),
        new("Globe", "14 locales", "Bundled translations for 14 languages plus ILumeoLocalizer for per-string overrides."),
        new("MousePointerClick", "Motion", "Built-in animation primitives — BlurFade, BorderBeam, Marquee — with zero JS config."),
        new("ArrowLeftRight", "RTL support", "Every component renders correctly in right-to-left locales out of the box."),
        new("Code", "Source generator", "Compile-time helpers for theme registration, registries, and zero-reflection setup."),
        new("Blocks", "Register your own", "Extend the component registry with your own components and keep the same API surface.")
    };

    private readonly UseCaseItem[] _useCases =
    {
        new("Zap", "AI surfaces",
            "Chat UIs, agent dashboards, copilot sidebars. The primitives are shipped — drop them in and wire your model.",
            new[] { "PromptInput", "StreamingText", "AgentMessageList", "ToolCallCard", "ReasoningDisplay" }),
        new("LayoutDashboard", "Internal tools & admin dashboards",
            "Virtualized DataGrid with keyboard nav, sortable lists, accessible modals. Sane defaults cover the 80% case without custom CSS.",
            new[] { "DataGrid", "Sheet", "Dialog", "SortableList", "Kanban" }),
        new("Sparkles", "SaaS marketing pages",
            "Hero blocks, pricing tables, animated motion primitives, and Tailwind v4 theming. Looks polished out of the box.",
            new[] { "BlurFade", "BorderBeam", "Sparkles", "AnimatedBeam", "PricingTable" }),
        new("BookOpen", "Content & docs sites",
            "Tabs, accordions, callouts, code blocks, and a full motion library for delight that doesn't add bundle weight.",
            new[] { "Accordion", "Tabs", "Callout", "Code", "BlurFade" }),
        new("ClipboardList", "Forms-heavy line-of-business apps",
            "Full input library, FormField pattern, source-generated form bindings, and validation via stock EditContext + DataAnnotations.",
            new[] { "FormField", "DatePicker", "OtpInput", "FileUpload", "TagInput" }),
        new("Building2", "Multi-tenant white-label products",
            "8 built-in themes, CSS variable theming, and a palette swap CLI command. Each tenant gets a distinct look from a single codebase.",
            new[] { "ThemeProvider", "lumeo apply --preset", "8 themes", "CSS variables" }),
    };

    private readonly Employee[] _employees =
    {
        new("Ava Chen",       "Engineering", "Staff Eng.",  198000),
        new("Marcus Okoye",   "Design",      "Lead Designer", 162000),
        new("Priya Rao",      "Product",     "PM",          148000),
        new("Jonas Weber",    "Engineering", "Sr. Eng.",    172000)
    };

    private readonly List<string> _chartCategories = new() { "Jan", "Feb", "Mar", "Apr", "May", "Jun" };
    private readonly List<BarChart.ChartSeriesData> _chartSeries = new()
    {
        new() { Name = "Revenue",  Values = new() { 41200, 52400, 48700, 61300, 72800, 84100 } },
        new() { Name = "Expenses", Values = new() { 28400, 31200, 32700, 38100, 42500, 47300 } }
    };

    private async Task CopyInstall()
    {
        try { await JS.InvokeVoidAsync("navigator.clipboard.writeText", "dotnet add package Lumeo"); }
        catch (JSException) { }
        _installCopied = true;
        StateHasChanged();
        await Task.Delay(2000);
        _installCopied = false;
        StateHasChanged();
    }
}

@inject IJSRuntime JS
