@page "/blocks"
@namespace Lumeo.Docs.Pages.BlocksIndex

<PageTitle>Blocks — Lumeo</PageTitle>

<!-- ======================= HERO ======================= -->
<section class="relative overflow-hidden">
    <!-- Subtle grid pattern -->
    <div class="absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--border))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--border))_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)] pointer-events-none opacity-50"></div>

    <Container MaxWidth="6xl" Class="relative px-4 py-20">
        <BlurFade DelayMs="0">
            <Stack Gap="5" Class="items-center text-center">
                <Flex Inline="true" Align="center" Gap="2" Class="rounded-full border border-border/60 bg-background/80 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur-sm">
                    <Badge Variant="Badge.BadgeVariant.Default" Class="h-4 px-1.5 text-[10px] leading-none">@_blocks.Count blocks</Badge>
                    <Lumeo.Text As="span">Composed. Live. Source-included.</Lumeo.Text>
                </Flex>

                <Heading Level="1" Class="text-4xl sm:text-5xl font-bold tracking-tight leading-[1.05] max-w-3xl">
                    Ready-made <Lumeo.Text As="span" Class="text-primary">blocks</Lumeo.Text> for real apps.
                </Heading>

                <div class="max-w-2xl">
                    <TextReveal Text="Production-ready layouts you can copy, paste, and customize."
                                Class="block text-base sm:text-lg text-muted-foreground leading-relaxed" />
                </div>

                <Flex Gap="3" Wrap="true" Justify="center" Class="pt-1">
                    <Lumeo.Link Href="blocks/dashboard-block" Class="no-underline">
                        <ShimmerButton Size="Button.ButtonSize.Lg" Class="rounded-lg">
                            Browse the Dashboard
                            <DynamicIcon Name="ArrowRight" Class="h-4 w-4" />
                        </ShimmerButton>
                    </Lumeo.Link>
                    <a href="#all-blocks" class="inline-flex h-10 items-center gap-2 justify-center rounded-lg border border-border/60 bg-background px-6 text-sm font-semibold hover:bg-accent hover:text-accent-foreground transition-colors no-underline">
                        <DynamicIcon Name="LayoutGrid" Class="h-4 w-4" />
                        All blocks
                    </a>
                </Flex>
            </Stack>
        </BlurFade>
    </Container>
</section>

<Separator Class="opacity-30" />


