@page "/components/blur-fade"

<PageTitle>BlurFade — Lumeo</PageTitle>

<PageHeader Title="BlurFade"
            Description="Progressively unveils content with a blur-out + fade-in animation when it enters the viewport. Stagger sections by passing a delay." />

<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>Animate hero sections, feature cards, or media into view as the user scrolls.</li>
        <li>Stagger related elements by incrementing <code class="text-xs bg-muted px-1 py-0.5 rounded">DelayMs</code> across siblings for a cascade effect.</li>
        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">Once="false"</code> to re-animate elements every time they re-enter the viewport.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Staggered Cards" Code="@_staggerCode">
        <div class="relative w-full flex items-center justify-center">
            <button type="button" @onclick="Replay" class="@_replayClass" title="Replay animation">
                <Blazicon Svg="Lucide.RotateCcw" class="h-3.5 w-3.5" />
            </button>
            <div @key="@($"blurfade-{_key}")" class="grid grid-cols-1 sm:grid-cols-3 gap-4 w-full max-w-2xl">
                <BlurFade ForceHidden="true" DelayMs="0">
                    <Card Class="p-5 h-32 flex items-center justify-center text-sm">First</Card>
                </BlurFade>
                <BlurFade ForceHidden="true" DelayMs="120">
                    <Card Class="p-5 h-32 flex items-center justify-center text-sm">Second</Card>
                </BlurFade>
                <BlurFade ForceHidden="true" DelayMs="240">
                    <Card Class="p-5 h-32 flex items-center justify-center text-sm">Third</Card>
                </BlurFade>
            </div>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Custom Blur & Duration" Code="@_customCode">
        <div class="relative w-full flex items-center justify-center">
            <button type="button" @onclick="ReplayCustom" class="@_replayClass" title="Replay animation">
                <Blazicon Svg="Lucide.RotateCcw" class="h-3.5 w-3.5" />
            </button>
            <div @key="@($"blurfade-custom-{_customKey}")" class="flex flex-col gap-3 w-full max-w-md">
                <BlurFade ForceHidden="true" BlurPx="20" DurationMs="900" Yoffset="16" DelayMs="0">
                    <div class="rounded-lg border border-border/40 bg-card p-4 text-sm text-foreground">
                        Heavy blur, slow fade — great for modal-like reveals.
                    </div>
                </BlurFade>
                <BlurFade ForceHidden="true" BlurPx="4" DurationMs="300" Yoffset="4" DelayMs="150">
                    <div class="rounded-lg border border-border/40 bg-card p-4 text-sm text-foreground">
                        Subtle blur, fast fade — good for inline content updates.
                    </div>
                </BlurFade>
            </div>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Repeat on Re-entry (Once=false)" Code="@_onceCode">
        <div class="flex items-center justify-center py-2">
            <BlurFade ForceHidden="true" Once="false" DurationMs="700">
                <Badge Class="text-sm px-3 py-1">Animates every time it enters the viewport</Badge>
            </BlurFade>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Interactive: Delay & Blur Amount" Description="Adjust delay and blur amount, then hit Replay to re-trigger the animation." Code="@_interactiveBlurCode">
        <Stack Gap="3">
            <Flex Align="center" Gap="3" Wrap="true">
                <div class="flex flex-col gap-1 min-w-[220px]">
                    <Lumeo.Text Size="sm" Weight="medium">DelayMs: @_blurFadeDelay ms</Lumeo.Text>
                    <Slider @bind-Value="_blurFadeDelay" Min="0" Max="2000" Step="50" />
                </div>
                <div class="flex flex-col gap-1 min-w-[220px]">
                    <Lumeo.Text Size="sm" Weight="medium">BlurAmount: @_blurFadeBlur px</Lumeo.Text>
                    <Slider @bind-Value="_blurFadeBlur" Min="0" Max="20" Step="1" />
                </div>
                <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm" OnClick="ReplayInteractive">
                    <Blazicon Svg="Lucide.RotateCcw" class="h-3.5 w-3.5 mr-1" />
                    Replay
                </Button>
            </Flex>
            <div class="flex items-center justify-center py-4">
                <BlurFade @key="_blurFadeKey" ForceHidden="true"
                          DelayMs="@((int)_blurFadeDelay)"
                          BlurPx="@((int)_blurFadeBlur)">
                    <Card Class="p-6 text-center w-64">
                        <Lumeo.Text Weight="medium">Hello, Lumeo!</Lumeo.Text>
                        <Lumeo.Text Size="sm" Color="muted" Class="mt-1">BlurFade in action</Lumeo.Text>
                    </Card>
                </BlurFade>
            </div>
        </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">BlurFade</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">DelayMs</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">0</td>
                            <td class="p-3 text-muted-foreground">Delay before the animation starts after the element enters the viewport.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">DurationMs</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">600</td>
                            <td class="p-3 text-muted-foreground">CSS transition duration in milliseconds.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">BlurPx</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">8</td>
                            <td class="p-3 text-muted-foreground">Starting blur radius in pixels. Animates to 0 on entry.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Yoffset</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">8</td>
                            <td class="p-3 text-muted-foreground">Initial Y translate in pixels. Element slides up as it fades in.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Once</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">When true, only animates on first viewport entry. Set to false to re-animate on each entry.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ForceHidden</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">Always start in the hidden state, even if the element is already in viewport at mount. Default is prerender-friendly: above-the-fold content stays statically visible. Set to true for docs demos and Replay buttons that must always animate.</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">null</td>
                            <td class="p-3 text-muted-foreground">The content to animate in. Wrapped in a positioned div that receives the transition.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Class</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">null</td>
                            <td class="p-3 text-muted-foreground">Additional CSS classes merged onto the root element.</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/border-beam" class="text-primary hover:underline">BorderBeam</a> — Animated gradient border beam that highlights premium or featured cards.</li>
        <li><a href="/components/sparkles" class="text-primary hover:underline">Sparkles</a> — Decorative sparkle particle animation for badges and headings.</li>
        <li><a href="/components/motion" class="text-primary hover:underline">Motion</a> — Overview of all motion primitives in Lumeo.</li>
    </ul>
