@page "/components/bento"

<PageTitle>Bento — Lumeo</PageTitle>

<PageHeader Title="Bento" Description="CSS-grid dashboard layout with shorthand tiles for composing analytics and overview pages." />

<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>Compose dashboards from a grid of mixed-size KPI, chart, and list tiles</li>
        <li>Build marketing "bento" feature grids (shadcn-style block showcases)</li>
        <li>Mix tall cards, wide cards, and small tiles in a single responsive grid</li>
        <li>Anywhere you would reach for Tremor's Grid + Card shorthand</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic 4-column bento" Code="@_basicCode">
        <Bento Columns="4" Gap="Bento.BentoGap.Md">
            <BentoTile Span="2" Title="Revenue" Description="Last 30 days">
                <div class="text-3xl font-semibold text-foreground">$48,290</div>
            </BentoTile>
            <BentoTile Title="New users">
                <div class="text-2xl font-semibold text-foreground">1,204</div>
            </BentoTile>
            <BentoTile Title="Churn">
                <div class="text-2xl font-semibold text-foreground">2.1%</div>
            </BentoTile>
            <BentoTile Span="2" RowSpan="1" Title="Latest activity" Description="Feed">
                <div class="text-sm text-muted-foreground">No events in the last hour.</div>
            </BentoTile>
            <BentoTile Title="Sessions">
                <div class="text-2xl font-semibold text-foreground">8,492</div>
            </BentoTile>
            <BentoTile Title="Avg. duration">
                <div class="text-2xl font-semibold text-foreground">4m 12s</div>
            </BentoTile>
        </Bento>
    </ComponentDemo>

    <ComponentDemo Title="Gap (interactive)" Code="@_gapInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Switch gap to see spacing between tiles change.</Lumeo.Text>
            <Segmented @bind-Value="_bentoGap">
                <SegmentedItem Value="Sm">Sm</SegmentedItem>
                <SegmentedItem Value="Md">Md</SegmentedItem>
                <SegmentedItem Value="Lg">Lg</SegmentedItem>
            </Segmented>
            <Bento Columns="4" Gap="@_bentoGapEnum">
                <BentoTile Title="Revenue"><div class="text-2xl font-semibold text-foreground">$48,290</div></BentoTile>
                <BentoTile Title="Users"><div class="text-2xl font-semibold text-foreground">12,402</div></BentoTile>
                <BentoTile Title="Sessions"><div class="text-2xl font-semibold text-foreground">8,492</div></BentoTile>
                <BentoTile Title="Churn"><div class="text-2xl font-semibold text-foreground">2.1%</div></BentoTile>
            </Bento>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Dashboard — KPI row + spark + wide tile" Code="@_dashboardCode">
        <Stack Gap="4">
            <Bento Columns="3" Gap="Bento.BentoGap.Md">
                <KpiCard Label="Revenue" Value="$48,290" Delta="12.3" />
                <KpiCard Label="Active users" Value="12,402" Delta="4.8" />
                <KpiCard Label="MRR" Value="$9,820" Delta="-1.2" DeltaPositive="KpiCard.KpiDeltaDirection.Good" />
            </Bento>
            <Bento Columns="3" Gap="Bento.BentoGap.Md">
                <SparkCard Label="Page views" Value="184k" Data="@_sparkA" />
                <SparkCard Label="Signups" Value="421" Data="@_sparkB" />
                <BentoTile Title="Traffic" Description="Last 7 days">
                    <div class="flex h-24 items-center justify-center rounded-md border border-dashed border-border/60 text-xs text-muted-foreground">
                        Chart placeholder
                    </div>
                </BentoTile>
            </Bento>
        </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">Bento</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">Columns</td><td class="p-3 font-mono text-xs">int</td><td class="p-3 font-mono text-xs">4</td><td class="p-3 text-muted-foreground">Number of grid columns. 2/3/4/6 use pre-compiled Tailwind utilities; other values fall back to inline grid-template-columns.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Gap</td><td class="p-3 font-mono text-xs">BentoGap</td><td class="p-3 font-mono text-xs">Md</td><td class="p-3 text-muted-foreground">Gap between tiles. Sm = 0.75rem, Md = 1rem, Lg = 1.5rem.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ChildContent</td><td class="p-3 font-mono text-xs">RenderFragment?</td><td class="p-3 font-mono text-xs">-</td><td class="p-3 text-muted-foreground">BentoTile children (or any grid items).</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">BentoTile</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">Span</td><td class="p-3 font-mono text-xs">int</td><td class="p-3 font-mono text-xs">1</td><td class="p-3 text-muted-foreground">Column span (grid-column: span N).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">RowSpan</td><td class="p-3 font-mono text-xs">int</td><td class="p-3 font-mono text-xs">1</td><td class="p-3 text-muted-foreground">Row span (grid-row: span N).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Title</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Optional header title.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Description</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Optional header description below the title.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">HeaderContent</td><td class="p-3 font-mono text-xs">RenderFragment?</td><td class="p-3 font-mono text-xs">-</td><td class="p-3 text-muted-foreground">Custom header slot; overrides Title/Description.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">FooterContent</td><td class="p-3 font-mono text-xs">RenderFragment?</td><td class="p-3 font-mono text-xs">-</td><td class="p-3 text-muted-foreground">Optional footer slot separated by a top border.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ChildContent</td><td class="p-3 font-mono text-xs">RenderFragment?</td><td class="p-3 font-mono text-xs">-</td><td class="p-3 text-muted-foreground">Main body content.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">KpiCard</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">string?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Metric label.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Value</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Pre-formatted value string.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Delta</td><td class="p-3 font-mono text-xs">double?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Optional delta value — rendered as a colored pill.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">DeltaFormat</td><td class="p-3 font-mono text-xs">KpiDeltaFormat</td><td class="p-3 font-mono text-xs">Percent</td><td class="p-3 text-muted-foreground">Percent or Absolute number formatting.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">DeltaPositive</td><td class="p-3 font-mono text-xs">KpiDeltaDirection</td><td class="p-3 font-mono text-xs">Good</td><td class="p-3 text-muted-foreground">Good = +is-green; Bad = +is-red (e.g., churn rate).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">IconContent</td><td class="p-3 font-mono text-xs">RenderFragment?</td><td class="p-3 font-mono text-xs">-</td><td class="p-3 text-muted-foreground">Optional icon slot shown before the label.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">SparkContent</td><td class="p-3 font-mono text-xs">RenderFragment?</td><td class="p-3 font-mono text-xs">-</td><td class="p-3 text-muted-foreground">Optional compact chart slot aligned right of the delta.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">SparkCard</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">string?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Card label.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Value</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Pre-formatted metric value.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Data</td><td class="p-3 font-mono text-xs">IEnumerable&lt;double&gt;?</td><td class="p-3 font-mono text-xs">null</td><td class="p-3 text-muted-foreground">Sparkline data — rendered as a normalized SVG polyline.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ChildContent</td><td class="p-3 font-mono text-xs">RenderFragment?</td><td class="p-3 font-mono text-xs">-</td><td class="p-3 text-muted-foreground">Fallback slot — use to drop in a Lumeo.Chart instead of the built-in sparkline.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">Delta</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">double</td><td class="p-3 font-mono text-xs">0</td><td class="p-3 text-muted-foreground">Numeric delta.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Format</td><td class="p-3 font-mono text-xs">DeltaFormat</td><td class="p-3 font-mono text-xs">Percent</td><td class="p-3 text-muted-foreground">Percent or Absolute formatting.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Positive</td><td class="p-3 font-mono text-xs">DeltaDirection</td><td class="p-3 font-mono text-xs">Good</td><td class="p-3 text-muted-foreground">Whether "up" is good (green) or bad (red).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ShowArrow</td><td class="p-3 font-mono text-xs">bool</td><td class="p-3 font-mono text-xs">true</td><td class="p-3 text-muted-foreground">Toggles the directional chevron icon.</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/dashboard-tiles" class="text-primary hover:underline">Dashboard Tiles</a> — KpiCard, SparkCard, and Delta examples</li>
        <li><a href="/components/grid" class="text-primary hover:underline">Grid</a> — Lower-level CSS grid primitive</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — Base container with header/content/footer</li>
    </ul>