<!-- ======================= FEATURED BENTO ======================= -->
<section class="py-20">
    <Container MaxWidth="6xl" Class="px-4">
        <BlurFade DelayMs="0">
            <Stack Gap="3" Class="text-center mb-10">
                <Badge Variant="Badge.BadgeVariant.Outline" Class="mx-auto w-fit">Featured</Badge>
                <Heading Level="2" Class="text-3xl sm:text-4xl font-bold tracking-tight">Start from a great first draft.</Heading>
                <Lumeo.Text Color="muted" Class="max-w-xl mx-auto">
                    Our three most-used blocks — every pixel is a real Lumeo component, not a screenshot.
                </Lumeo.Text>
            </Stack>
        </BlurFade>

        <Bento Columns="4" Gap="Bento.BentoGap.Md">

            <!-- Featured: Dashboard (wide) -->
            <BentoTile Span="2" RowSpan="2" Class="group border-border/60 p-0 overflow-hidden hover:border-border hover:shadow-md hover:-translate-y-0.5 transition-all">
                <a href="blocks/dashboard-block" class="flex h-full flex-col no-underline">
                    <!-- Mini faux-frame preview -->
                    <div class="relative flex-1 overflow-hidden bg-muted/10 min-h-[280px]">
                        <div class="absolute inset-0 origin-top-left scale-[0.55] p-4" style="width: 182%; height: 182%;">
                            <Stack Gap="3">
                                <Flex Align="center" Justify="between">
                                    <Stack Gap="0">
                                        <Lumeo.Text Weight="semibold" Class="text-base">Good morning, Ava</Lumeo.Text>
                                        <Lumeo.Text Size="xs" Color="muted">Here's what's happening today.</Lumeo.Text>
                                    </Stack>
                                    <Flex Gap="2">
                                        <Button Size="Button.ButtonSize.Sm" Variant="Button.ButtonVariant.Outline">
                                            <DynamicIcon Name="Download" Class="h-3.5 w-3.5" />
                                            Export
                                        </Button>
                                        <Button Size="Button.ButtonSize.Sm">
                                            <DynamicIcon Name="Plus" Class="h-3.5 w-3.5" />
                                            New
                                        </Button>
                                    </Flex>
                                </Flex>
                                <div class="grid grid-cols-3 gap-3">
                                    <div class="rounded-lg border border-border/40 bg-card p-3">
                                        <Lumeo.Text Size="xs" Color="muted">Revenue</Lumeo.Text>
                                        <div class="text-xl font-semibold">$42.1k</div>
                                        <Lumeo.Text Size="xs" Class="text-primary">+12.4%</Lumeo.Text>
                                    </div>
                                    <div class="rounded-lg border border-border/40 bg-card p-3">
                                        <Lumeo.Text Size="xs" Color="muted">Users</Lumeo.Text>
                                        <div class="text-xl font-semibold">8,412</div>
                                        <Lumeo.Text Size="xs" Class="text-primary">+4.2%</Lumeo.Text>
                                    </div>
                                    <div class="rounded-lg border border-border/40 bg-card p-3">
                                        <Lumeo.Text Size="xs" Color="muted">Churn</Lumeo.Text>
                                        <div class="text-xl font-semibold">1.8%</div>
                                        <Lumeo.Text Size="xs" Color="muted">-0.3%</Lumeo.Text>
                                    </div>
                                </div>
                                <div class="rounded-lg border border-border/40 bg-card p-4">
                                    <Flex Align="end" Gap="2" Class="h-24">
                                        @foreach (var h in new[] { 30, 50, 42, 68, 55, 80, 62, 90, 75, 72, 88, 95 })
                                        {
                                            <div class="flex-1 rounded-t bg-primary/70" style="height: @(h)%"></div>
                                        }
                                    </Flex>
                                </div>
                            </Stack>
                        </div>
                        <!-- Soft gradient fade at bottom -->
                        <div class="pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-background to-transparent"></div>
                    </div>

                    <Flex Align="center" Justify="between" Class="border-t border-border/40 px-5 py-3.5">
                        <Stack Gap="0">
                            <Flex Align="center" Gap="2">
                                <div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10 text-primary">
                                    <DynamicIcon Name="LayoutDashboard" Class="h-4 w-4" />
                                </div>
                                <Lumeo.Text Weight="semibold">Dashboard</Lumeo.Text>
                            </Flex>
                            <Lumeo.Text Size="xs" Color="muted" Class="ml-9">KPI + chart + orders grid.</Lumeo.Text>
                        </Stack>
                        <DynamicIcon Name="ArrowRight" Class="h-4 w-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-0.5 transition-all" />
                    </Flex>
                </a>
            </BentoTile>

            <!-- Featured: Sign In -->
            <BentoTile Span="2" Class="group border-border/60 p-0 overflow-hidden hover:border-border hover:shadow-md hover:-translate-y-0.5 transition-all">
                <a href="blocks/sign-in" class="flex h-full flex-col no-underline">
                    <div class="relative flex-1 overflow-hidden bg-muted/10 min-h-[180px]">
                        <div class="absolute inset-0 origin-center scale-[0.7] flex items-center justify-center p-6" style="width: 143%; height: 143%; transform-origin: center;">
                            <div class="w-full max-w-sm rounded-xl border border-border/40 bg-card p-5">
                                <Stack Gap="3">
                                    <Stack Gap="1">
                                        <Lumeo.Text Weight="semibold" Class="text-base">Welcome back</Lumeo.Text>
                                        <Lumeo.Text Size="xs" Color="muted">Sign in to your account.</Lumeo.Text>
                                    </Stack>
                                    <Stack Gap="2">
                                        <div class="h-9 rounded-md border border-border/60 bg-background px-3 flex items-center text-xs text-muted-foreground">you@company.com</div>
                                        <div class="h-9 rounded-md border border-border/60 bg-background px-3 flex items-center text-xs text-muted-foreground">••••••••</div>
                                    </Stack>
                                    <Button Size="Button.ButtonSize.Sm" Class="w-full">Sign in</Button>
                                    <div class="relative text-center text-[10px] text-muted-foreground">
                                        <span class="bg-card px-2">or continue with</span>
                                        <div class="absolute top-1/2 left-0 right-0 -z-10 border-t border-border/40"></div>
                                    </div>
                                    <Flex Gap="2">
                                        <Button Size="Button.ButtonSize.Sm" Variant="Button.ButtonVariant.Outline" Class="flex-1">GitHub</Button>
                                        <Button Size="Button.ButtonSize.Sm" Variant="Button.ButtonVariant.Outline" Class="flex-1">Google</Button>
                                    </Flex>
                                </Stack>
                            </div>
                        </div>
                    </div>
                    <Flex Align="center" Justify="between" Class="border-t border-border/40 px-5 py-3.5">
                        <Flex Align="center" Gap="2">
                            <div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10 text-primary">
                                <DynamicIcon Name="LogIn" Class="h-4 w-4" />
                            </div>
                            <Lumeo.Text Weight="semibold">Sign In</Lumeo.Text>
                        </Flex>
                        <DynamicIcon Name="ArrowRight" Class="h-4 w-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-0.5 transition-all" />
                    </Flex>
                </a>
            </BentoTile>

            <!-- Featured: Pricing -->
            <BentoTile Span="2" Class="group border-border/60 p-0 overflow-hidden hover:border-border hover:shadow-md hover:-translate-y-0.5 transition-all">
                <a href="blocks/pricing" class="flex h-full flex-col no-underline">
                    <div class="relative flex-1 overflow-hidden bg-muted/10 min-h-[180px]">
                        <div class="absolute inset-0 origin-top p-4" style="transform: scale(0.6); transform-origin: top center; width: 167%;">
                            <div class="grid grid-cols-3 gap-3">
                                <div class="rounded-xl border border-border/40 bg-card p-4">
                                    <Lumeo.Text Size="xs" Color="muted">Starter</Lumeo.Text>
                                    <div class="text-2xl font-bold">$9<span class="text-xs text-muted-foreground font-normal">/mo</span></div>
                                    <Stack Gap="1.5" Class="mt-3 text-xs text-muted-foreground">
                                        <Flex Align="center" Gap="1.5"><DynamicIcon Name="Check" Class="h-3 w-3 text-primary" />5 projects</Flex>
                                        <Flex Align="center" Gap="1.5"><DynamicIcon Name="Check" Class="h-3 w-3 text-primary" />1 GB storage</Flex>
                                    </Stack>
                                </div>
                                <div class="rounded-xl border border-primary/50 bg-card p-4 ring-1 ring-primary/20">
                                    <Flex Align="center" Gap="2">
                                        <Lumeo.Text Size="xs" Color="muted">Pro</Lumeo.Text>
                                        <Badge Class="h-4 px-1.5 text-[9px]">Popular</Badge>
                                    </Flex>
                                    <div class="text-2xl font-bold text-primary">$29<span class="text-xs text-muted-foreground font-normal">/mo</span></div>
                                    <Stack Gap="1.5" Class="mt-3 text-xs text-muted-foreground">
                                        <Flex Align="center" Gap="1.5"><DynamicIcon Name="Check" Class="h-3 w-3 text-primary" />Unlimited</Flex>
                                        <Flex Align="center" Gap="1.5"><DynamicIcon Name="Check" Class="h-3 w-3 text-primary" />100 GB</Flex>
                                    </Stack>
                                </div>
                                <div class="rounded-xl border border-border/40 bg-card p-4">
                                    <Lumeo.Text Size="xs" Color="muted">Scale</Lumeo.Text>
                                    <div class="text-2xl font-bold">$99<span class="text-xs text-muted-foreground font-normal">/mo</span></div>
                                    <Stack Gap="1.5" Class="mt-3 text-xs text-muted-foreground">
                                        <Flex Align="center" Gap="1.5"><DynamicIcon Name="Check" Class="h-3 w-3 text-primary" />SLA</Flex>
                                        <Flex Align="center" Gap="1.5"><DynamicIcon Name="Check" Class="h-3 w-3 text-primary" />SSO</Flex>
                                    </Stack>
                                </div>
                            </div>
                        </div>
                    </div>
                    <Flex Align="center" Justify="between" Class="border-t border-border/40 px-5 py-3.5">
                        <Flex Align="center" Gap="2">
                            <div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary/10 text-primary">
                                <DynamicIcon Name="CreditCard" Class="h-4 w-4" />
                            </div>
                            <Lumeo.Text Weight="semibold">Pricing Table</Lumeo.Text>
                        </Flex>
                        <DynamicIcon Name="ArrowRight" Class="h-4 w-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-0.5 transition-all" />
                    </Flex>
                </a>
            </BentoTile>

        </Bento>
    </Container>