</div>

@code {
    private int _key;
    private int _customKey;

    private void Replay() => _key++;
    private void ReplayCustom() => _customKey++;

    private const string _replayClass =
        "absolute right-0 top-0 z-10 inline-flex h-7 w-7 items-center justify-center rounded-full border border-border/40 bg-background/80 text-muted-foreground shadow-sm backdrop-blur hover:text-foreground hover:bg-accent transition-colors";

    private const string _staggerCode = @"<BlurFade DelayMs=""0"">
    <Card Class=""p-5 h-32 flex items-center justify-center"">First</Card>
</BlurFade>
<BlurFade DelayMs=""120"">
    <Card Class=""p-5 h-32 flex items-center justify-center"">Second</Card>
</BlurFade>
<BlurFade DelayMs=""240"">
    <Card Class=""p-5 h-32 flex items-center justify-center"">Third</Card>
</BlurFade>";

    private const string _customCode = @"<BlurFade BlurPx=""20"" DurationMs=""900"" Yoffset=""16"">
    <div class=""rounded-lg border border-border/40 bg-card p-4 text-sm"">
        Heavy blur, slow fade.
    </div>
</BlurFade>
<BlurFade BlurPx=""4"" DurationMs=""300"" Yoffset=""4"" DelayMs=""150"">
    <div class=""rounded-lg border border-border/40 bg-card p-4 text-sm"">
        Subtle blur, fast fade.
    </div>
</BlurFade>";

    private const string _onceCode = @"<BlurFade Once=""false"" DurationMs=""700"">
    <Badge>Animates every time it enters the viewport</Badge>
</BlurFade>";

    private double _blurFadeDelay = 200;
    private double _blurFadeBlur = 8;
    private int _blurFadeKey;

    private void ReplayInteractive() => _blurFadeKey++;

    private const string _interactiveBlurCode = @"<BlurFade DelayMs=""200"" BlurPx=""8"">
    <Card Class=""p-6 text-center w-64"">
        <Lumeo.Text Weight=""medium"">Hello, Lumeo!</Lumeo.Text>
        <Lumeo.Text Size=""sm"" Color=""muted"" Class=""mt-1"">BlurFade in action</Lumeo.Text>
    </Card>
</BlurFade>";
}