</div>

@code {
    private string _bentoGap = "Md";
    private Bento.BentoGap _bentoGapEnum =>
        Enum.TryParse<Bento.BentoGap>(_bentoGap, out var v) ? v : Bento.BentoGap.Md;
    private readonly double[] _sparkA = { 12, 18, 9, 22, 28, 19, 34, 30, 42, 38, 46, 52 };
    private readonly double[] _sparkB = { 4, 7, 5, 9, 12, 11, 16, 14, 13, 17, 19, 22 };

    private string _gapInteractiveCode = @"<Segmented @bind-Value=""_gap"">
    <SegmentedItem Value=""@Bento.BentoGap.Sm"">Sm</SegmentedItem>
    <SegmentedItem Value=""@Bento.BentoGap.Md"">Md</SegmentedItem>
    <SegmentedItem Value=""@Bento.BentoGap.Lg"">Lg</SegmentedItem>
</Segmented>
<Bento Columns=""4"" Gap=""@_gap"">
    <BentoTile Title=""Revenue""><div class=""text-2xl font-semibold"">$48,290</div></BentoTile>
    <BentoTile Title=""Users""><div class=""text-2xl font-semibold"">12,402</div></BentoTile>
    <BentoTile Title=""Sessions""><div class=""text-2xl font-semibold"">8,492</div></BentoTile>
    <BentoTile Title=""Churn""><div class=""text-2xl font-semibold"">2.1%</div></BentoTile>
</Bento>

@code { private Bento.BentoGap _gap = Bento.BentoGap.Md; }";

    private string _basicCode = @"<Bento Columns=""4"" Gap=""Bento.BentoGap.Md"">
    <BentoTile Span=""2"" Title=""Revenue"" Description=""Last 30 days"">
        <div class=""text-3xl font-semibold text-foreground"">$48,290</div>
    </BentoTile>
    <BentoTile Title=""New users""><div class=""text-2xl font-semibold"">1,204</div></BentoTile>
    <BentoTile Title=""Churn""><div class=""text-2xl font-semibold"">2.1%</div></BentoTile>
    <BentoTile Span=""2"" Title=""Latest activity"" Description=""Feed"">
        <div class=""text-sm text-muted-foreground"">No events in the last hour.</div>
    </BentoTile>
    <BentoTile Title=""Sessions""><div class=""text-2xl font-semibold"">8,492</div></BentoTile>
    <BentoTile Title=""Avg. duration""><div class=""text-2xl font-semibold"">4m 12s</div></BentoTile>
</Bento>";

    private string _dashboardCode = @"<Bento Columns=""3"" Gap=""Bento.BentoGap.Md"">
    <KpiCard Label=""Revenue"" Value=""$48,290"" Delta=""12.3"" />
    <KpiCard Label=""Active users"" Value=""12,402"" Delta=""4.8"" />
    <KpiCard Label=""MRR"" Value=""$9,820"" Delta=""-1.2"" />
</Bento>
<Bento Columns=""3"" Gap=""Bento.BentoGap.Md"">
    <SparkCard Label=""Page views"" Value=""184k"" Data=""@sparkA"" />
    <SparkCard Label=""Signups"" Value=""421"" Data=""@sparkB"" />
    <BentoTile Title=""Traffic"" Description=""Last 7 days"">
        <Chart ... />
    </BentoTile>
</Bento>";
}