</section>

<Separator Class="opacity-30" />


<!-- ======================= CATEGORIZED GRID ======================= -->
<section id="all-blocks" class="py-20">
    <Container MaxWidth="6xl" Class="px-4">

        @{
            var categories = new[]
            {
                new Category("Authentication", "Lock", "Sign-in, sign-up, and recovery flows.", _blocks.Where(b => _auth.Contains(b.Label)).ToList()),
                new Category("Dashboards",     "LayoutDashboard", "KPIs, charts, and admin surfaces.", _blocks.Where(b => _dash.Contains(b.Label)).ToList()),
                new Category("Commerce",       "ShoppingBag", "Pricing, carts, and checkout.", _blocks.Where(b => _commerce.Contains(b.Label)).ToList()),
                new Category("Marketing",      "Megaphone", "Hero sections and social surfaces.", _blocks.Where(b => _marketing.Contains(b.Label)).ToList()),
                new Category("Productivity",   "Workflow", "Everyday app shells: mail, calendar, chat, and more.", _blocks.Where(b => _productivity.Contains(b.Label)).ToList()),
            };
        }

        @foreach (var (cat, idx) in categories.Select((c, i) => (c, i)))
        {
            <BlurFade DelayMs="0">
                <div class="@(idx == 0 ? "" : "mt-16")">
                    <Stack Gap="1" Class="mb-6">
                        <Flex Align="center" Gap="2">
                            <div class="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary">
                                <DynamicIcon Name="@cat.Icon" Class="h-4 w-4" />
                            </div>
                            <Heading Level="2" Class="text-2xl font-semibold tracking-tight">@cat.Name</Heading>
                            <Badge Variant="Badge.BadgeVariant.Outline" Class="ml-1 h-5 px-1.5 text-[10px]">@cat.Items.Count</Badge>
                        </Flex>
                        <Lumeo.Text Size="sm" Color="muted" Class="ml-10">@cat.Blurb</Lumeo.Text>
                    </Stack>

                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @foreach (var item in cat.Items)
                        {
                            <a href="@item.Route" class="group flex flex-col gap-3 rounded-xl border border-border/40 bg-card p-5 hover:border-border hover:-translate-y-0.5 hover:shadow-md transition-all no-underline">
                                <Flex Align="center" Gap="3">
                                    <Flex Class="h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary group-hover:bg-primary/15 transition-colors">
                                        <DynamicIcon Name="@item.Icon" Class="h-4 w-4" />
                                    </Flex>
                                    <Lumeo.Text As="span" Weight="semibold">@item.Label</Lumeo.Text>
                                    <DynamicIcon Name="ArrowRight" Class="ml-auto h-4 w-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-0.5 transition-all shrink-0" />
                                </Flex>
                                <Lumeo.Text Size="xs" Color="muted" Leading="relaxed">@item.Description</Lumeo.Text>
                            </a>
                        }
                    </div>
                </div>
            </BlurFade>
        }
    </Container>
