@page "/not-found"
@layout MainLayout

<PageTitle>Page Not Found — Lumeo</PageTitle>

<Flex Class="min-h-[calc(100vh-14rem)] items-center justify-center">
    <Stack Class="text-center max-w-md" Gap="6">

        <!-- Big 404 number -->
        <Stack Gap="0">
            <Lumeo.Text Class="text-[8rem] font-black leading-none text-primary/10 select-none">
                404
            </Lumeo.Text>
            <Stack Class="-mt-6" Gap="2">
                <Heading Level="2" Class="text-2xl font-semibold text-foreground">
                    Page not found
                </Heading>
                <Lumeo.Text Class="text-muted-foreground text-sm leading-relaxed">
                    The page you're looking for doesn't exist or may still be in development.
                </Lumeo.Text>
            </Stack>
        </Stack>

        <!-- Illustration dots -->
        <Flex Class="justify-center gap-1.5">
            <Stack Class="h-2 w-2 rounded-full bg-primary/30" />
            <Stack Class="h-2 w-2 rounded-full bg-primary/60" />
            <Stack Class="h-2 w-2 rounded-full bg-primary" />
        </Flex>

        <!-- Actions -->
        <Flex Class="justify-center gap-3">
            <a href="/" class="no-underline">
                <Button Variant="Button.ButtonVariant.Default">
                    <DynamicIcon Name="Home" Class="h-4 w-4 mr-2" />
                    Go Home
                </Button>
            </a>
            <a href="/components" class="no-underline">
                <Button Variant="Button.ButtonVariant.Outline">
                    <DynamicIcon Name="LayoutGrid" Class="h-4 w-4 mr-2" />
                    Browse Components
                </Button>
            </a>
        </Flex>

        <!-- Suggestions -->
        <Card Class="text-left">
            <CardHeader>
                <Heading Level="3" Class="text-sm font-medium text-foreground">Popular pages</Heading>
            </CardHeader>
            <CardContent Class="pt-0">
                <Stack Gap="1">
                    <a href="/components/button" class="no-underline">
                        <Button Variant="Button.ButtonVariant.Ghost" Class="w-full justify-start h-8 text-muted-foreground hover:text-foreground">
                            <DynamicIcon Name="MousePointerClick" Class="h-3.5 w-3.5 mr-2" />
                            Button
                        </Button>
                    </a>
                    <a href="/components/card" class="no-underline">
                        <Button Variant="Button.ButtonVariant.Ghost" Class="w-full justify-start h-8 text-muted-foreground hover:text-foreground">
                            <DynamicIcon Name="Square" Class="h-3.5 w-3.5 mr-2" />
                            Card
                        </Button>
                    </a>
                    <a href="/components/dialog" class="no-underline">
                        <Button Variant="Button.ButtonVariant.Ghost" Class="w-full justify-start h-8 text-muted-foreground hover:text-foreground">
                            <DynamicIcon Name="MessageSquare" Class="h-3.5 w-3.5 mr-2" />
                            Dialog
                        </Button>
                    </a>
                    <a href="/patterns" class="no-underline">
                        <Button Variant="Button.ButtonVariant.Ghost" Class="w-full justify-start h-8 text-muted-foreground hover:text-foreground">
                            <DynamicIcon Name="Layers" Class="h-3.5 w-3.5 mr-2" />
                            Patterns Gallery
                        </Button>
                    </a>
                </Stack>
            </CardContent>
        </Card>

    </Stack>
</Flex>
