@page "/blocks/hero"
@namespace Lumeo.Docs.Pages.Blocks

<PageTitle>Hero Section — Lumeo Blocks</PageTitle>

<PageHeader Title="Hero Section"
            Description="Marketing hero with a large headline, subtext, two CTAs, and a social-proof logo row — animated with BlurFade." />

<ComponentDemo Title="Hero Section Block" Code="@_code">
    <div class="relative w-full min-h-[640px] bg-card rounded-[var(--radius-lg)] border border-border/40 overflow-hidden">
        <!-- subtle background gradient -->
        <div class="absolute inset-0 bg-gradient-to-b from-primary/5 via-transparent to-transparent pointer-events-none"></div>
        <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div>

        <Stack Class="relative items-center text-center px-6 py-20 lg:py-28 max-w-4xl mx-auto" Gap="8">
            <BlurFade DelayMs="0" Yoffset="12">
                <Badge Variant="Badge.BadgeVariant.Secondary" Class="gap-1.5 pl-1.5 pr-3 py-1 text-xs font-medium">
                    <span class="inline-flex h-4 items-center rounded-full bg-primary text-primary-foreground px-1.5 text-[10px] font-semibold">
                        New
                    </span>
                    Lumeo 2.0 is here — read the launch post
                    <Icon Name="ArrowRight" Class="h-3 w-3" />
                </Badge>
            </BlurFade>

            <BlurFade DelayMs="100" Yoffset="16">
                <Heading Level="1" Class="text-4xl md:text-6xl font-bold tracking-tight leading-[1.05] max-w-3xl">
                    Build beautiful Blazor apps
                    <span class="block bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
                        in half the time.
                    </span>
                </Heading>
            </BlurFade>

            <BlurFade DelayMs="200" Yoffset="12">
                <Lumeo.Text Color="muted" Class="text-base md:text-lg leading-relaxed max-w-2xl">
                    A production-ready component library for .NET 10 — 128 accessible component families
                    (351 importable primitives) across a 568 KB core + opt-in satellites, fully themeable,
                    and crafted by engineers who ship.
                </Lumeo.Text>
            </BlurFade>

            <BlurFade DelayMs="300" Yoffset="10">
                <Flex Align="center" Gap="3" Class="flex-wrap justify-center">
                    <Button Size="Button.ButtonSize.Lg" Class="gap-2 h-11 px-6 text-sm">
                        Get started free
                        <Icon Name="ArrowRight" Class="h-4 w-4" />
                    </Button>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Lg" Class="gap-2 h-11 px-6 text-sm">
                        <Icon Name="Github" Class="h-4 w-4" />
                        Star on GitHub
                    </Button>
                </Flex>
            </BlurFade>

            <BlurFade DelayMs="500" Yoffset="8">
                <Stack Gap="4" Class="items-center mt-6">
                    <Lumeo.Text Size="xs" Color="muted" Class="uppercase tracking-widest">
                        Trusted by teams at
                    </Lumeo.Text>
                    <Flex Align="center" Gap="8" Class="flex-wrap justify-center opacity-70">
                        @foreach (var (name, icon) in _logos)
                        {
                            <Flex Align="center" Gap="2" Class="text-muted-foreground">
                                <Icon Name="@icon" Class="h-5 w-5" />
                                <Lumeo.Text Size="sm" Weight="semibold">@name</Lumeo.Text>
                            </Flex>
                        }
                    </Flex>
                </Stack>
            </BlurFade>
        </Stack>
    </div>
</ComponentDemo>

@code {
    private readonly (string, string)[] _logos =
    [
        ("Acme", "Zap"),
        ("Nexara", "Activity"),
        ("Vertex", "Box"),
        ("Luma", "Star"),
        ("Pulse", "Heart"),
    ];

    private readonly string _code = @"<Stack Class=""items-center text-center"" Gap=""8"">
    <BlurFade DelayMs=""0"">
        <Badge Variant=""Badge.BadgeVariant.Secondary"">
            New — Lumeo 2.0 is here <Icon Name=""ArrowRight"" Class=""h-3 w-3"" />
        </Badge>
    </BlurFade>

    <BlurFade DelayMs=""100"">
        <Heading Level=""1"" Class=""text-6xl font-bold"">
            Build beautiful Blazor apps
            <span class=""bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent"">
                in half the time.
            </span>
        </Heading>
    </BlurFade>

    <BlurFade DelayMs=""200"">
        <Lumeo.Text Color=""muted"" Class=""text-lg"">
            A production-ready component library for .NET 10.
        </Lumeo.Text>
    </BlurFade>

    <BlurFade DelayMs=""300"">
        <Flex Gap=""3"">
            <Button Size=""Button.ButtonSize.Lg"">
                Get started free <Icon Name=""ArrowRight"" Class=""h-4 w-4"" />
            </Button>
            <Button Variant=""Button.ButtonVariant.Outline"" Size=""Button.ButtonSize.Lg"">
                <Icon Name=""Github"" Class=""h-4 w-4"" /> Star on GitHub
            </Button>
        </Flex>
    </BlurFade>

    <BlurFade DelayMs=""500"">
        <Stack Class=""items-center"" Gap=""4"">
            <Lumeo.Text Size=""xs"" Class=""uppercase tracking-widest"">Trusted by teams at</Lumeo.Text>
            <Flex Gap=""8"">
                <!-- logo row -->
            </Flex>
        </Stack>
    </BlurFade>
</Stack>";
}