</section>

<Separator Class="opacity-30" />


<!-- ======================= CTA WITH SPARKLES ======================= -->
<section class="py-20">
    <Container MaxWidth="4xl" Class="px-4">
        <div class="relative overflow-hidden rounded-2xl border border-border/60 bg-card p-10 sm:p-14">
            <Sparkles Count="14" Class="absolute inset-0 pointer-events-none">
                <span></span>
            </Sparkles>
            <div class="relative z-10">
                <BlurFade DelayMs="0">
                    <Stack Gap="4" Class="text-center items-center">
                        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
                            <DynamicIcon Name="Lightbulb" Class="h-5 w-5" />
                        </div>
                        <Heading Level="2" Class="text-3xl sm:text-4xl font-bold tracking-tight max-w-2xl">
                            Need a block that isn't here?
                        </Heading>
                        <Lumeo.Text Color="muted" Class="max-w-xl text-base leading-relaxed">
                            Open a GitHub issue with a sketch or a reference — we ship blocks based on what the community actually builds.
                        </Lumeo.Text>
                        <Flex Gap="3" Wrap="true" Justify="center" Class="pt-2">
                            <a href="https://github.com/Brain2k-0005/Lumeo/issues/new?labels=block-request&template=block-request.md" target="_blank" rel="noopener" class="no-underline">
                                <ShimmerButton Size="Button.ButtonSize.Lg" Class="rounded-lg">
                                    Open an issue
                                    <DynamicIcon Name="ArrowRight" Class="h-4 w-4" />
                                </ShimmerButton>
                            </a>
                            <a href="https://github.com/Brain2k-0005/Lumeo" target="_blank" rel="noopener"
                               class="inline-flex h-10 items-center gap-2 justify-center rounded-lg border border-border/60 bg-background px-6 text-sm font-semibold text-foreground hover:bg-accent hover:text-accent-foreground transition-colors no-underline">
                                <DynamicIcon Name="Github" Class="h-4 w-4" />
                                View on GitHub
                            </a>
                        </Flex>
                    </Stack>
                </BlurFade>
            </div>
        </div>
    </Container>
</section>

@code {
    private record BlockItem(string Label, string Route, string Icon, string Description);
    private record Category(string Name, string Icon, string Blurb, List<BlockItem> Items);

    private static readonly HashSet<string> _auth = new()
    {
        "Sign In", "Sign Up", "Reset Password", "OTP Verify", "Authentication"
    };
    private static readonly HashSet<string> _dash = new()
    {
        "Dashboard", "Dashboard (full)", "Analytics", "Task Tracker"
    };
    private static readonly HashSet<string> _commerce = new()
    {
        "Pricing Table", "E-Commerce"
    };
    private static readonly HashSet<string> _marketing = new()
    {
        "Hero Section", "Social Feed"
    };
    private static readonly HashSet<string> _productivity = new()
    {
        "Mail", "Calendar", "Chat", "File Manager", "Notifications",
        "Kanban Board", "Form Wizard", "Music Player", "Filters", "Settings", "Settings Page"
    };

    private static readonly List<BlockItem> _blocks =
    [
        // New 2.0 composed blocks
        new("Sign In",        "/blocks/sign-in",          "LogIn",            "Centered sign-in card with social providers."),
        new("Sign Up",        "/blocks/sign-up",          "UserPlus",         "Account creation with password strength meter."),
        new("Reset Password", "/blocks/reset-password",   "Lock",             "Two-step password reset with confirmation."),
        new("OTP Verify",     "/blocks/otp-verify",       "ShieldCheck",      "Email / SMS 6-digit code verification."),
        new("Pricing Table",  "/blocks/pricing",          "CreditCard",       "3-tier pricing with monthly / annual toggle."),
        new("Hero Section",   "/blocks/hero",             "Zap",              "Marketing hero with CTA and social proof."),
        new("Dashboard",      "/blocks/dashboard-block",  "LayoutDashboard",  "KPI + chart + orders grid dashboard."),
        new("Settings Page",  "/blocks/settings-page",    "Settings",         "Tabbed settings with 5 panels and save bar."),

        // Existing pattern blocks
        new("Analytics",      "/blocks/analytics",        "BarChart3",        "Charts, KPIs, and data visualization dashboard."),
        new("Authentication", "/blocks/authentication",   "Lock",             "Login, register, and password reset forms."),
        new("Calendar",       "/blocks/calendar",         "Calendar",         "Event scheduling and calendar views."),
        new("Chat",           "/blocks/chat",             "MessageCircle",    "Real-time messaging interface."),
        new("Dashboard (full)","/blocks/dashboard",       "LayoutDashboard",  "Overview panels with stats and activity."),
        new("E-Commerce",     "/blocks/ecommerce",        "ShoppingCart",     "Product listings, cart, and checkout flow."),
        new("File Manager",   "/blocks/file-manager",     "FolderOpen",       "File browser with upload and management."),
        new("Filters",        "/blocks/filters",          "SlidersHorizontal","Advanced filtering and search controls."),
        new("Form Wizard",    "/blocks/form-wizard",      "ClipboardList",    "Multi-step form with validation."),
        new("Kanban Board",   "/blocks/kanban",           "Columns3",         "Drag-style task board with columns."),
        new("Mail",           "/blocks/mail",             "Mail",             "Email client with inbox and compose."),
        new("Music Player",   "/blocks/music",            "Music",            "Audio player with playlist management."),
        new("Notifications",  "/blocks/notifications",    "Bell",             "Notification center and alert management."),
        new("Settings",       "/blocks/settings",         "Settings",         "Application settings and preferences."),
        new("Social Feed",    "/blocks/social-feed",      "Users",            "Social media feed with posts and interactions."),
        new("Task Tracker",   "/blocks/task-tracker",     "CheckSquare",      "Task management with status tracking."),
    ];
}
