@page "/components/border-beam"

<PageTitle>BorderBeam — Lumeo</PageTitle>

<PageHeader Title="BorderBeam"
            Description="A short bright gradient beam that orbits around the border — always-on, high-visibility. See ShineBorder for a subtler sweep, or HoverBorderGradient for a cursor-driven angle effect." />

<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>Make a pricing tier, feature card, or CTA stand out with a continuously orbiting beam.</li>
        <li>Highlight modal dialogs or sidebars that need extra visual emphasis.</li>
        <li>Customise <code class="text-xs bg-muted px-1 py-0.5 rounded">ColorFrom</code> and <code class="text-xs bg-muted px-1 py-0.5 rounded">ColorTo</code> to match your brand — or use the default primary theme color.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Featured Card" Code="@_cardCode">
        <div class="flex justify-center">
            <BorderBeam Class="w-full max-w-sm">
                <Card Class="bg-card">
                    <CardHeader>
                        <Flex Align="center" Justify="between">
                            <Heading Level="3" Size="lg">Pro plan</Heading>
                            <Badge Variant="Badge.BadgeVariant.Secondary">Popular</Badge>
                        </Flex>
                        <Lumeo.Text Size="sm" Color="muted">
                            Unlock premium features with a travelling beam border.
                        </Lumeo.Text>
                    </CardHeader>
                    <CardContent>
                        <Flex Align="baseline" Gap="1">
                            <Lumeo.Text As="span" Class="text-3xl font-bold text-foreground">$29</Lumeo.Text>
                            <Lumeo.Text As="span" Size="sm" Color="muted">/mo</Lumeo.Text>
                        </Flex>
                    </CardContent>
                    <CardFooter>
                        <Button FullWidth="true">Start free trial</Button>
                    </CardFooter>
                </Card>
            </BorderBeam>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Custom Colors" Code="@_colorCode">
        <Flex Gap="4" Wrap="true" Justify="center">
            <BorderBeam ColorFrom="oklch(0.7 0.22 300)" ColorTo="oklch(0.6 0.2 270)" Class="w-44">
                <Card Class="p-4 text-center">
                    <Lumeo.Text Class="text-sm font-medium">Violet beam</Lumeo.Text>
                </Card>
            </BorderBeam>
            <BorderBeam ColorFrom="oklch(0.8 0.18 50)" ColorTo="oklch(0.65 0.22 30)" Class="w-44">
                <Card Class="p-4 text-center">
                    <Lumeo.Text Class="text-sm font-medium">Amber beam</Lumeo.Text>
                </Card>
            </BorderBeam>
            <BorderBeam ColorFrom="oklch(0.65 0.2 160)" ColorTo="oklch(0.5 0.18 180)" Class="w-44">
                <Card Class="p-4 text-center">
                    <Lumeo.Text Class="text-sm font-medium">Teal beam</Lumeo.Text>
                </Card>
            </BorderBeam>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Beam Sizes" Code="@_sizeCode">
        <Flex Gap="4" Wrap="true" Justify="center">
            <BorderBeam Size="BorderBeam.BeamSize.Sm" Class="w-36">
                <Card Class="p-4 text-center">
                    <Lumeo.Text Class="text-xs text-muted-foreground">Sm (1px)</Lumeo.Text>
                </Card>
            </BorderBeam>
            <BorderBeam Size="BorderBeam.BeamSize.Md" Class="w-36">
                <Card Class="p-4 text-center">
                    <Lumeo.Text Class="text-xs text-muted-foreground">Md (1.5px)</Lumeo.Text>
                </Card>
            </BorderBeam>
            <BorderBeam Size="BorderBeam.BeamSize.Lg" Class="w-36">
                <Card Class="p-4 text-center">
                    <Lumeo.Text Class="text-xs text-muted-foreground">Lg (3px)</Lumeo.Text>
                </Card>
            </BorderBeam>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="Slow Rotation" Code="@_slowCode">
        <div class="flex justify-center">
            <BorderBeam DurationMs="20000" Class="w-full max-w-xs">
                <Card Class="p-5 text-center">
                    <Lumeo.Text Class="text-sm text-muted-foreground">DurationMs="20000" — a slow, meditative orbit.</Lumeo.Text>
                </Card>
            </BorderBeam>
        </div>
    </ComponentDemo>

    <ComponentDemo Title="Beam Size (interactive)">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a size to see the beam thickness change live.</Lumeo.Text>
            <Segmented @bind-Value="_beamSizeStr" Options="_beamSizeOptions" />
            <div class="flex justify-center">
                <BorderBeam Size="@_beamSize" Class="w-full max-w-xs">
                    <Card Class="p-6 text-center">
                        <Lumeo.Text Class="text-sm font-medium">Size = @_beamSizeStr</Lumeo.Text>
                    </Card>
                </BorderBeam>
            </div>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Orbit Speed (interactive)">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Drag the slider to change how fast the beam orbits (lower = faster).</Lumeo.Text>
            <Slider @bind-Value="_beamDuration" Min="1000" Max="20000" Step="500" ShowTooltip="true"
                    FormatTooltip="@(v => $"{(int)v} ms")" />
            <Lumeo.Text Size="xs" Color="muted">DurationMs = @((int)_beamDuration)</Lumeo.Text>
            <div class="flex justify-center">
                <BorderBeam DurationMs="@((int)_beamDuration)" Class="w-full max-w-xs">
                    <Card Class="p-6 text-center">
                        <Lumeo.Text Class="text-sm font-medium">@((int)_beamDuration) ms per orbit</Lumeo.Text>
                    </Card>
                </BorderBeam>
            </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">BorderBeam</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">Size</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">BeamSize</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Md</td>
                            <td class="p-3 text-muted-foreground">Beam stroke thickness — <code class="text-xs">Sm</code> (1px), <code class="text-xs">Md</code> (1.5px), <code class="text-xs">Lg</code> (3px).</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">8000</td>
                            <td class="p-3 text-muted-foreground">Full-circuit animation duration in milliseconds. Lower = faster orbit.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ColorFrom</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">var(--color-primary)</td>
                            <td class="p-3 text-muted-foreground">Gradient start color of the beam. Accepts any valid CSS color.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ColorTo</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">var(--color-primary)</td>
                            <td class="p-3 text-muted-foreground">Gradient end color of the beam. Accepts any valid CSS color.</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 surround with the animated beam border.</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. Use to constrain width or set <code class="text-xs">rounded-xl</code> etc.</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/blur-fade" class="text-primary hover:underline">BlurFade</a> — Blur + fade-in animation when an element enters the viewport.</li>
        <li><a href="/components/shimmer-button" class="text-primary hover:underline">ShimmerButton</a> — Button with an animated shimmer sweep effect.</li>
        <li><a href="/components/sparkles" class="text-primary hover:underline">Sparkles</a> — Decorative sparkle particles 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 {
    // Interactive state
    private string _beamSizeStr = "Md";
    private double _beamDuration = 8000;

    private BorderBeam.BeamSize _beamSize =>
        _beamSizeStr == "Sm" ? BorderBeam.BeamSize.Sm :
        _beamSizeStr == "Lg" ? BorderBeam.BeamSize.Lg :
        BorderBeam.BeamSize.Md;

    private List<Segmented.SegmentedOption> _beamSizeOptions = new()
    {
        new() { Label = "Sm", Value = "Sm" },
        new() { Label = "Md", Value = "Md" },
        new() { Label = "Lg", Value = "Lg" },
    };

    private const string _cardCode = @"<BorderBeam Class=""w-full max-w-sm"">
    <Card Class=""bg-card"">
        <CardHeader>
            <Flex Align=""center"" Justify=""between"">
                <Heading Level=""3"" Size=""lg"">Pro plan</Heading>
                <Badge Variant=""Badge.BadgeVariant.Secondary"">Popular</Badge>
            </Flex>
            <Lumeo.Text Size=""sm"" Color=""muted"">Unlock premium features.</Lumeo.Text>
        </CardHeader>
        <CardContent>
            <Lumeo.Text As=""span"" Class=""text-3xl font-bold"">$29</Lumeo.Text>
            <Lumeo.Text As=""span"" Size=""sm"" Color=""muted"">/mo</Lumeo.Text>
        </CardContent>
        <CardFooter>
            <Button FullWidth=""true"">Start free trial</Button>
        </CardFooter>
    </Card>
</BorderBeam>";

    private const string _colorCode = @"<BorderBeam ColorFrom=""oklch(0.7 0.22 300)"" ColorTo=""oklch(0.6 0.2 270)"">
    <Card Class=""p-4 text-center""><Lumeo.Text>Violet beam</Lumeo.Text></Card>
</BorderBeam>

<BorderBeam ColorFrom=""oklch(0.8 0.18 50)"" ColorTo=""oklch(0.65 0.22 30)"">
    <Card Class=""p-4 text-center""><Lumeo.Text>Amber beam</Lumeo.Text></Card>
</BorderBeam>";

    private const string _sizeCode = @"<BorderBeam Size=""BorderBeam.BeamSize.Sm""><Card Class=""p-4"">Sm</Card></BorderBeam>
<BorderBeam Size=""BorderBeam.BeamSize.Md""><Card Class=""p-4"">Md</Card></BorderBeam>
<BorderBeam Size=""BorderBeam.BeamSize.Lg""><Card Class=""p-4"">Lg</Card></BorderBeam>";

    private const string _slowCode = @"<BorderBeam DurationMs=""20000"">
    <Card Class=""p-5 text-center"">
        <Lumeo.Text>Slow, meditative orbit.</Lumeo.Text>
    </Card>
</BorderBeam>";
}
