@page "/components/text-reveal"

<PageTitle>TextReveal — Lumeo</PageTitle>

<PageHeader Title="TextReveal" Description="Word-by-word reveal animation on scroll." />

<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>Create engaging hero headings or testimonial quotes that animate as the user scrolls into view.</li>
        <li>Draw attention to a key value proposition in a long-form landing page.</li>
        <li>Control the reveal pace with <code class="text-xs bg-muted px-1 py-0.5 rounded">Stagger</code> (ms between words) and <code class="text-xs bg-muted px-1 py-0.5 rounded">Threshold</code> (scroll visibility fraction).</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default Reveal" Code="@_defaultCode">
        <div class="py-6">
            <TextReveal Text="Build beautiful Blazor UIs faster than ever before." Class="text-2xl font-semibold" />
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Fast Stagger" Code="@_fastCode">
        <div class="py-6">
            <TextReveal Text="Every word fades in at lightning speed with Stagger set to 40ms." Stagger="40" Class="text-xl font-medium" />
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Slow Stagger" Code="@_slowCode">
        <div class="py-6">
            <TextReveal Text="Each word takes its time revealing the message one by one." Stagger="180" Class="text-xl font-medium" />
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Hero Heading" Code="@_heroCode">
        <div class="py-10 text-center">
            <TextReveal Text="The Blazor component library designed for modern applications."
                        Class="text-3xl font-bold leading-tight" Stagger="80" />
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Threshold (interactive)" Description="Drag the slider to change how far into view the text must scroll before the reveal begins. A higher value means more of the element must be visible." Code="@_thresholdCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Threshold = @((_textRevealThreshold / 100.0).ToString("F2")) — scroll the text into view to trigger the reveal. Use the Replay button after changing the threshold.</Lumeo.Text>
            <Slider @bind-Value="_textRevealThreshold" Min="0" Max="100" Step="5" ShowTooltip="true"
                    FormatTooltip="@(v => $"{(int)v}%")" />
            <div style="height: 220px; overflow-y: scroll; border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem;">
                <div style="height: 180px;" />
                <div @key="@($"threshold-{_textRevealThresholdKey}")">
                    <TextReveal Text="This sentence reveals only when the right fraction of it enters the viewport."
                                Threshold="@(_textRevealThreshold / 100.0)"
                                Class="text-xl font-semibold" />
                </div>
                <div style="height: 80px;" />
            </div>
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm"
                    OnClick="@(() => _textRevealThresholdKey++)">
                <DynamicIcon Name="RotateCcw" Class="h-3.5 w-3.5 mr-1.5" /> Replay
            </Button>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Stagger Speed (interactive)">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Adjust the stagger interval (ms between words). Scroll down to see the reveal — or reload the demo.</Lumeo.Text>
            <Slider @bind-Value="_revealStagger" Min="20" Max="300" Step="10" ShowTooltip="true"
                    FormatTooltip="@(v => $"{(int)v} ms")" />
            <Lumeo.Text Size="xs" Color="muted">Stagger = @((int)_revealStagger) ms</Lumeo.Text>
            <div @key="@($"reveal-{_revealKey}")" class="py-6">
                <TextReveal Text="Each word waits just a little before it appears on the page."
                            Stagger="@((int)_revealStagger)"
                            Class="text-xl font-semibold" />
            </div>
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm"
                    OnClick="@(() => _revealKey++)">
                <DynamicIcon Name="RotateCcw" Class="h-3.5 w-3.5 mr-1.5" /> Replay
            </Button>
        </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">TextReveal</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">Text</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 text to animate. Split on whitespace into individual word spans.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Stagger</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">80</td>
                            <td class="p-3 text-muted-foreground">Delay in milliseconds between each word's reveal animation.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Threshold</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">double</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">0.3</td>
                            <td class="p-3 text-muted-foreground">Intersection Observer threshold (0.0–1.0). The animation starts when this fraction of the element is visible in the viewport.</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 for font size, weight, or color of the text container.</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/number-ticker" class="text-primary hover:underline">NumberTicker</a> — Animated count-up from zero to a target number.</li>
        <li><a href="/components/marquee" class="text-primary hover:underline">Marquee</a> — Infinitely scrolling horizontal band of children.</li>
    </ul>
</div>

@code {
    private double _textRevealThreshold = 30;
    private int _textRevealThresholdKey = 0;

    private string _thresholdCode = @"<Slider @bind-Value=""_threshold"" Min=""0"" Max=""100"" Step=""5"" ShowTooltip=""true""
        FormatTooltip=""@(v => $""{(int)v}%"")"" />
<div style=""height:220px;overflow-y:scroll"">
    <div style=""height:180px"" />
    <TextReveal Text=""This sentence reveals at the chosen threshold.""
                Threshold=""@(_threshold / 100.0)""
                Class=""text-xl font-semibold"" />
</div>

@code { private double _threshold = 30; }";

    private double _revealStagger = 80;
    private int _revealKey = 0;

    private string _defaultCode = @"<TextReveal Text=""Build beautiful Blazor UIs faster than ever before."" Class=""text-2xl font-semibold"" />";

    private string _fastCode = @"<TextReveal Text=""Every word fades in at lightning speed with Stagger set to 40ms."" Stagger=""40"" Class=""text-xl font-medium"" />";

    private string _slowCode = @"<TextReveal Text=""Each word takes its time revealing the message one by one."" Stagger=""180"" Class=""text-xl font-medium"" />";

    private string _heroCode = @"<TextReveal Text=""The Blazor component library designed for modern applications.""
             Class=""text-3xl font-bold leading-tight"" Stagger=""80"" />";
}
