@extends('layouts.storefront')

@section('body_attributes', 'data-page="auth-home"')
@section('title', 'Lab Access | ' . config('app.name'))
@section('meta_description', 'Choose the right Clusterfix account action: sign in, create an account, or reset access.')

@section('content')
    <section class="py-12 bg-background flex-1 relative overflow-hidden">
        <div class="absolute inset-0 tech-grid pointer-events-none opacity-30"></div>
        <div class="absolute -top-40 -left-40 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] pointer-events-none"></div>
        <div class="absolute bottom-0 right-0 w-[500px] h-[500px] bg-blue-600/5 rounded-full blur-[120px] pointer-events-none"></div>

        <div class="max-w-container-max w-full mx-auto px-margin-desktop relative z-10">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-stretch">
                <div class="hidden lg:flex lg:col-span-5 flex-col justify-between bg-slate-950 text-white rounded-3xl p-8 border border-white/10 shadow-2xl relative overflow-hidden">
                    <div class="absolute inset-0 tech-grid pointer-events-none opacity-10"></div>
                    <div class="space-y-4 relative z-20">
                        <div class="flex items-center justify-between border-b border-white/10 pb-4">
                            <span class="text-xs font-mono font-bold tracking-widest text-primary flex items-center gap-1.5">
                                <span class="w-2 h-2 rounded-full bg-primary animate-ping"></span>
                                LAB SECURE NODE
                            </span>
                            <span class="text-[10px] font-mono text-slate-500">SYS_VER: 2.8.4</span>
                        </div>
                        <h2 class="font-display-lg text-2xl font-bold tracking-tight text-white mt-4">
                            Clusterfix laboratory terminal
                        </h2>
                        <p class="text-slate-400 text-xs leading-relaxed">
                            Authorized personnel and trade clients can track real-time electronic rebuilds, view diagnostic notes, and access billing files.
                        </p>
                    </div>

                    <div class="my-6 bg-slate-900/60 border border-white/5 rounded-2xl p-4 font-mono text-[10px] text-slate-300 space-y-2.5 relative shadow-inner">
                        <span class="text-[9px] font-bold text-slate-500 uppercase tracking-wider block">Live lab status logs</span>
                        <div class="space-y-1.5 leading-normal">
                            <div class="flex justify-between text-slate-400"><span>[OK] CAN-bus simulator init</span><span class="text-emerald-500">100%</span></div>
                            <div class="flex justify-between text-slate-400"><span>[OK] Micro-soldering bench #3 online</span><span class="text-emerald-500">Active</span></div>
                            <div class="flex justify-between text-slate-400"><span>[LOAD] Diagnostics queue load</span><span class="text-amber-500">Moderate</span></div>
                            <div class="flex justify-between text-slate-400"><span>[SEC] Cryptographic session handshake</span><span class="text-emerald-500">AES256</span></div>
                        </div>
                    </div>

                    <div class="space-y-4 relative z-20 border-t border-white/10 pt-6">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-primary">
                                <span class="material-symbols-outlined text-lg">login</span>
                            </div>
                            <div>
                                <span class="text-xs font-bold block text-slate-200">Existing customer</span>
                                <span class="text-[10px] text-slate-400">Sign in to track repairs and invoices.</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-primary">
                                <span class="material-symbols-outlined text-lg">person_add</span>
                            </div>
                            <div>
                                <span class="text-xs font-bold block text-slate-200">New account</span>
                                <span class="text-[10px] text-slate-400">Create a trade or customer profile.</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-primary">
                                <span class="material-symbols-outlined text-lg">lock_reset</span>
                            </div>
                            <div>
                                <span class="text-xs font-bold block text-slate-200">Password reset</span>
                                <span class="text-[10px] text-slate-400">Request a reset link for your inbox.</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="lg:col-span-7">
                    <div class="bg-surface rounded-3xl border border-outline-variant shadow-xl p-6 md:p-10">
                        <div class="space-y-2 mb-8">
                            <span class="text-[10px] font-bold text-primary bg-primary/10 border border-primary/20 px-2.5 py-1 rounded-full uppercase tracking-wider">LAB ACCESS</span>
                            <h1 class="font-display-lg text-2xl font-bold text-gradient mt-2">Choose your next step</h1>
                            <p class="text-xs text-on-surface-variant">Use the path that matches your intent. Each form stands on its own so the page stays focused and relevant.</p>
                        </div>

                        <div class="grid gap-4 md:grid-cols-3">
                            <a href="{{ route('auth.login') }}" class="group rounded-2xl border border-outline-variant bg-surface-container-low p-6 hover:border-primary hover:shadow-lg transition-all">
                                <div class="w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center mb-4">
                                    <span class="material-symbols-outlined">login</span>
                                </div>
                                <h2 class="font-headline-sm text-headline-sm text-on-surface mb-2">Sign in</h2>
                                <p class="text-body-sm text-on-surface-variant">Return to an existing repair case or trade account.</p>
                            </a>

                            <a href="{{ route('auth.register') }}" class="group rounded-2xl border border-outline-variant bg-surface-container-low p-6 hover:border-primary hover:shadow-lg transition-all">
                                <div class="w-12 h-12 rounded-xl bg-emerald-500/10 text-emerald-600 flex items-center justify-center mb-4">
                                    <span class="material-symbols-outlined">person_add</span>
                                </div>
                                <h2 class="font-headline-sm text-headline-sm text-on-surface mb-2">Create account</h2>
                                <p class="text-body-sm text-on-surface-variant">Open a customer or workshop profile for faster booking.</p>
                            </a>

                            <a href="{{ route('auth.password.request') }}" class="group rounded-2xl border border-outline-variant bg-surface-container-low p-6 hover:border-primary hover:shadow-lg transition-all">
                                <div class="w-12 h-12 rounded-xl bg-blue-600/10 text-blue-600 flex items-center justify-center mb-4">
                                    <span class="material-symbols-outlined">lock_reset</span>
                                </div>
                                <h2 class="font-headline-sm text-headline-sm text-on-surface mb-2">Reset access</h2>
                                <p class="text-body-sm text-on-surface-variant">Request a password reset link if you have lost access.</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection