@page "/login"
@using Microsoft.AspNetCore.Components.Authorization

<div class="auth-workspace-canvas">
    <div class="tech-background-matrix">
        <svg class="bg-vector-mesh" viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="cyber-grid" width="40" height="40" patternUnits="userSpaceOnUse">
                    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#102a35" stroke-width="0.75" />
                    <circle cx="40" cy="40" r="1" fill="#173b4a" />
                </pattern>

                <filter id="core-blue-glow" x="-20%" y="-20%" width="140%" height="140%">
                    <feGaussianBlur stdDeviation="6" result="blur" />
                    <feComposite in="SourceGraphic" in2="blur" operator="over" />
                </filter>
            </defs>

            <rect width="100%" height="100%" fill="url(#cyber-grid)" opacity="0.6" />

            <g class="tech-circuit-left" stroke="#0091ff" stroke-width="1.25" fill="none" opacity="0.35">
                <path d="M -50,250 L 120,250 L 180,190 L 250,190" />
                <path d="M 40,100 L 100,160 L 100,340 L 160,400" />
                <polyline points="220,160 240,190 220,220" />
                <circle cx="250" cy="190" r="3" fill="#0091ff" />
                <polygon points="30,200 60,170 90,170 60,200" stroke="#00bfff" stroke-width="1" opacity="0.5" />
                <polygon points="110,300 130,280 160,280 140,300" stroke="#00bfff" stroke-width="1" opacity="0.3" />
            </g>

            <g class="tech-circuit-right" stroke="#00bfff" stroke-width="1.25" fill="none" opacity="0.35">
                <path d="M 850,250 L 680,250 L 620,310 L 550,310" />
                <path d="M 760,400 L 700,340 L 700,160 L 640,100" />
                <polyline points="580,340 560,310 580,280" />
                <circle cx="550" cy="310" r="3" fill="#00bfff" />
                <polygon points="770,300 740,330 710,330 740,300" stroke="#0091ff" stroke-width="1" opacity="0.5" />
                <polygon points="690,200 670,220 640,220 660,200" stroke="#0091ff" stroke-width="1" opacity="0.3" />
            </g>

            <g class="center-target" stroke="#0091ff" fill="none" opacity="0.15">
                <circle cx="400" cy="250" r="90" stroke-dasharray="8 6" />
                <circle cx="400" cy="250" r="130" />
                <line x1="400" y1="80" x2="400" y2="420" stroke-dasharray="4 4" />
                <line x1="220" y1="250" x2="580" y2="250" stroke-dasharray="4 4" />
            </g>
        </svg>
    </div>

    <div class="login-action-container">
        <header class="login-header">
            <span class="security-status-tag">SYSTEM_LOCKOUT_ACTIVE</span>
            <h1 class="login-title">Console Authentication Required</h1>
            <p class="login-subtitle">Initialize terminal authorization pipeline to access core application monitors.</p>
        </header>

        <button class="login-cta-button" @onclick="HandleLogin">
            <span class="btn-glow-layer"></span>
            <span class="btn-text-content">INITIALIZE SECURE ACCESS</span>
            <svg class="btn-arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
        </button>
    </div>
</div>

@code {
    [CascadingParameter]
    private Task<AuthenticationState>? AuthState { get; set; }

    private void HandleLogin()
    {
        // Wire up your OAuth / OpenID Connect Redirect or Auth trigger state here
    }
}