@extends('layouts.fullscreen-layout')

@push('styles')
    <style>
        .login-ai-bg {
            background:
                radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.18), transparent 26%),
                radial-gradient(circle at 85% 15%, rgba(16, 185, 129, 0.16), transparent 24%),
                radial-gradient(circle at 50% 85%, rgba(168, 85, 247, 0.14), transparent 28%),
                linear-gradient(135deg, #f8fbff 0%, #eef6ff 48%, #f7fafc 100%);
        }

        .dark .login-ai-bg {
            background:
                radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.16), transparent 26%),
                radial-gradient(circle at 85% 15%, rgba(16, 185, 129, 0.14), transparent 24%),
                radial-gradient(circle at 50% 85%, rgba(168, 85, 247, 0.12), transparent 28%),
                linear-gradient(135deg, #0f172a 0%, #111827 52%, #172033 100%);
        }

        .login-glass {
            background: rgba(255, 255, 255, 0.82);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow:
                0 18px 44px rgba(15, 23, 42, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
        }

        .dark .login-glass {
            background: rgba(15, 23, 42, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow:
                0 20px 48px rgba(2, 6, 23, 0.34),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }

        .login-panel-dark {
            background:
                radial-gradient(circle at top left, rgba(56, 189, 248, 0.20), transparent 24%),
                radial-gradient(circle at top right, rgba(52, 211, 153, 0.16), transparent 22%),
                radial-gradient(circle at bottom center, rgba(129, 140, 248, 0.18), transparent 24%),
                linear-gradient(145deg, #07111f 0%, #0f172a 45%, #172554 100%);
        }

        .login-mesh {
            background-image:
                linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
            background-size: 24px 24px;
        }

        .ai-orb {
            position: absolute;
            border-radius: 9999px;
            filter: blur(50px);
            pointer-events: none;
        }

        .ai-orb-1 {
            top: 6%;
            left: 8%;
            width: 180px;
            height: 180px;
            background: rgba(56, 189, 248, 0.18);
        }

        .ai-orb-2 {
            right: 10%;
            top: 12%;
            width: 220px;
            height: 220px;
            background: rgba(16, 185, 129, 0.16);
        }

        .ai-orb-3 {
            left: 38%;
            bottom: 8%;
            width: 240px;
            height: 240px;
            background: rgba(129, 140, 248, 0.18);
        }

        .ai-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 999px;
            padding: 8px 14px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
        }

        .ai-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 600;
        }

        .ai-outline-card {
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(255, 255, 255, 0.72);
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
        }

        .dark .ai-outline-card {
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.04);
            box-shadow: none;
        }

        .ai-role-btn {
            transition: all .2s ease;
        }

        .ai-role-btn:hover {
            transform: translateY(-1px);
        }

        .ai-line {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(148,163,184,.45) 16%, rgba(148,163,184,.45) 84%, transparent 100%);
        }

        .dark .ai-line {
            background: linear-gradient(90deg, transparent 0%, rgba(148,163,184,.22) 16%, rgba(148,163,184,.22) 84%, transparent 100%);
        }

        .login-logo-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 84px;
            padding: 14px 18px;
            border-radius: 24px;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(255,255,255,.78);
            box-shadow:
                0 14px 30px rgba(15,23,42,.06),
                inset 0 1px 0 rgba(255,255,255,.55);
        }

        .dark .login-logo-wrap {
            border: 1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.06);
            box-shadow:
                0 18px 34px rgba(2,6,23,.24),
                inset 0 1px 0 rgba(255,255,255,.04);
        }

        .login-logo-img {
            max-height: 54px;
            width: auto;
            object-fit: contain;
        }

        .hero-logo-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 96px;
            padding: 16px 20px;
            border-radius: 28px;
            border: 1px solid rgba(255,255,255,.12);
            background: rgba(255,255,255,.10);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow:
                0 18px 36px rgba(2,6,23,.18),
                inset 0 1px 0 rgba(255,255,255,.05);
        }

        .hero-logo-img {
            max-height: 64px;
            width: auto;
            object-fit: contain;
            filter: drop-shadow(0 10px 16px rgba(0,0,0,.18));
        }
    </style>
@endpush

@section('content')
    <div class="login-ai-bg relative min-h-screen overflow-hidden">
        <div class="ai-orb ai-orb-1"></div>
        <div class="ai-orb ai-orb-2"></div>
        <div class="ai-orb ai-orb-3"></div>

        <div class="relative z-10 flex min-h-screen w-full flex-col lg:flex-row">
            <!-- Left/Form -->
            <div class="flex w-full items-center justify-center px-5 py-8 sm:px-8 lg:w-[48%] lg:px-10">
                <div class="w-full max-w-xl">
                    <div class="login-glass rounded-[32px] p-5 sm:p-8">
                        <div class="mb-7">
                            <div class="mb-5 flex items-center gap-4">
                                <div class="login-logo-wrap">
                                    <img
                                        src="{{ \App\Models\Setting::getShopLogo() }}"
                                        alt="{{ \App\Models\Setting::getShopName() }}"
                                        class="login-logo-img"
                                    >
                                </div>
                            </div>

                            <div class="mb-4 flex flex-wrap items-center gap-2">
                                <span class="ai-badge border border-brand-200 bg-brand-50 text-brand-700 dark:border-brand-500/20 dark:bg-brand-500/10 dark:text-brand-300">
                                    <span class="inline-block h-2 w-2 rounded-full bg-brand-500"></span>
                                    AI Login Experience
                                </span>

                                <span class="ai-chip border border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300">
                                    Smart Access
                                </span>
                            </div>

                            <h1 class="text-3xl font-black tracking-tight text-gray-900 dark:text-white sm:text-4xl">
                                Aplikasipercetakan 3.0
                            </h1>

                            <p class="mt-3 max-w-2xl text-sm leading-7 text-gray-600 dark:text-gray-300">
                                Masuk ke control center percetakan dengan pengalaman login yang lebih modern, cepat, dan terasa seperti dashboard AI premium.
                            </p>
                        </div>

                        @if(session('error'))
                            <div class="mb-5 rounded-2xl border border-error-200 bg-error-50 px-4 py-3 text-sm text-error-700 dark:border-error-500/20 dark:bg-error-500/10 dark:text-error-300">
                                {{ session('error') }}
                            </div>
                        @endif

                        @if(config('app.debug'))
                            <div class="mb-6 rounded-[26px] border border-blue-100 bg-blue-50/80 p-4 dark:border-blue-500/20 dark:bg-blue-500/10">
                                <div class="mb-3">
                                    <div class="text-xs font-bold uppercase tracking-[0.22em] text-blue-700 dark:text-blue-300">
                                        Development Auto Login
                                    </div>
                                    <p class="mt-1 text-xs leading-6 text-blue-700/80 dark:text-blue-200/80">
                                        Klik role di bawah untuk langsung login otomatis. Password akan diisi ke <span class="font-semibold">password</span>.
                                    </p>
                                </div>

                                <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
                                    <button type="button" onclick="devAutoLogin('budi.santoso@aplikasipercetakan.com')" class="ai-role-btn rounded-2xl bg-white px-3 py-3 text-left text-xs font-semibold text-gray-700 shadow-sm hover:bg-blue-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10">
                                        <div>Owner</div>
                                        <div class="mt-1 text-[10px] text-gray-400 dark:text-gray-500">Budi Santoso</div>
                                    </button>

                                    <button type="button" onclick="devAutoLogin('fajar.ramadhan@aplikasipercetakan.com')" class="ai-role-btn rounded-2xl bg-white px-3 py-3 text-left text-xs font-semibold text-gray-700 shadow-sm hover:bg-blue-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10">
                                        <div>Supervisor</div>
                                        <div class="mt-1 text-[10px] text-gray-400 dark:text-gray-500">Fajar Ramadhan</div>
                                    </button>

                                    <button type="button" onclick="devAutoLogin('citra.lestari@aplikasipercetakan.com')" class="ai-role-btn rounded-2xl bg-white px-3 py-3 text-left text-xs font-semibold text-gray-700 shadow-sm hover:bg-blue-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10">
                                        <div>Designer</div>
                                        <div class="mt-1 text-[10px] text-gray-400 dark:text-gray-500">Citra Lestari</div>
                                    </button>

                                    <button type="button" onclick="devAutoLogin('dewi.anggraini@aplikasipercetakan.com')" class="ai-role-btn rounded-2xl bg-white px-3 py-3 text-left text-xs font-semibold text-gray-700 shadow-sm hover:bg-blue-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10">
                                        <div>Kasir</div>
                                        <div class="mt-1 text-[10px] text-gray-400 dark:text-gray-500">Dewi Anggraini</div>
                                    </button>

                                    <button type="button" onclick="devAutoLogin('eko.saputra@aplikasipercetakan.com')" class="ai-role-btn rounded-2xl bg-white px-3 py-3 text-left text-xs font-semibold text-gray-700 shadow-sm hover:bg-blue-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10">
                                        <div>Operator</div>
                                        <div class="mt-1 text-[10px] text-gray-400 dark:text-gray-500">Eko Saputra</div>
                                    </button>

                                    <button type="button" onclick="devAutoLogin('gita.permata@aplikasipercetakan.com')" class="ai-role-btn rounded-2xl bg-white px-3 py-3 text-left text-xs font-semibold text-gray-700 shadow-sm hover:bg-blue-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10">
                                        <div>Administrasi</div>
                                        <div class="mt-1 text-[10px] text-gray-400 dark:text-gray-500">Gita Permata</div>
                                    </button>

                                    <button type="button" onclick="devAutoLogin('indra.kurniawan@aplikasipercetakan.com')" class="ai-role-btn rounded-2xl bg-white px-3 py-3 text-left text-xs font-semibold text-gray-700 shadow-sm hover:bg-blue-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10 sm:col-span-2 lg:col-span-1">
                                        <div>Finishing</div>
                                        <div class="mt-1 text-[10px] text-gray-400 dark:text-gray-500">Indra Kurniawan</div>
                                    </button>

                                    <button type="button" onclick="devAutoLogin('ilham.instalasi@aplikasipercetakan.com')" class="ai-role-btn rounded-2xl bg-white px-3 py-3 text-left text-xs font-semibold text-gray-700 shadow-sm hover:bg-blue-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10 sm:col-span-2 lg:col-span-1">
                                        <div>Instalasi</div>
                                        <div class="mt-1 text-[10px] text-gray-400 dark:text-gray-500">Ilham Instalasi</div>
                                    </button>
                                </div>
                            </div>
                        @endif

                        <form id="loginForm" method="POST" action="{{ route('login') }}">
                            @csrf

                            <div class="space-y-5">
                                <!-- Email -->
                                <div>
                                    <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">
                                        Email <span class="text-error-500">*</span>
                                    </label>

                                    <div class="relative">
                                        <span class="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                                                <path d="M4 6h16v12H4z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                                                <path d="M4 7l8 6 8-6" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
                                            </svg>
                                        </span>

                                        <input
                                            type="email"
                                            id="email"
                                            name="email"
                                            value="{{ old('email') }}"
                                            placeholder="email@aplikasipercetakan.com"
                                            class="h-13 w-full rounded-2xl border border-gray-300 bg-white/80 py-3 pr-4 pl-12 text-sm text-gray-800 shadow-sm outline-none transition focus:border-brand-400 focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900/70 dark:text-white dark:placeholder:text-white/30 @error('email') border-error-500 @enderror"
                                        />
                                    </div>

                                    @error('email')
                                        <p class="mt-2 text-sm text-error-500">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Password -->
                                <div>
                                    <label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">
                                        Password <span class="text-error-500">*</span>
                                    </label>

                                    <div x-data="{ showPassword: false }" class="relative">
                                        <span class="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                                                <path d="M7 11V8a5 5 0 0110 0v3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                                <rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="2"/>
                                            </svg>
                                        </span>

                                        <input
                                            :type="showPassword ? 'text' : 'password'"
                                            name="password"
                                            placeholder="Masukkan password"
                                            class="h-13 w-full rounded-2xl border border-gray-300 bg-white/80 py-3 pr-12 pl-12 text-sm text-gray-800 shadow-sm outline-none transition focus:border-brand-400 focus:ring-4 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900/70 dark:text-white dark:placeholder:text-white/30 @error('password') border-error-500 @enderror"
                                        />

                                        <button
                                            type="button"
                                            @click="showPassword = !showPassword"
                                            class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 transition hover:text-gray-600 dark:hover:text-white/80"
                                        >
                                            <svg x-show="!showPassword" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0002 13.8619C7.23361 13.8619 4.86803 12.1372 3.92328 9.70241C4.86804 7.26761 7.23361 5.54297 10.0002 5.54297C12.7667 5.54297 15.1323 7.26762 16.0771 9.70243C15.1323 12.1372 12.7667 13.8619 10.0002 13.8619ZM10.0002 4.04297C6.48191 4.04297 3.49489 6.30917 2.4155 9.4593C2.3615 9.61687 2.3615 9.78794 2.41549 9.94552C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C13.5184 15.3619 16.5055 13.0957 17.5849 9.94555C17.6389 9.78797 17.6389 9.6169 17.5849 9.45932C16.5055 6.30919 13.5184 4.04297 10.0002 4.04297ZM9.99151 7.84413C8.96527 7.84413 8.13333 8.67606 8.13333 9.70231C8.13333 10.7286 8.96527 11.5605 9.99151 11.5605H10.0064C11.0326 11.5605 11.8646 10.7286 11.8646 9.70231C11.8646 8.67606 11.0326 7.84413 10.0064 7.84413H9.99151Z" fill="currentColor" />
                                            </svg>

                                            <svg x-show="showPassword" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.63803 3.57709C4.34513 3.2842 3.87026 3.2842 3.57737 3.57709C3.28447 3.86999 3.28447 4.34486 3.57737 4.63775L4.85323 5.91362C3.74609 6.84199 2.89363 8.06395 2.4155 9.45936C2.3615 9.61694 2.3615 9.78801 2.41549 9.94558C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C11.255 15.3619 12.4422 15.0737 13.4994 14.5598L15.3625 16.4229C15.6554 16.7158 16.1302 16.7158 16.4231 16.4229C16.716 16.13 16.716 15.6551 16.4231 15.3622L4.63803 3.57709ZM12.3608 13.4212L10.4475 11.5079C10.3061 11.5423 10.1584 11.5606 10.0064 11.5606H9.99151C8.96527 11.5606 8.13333 10.7286 8.13333 9.70237C8.13333 9.5461 8.15262 9.39434 8.18895 9.24933L5.91885 6.97923C5.03505 7.69015 4.34057 8.62704 3.92328 9.70247C4.86803 12.1373 7.23361 13.8619 10.0002 13.8619C10.8326 13.8619 11.6287 13.7058 12.3608 13.4212ZM16.0771 9.70249C15.7843 10.4569 15.3552 11.1432 14.8199 11.7311L15.8813 12.7925C16.6329 11.9813 17.2187 11.0143 17.5849 9.94561C17.6389 9.78803 17.6389 9.61696 17.5849 9.45938C16.5055 6.30925 13.5184 4.04303 10.0002 4.04303C9.13525 4.04303 8.30244 4.17999 7.52218 4.43338L8.75139 5.66259C9.1556 5.58413 9.57311 5.54303 10.0002 5.54303C12.7667 5.54303 15.1323 7.26768 16.0771 9.70249Z" fill="currentColor" />
                                            </svg>
                                        </button>
                                    </div>

                                    @error('password')
                                        <p class="mt-2 text-sm text-error-500">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="flex items-center justify-between gap-3">
                                    <label for="remember" class="inline-flex cursor-pointer items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
                                        <input
                                            type="checkbox"
                                            id="remember"
                                            name="remember"
                                            class="h-4 w-4 rounded border-gray-300 text-brand-500 focus:ring-brand-500 dark:border-gray-700 dark:bg-gray-900"
                                            {{ old('remember') ? 'checked' : '' }}
                                        />
                                        <span>Ingat saya</span>
                                    </label>

                                    <span class="text-xs text-gray-400 dark:text-gray-500">
                                        Secure AI Session
                                    </span>
                                </div>

                                <div class="pt-2">
                                    <button
                                        type="submit"
                                        class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-brand-500 px-5 py-3.5 text-sm font-semibold text-white shadow-lg shadow-brand-500/20 transition hover:bg-brand-600"
                                    >
                                        <span>Masuk ke Dashboard</span>
                                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                                            <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </form>

                        <div class="my-6 ai-line"></div>

                        <div class="grid gap-3 sm:grid-cols-3">
                            <div class="ai-outline-card rounded-2xl p-3">
                                <div class="text-xs font-bold uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">Orders</div>
                                <div class="mt-2 text-sm font-semibold text-gray-800 dark:text-white">Input cepat</div>
                            </div>

                            <div class="ai-outline-card rounded-2xl p-3">
                                <div class="text-xs font-bold uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">Kasir</div>
                                <div class="mt-2 text-sm font-semibold text-gray-800 dark:text-white">Pelunasan realtime</div>
                            </div>

                            <div class="ai-outline-card rounded-2xl p-3">
                                <div class="text-xs font-bold uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">AI</div>
                                <div class="mt-2 text-sm font-semibold text-gray-800 dark:text-white">Insight pintar</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right/Hero -->
            <div class="relative hidden overflow-hidden lg:flex lg:w-[52%]">
                <div class="login-panel-dark login-mesh relative flex w-full items-center justify-center px-10 py-12">
                    <div class="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.03)_0%,rgba(255,255,255,0)_100%)]"></div>

                    <div class="relative z-10 w-full max-w-2xl text-white">
                        <div class="mb-6">
                            <div class="hero-logo-wrap">
                                <img
                                    src="{{ \App\Models\Setting::getShopLogo() }}"
                                    alt="{{ \App\Models\Setting::getShopName() }}"
                                    class="hero-logo-img"
                                >
                            </div>
                        </div>

                        <div class="mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-xs font-bold uppercase tracking-[0.2em] text-white/90">
                            <span class="inline-block h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.95)]"></span>
                            Smart Print Intelligence
                        </div>

                        <h2 class="max-w-2xl text-4xl font-black leading-tight tracking-tight">
                            Aplikasipercetakan <span class="text-cyan-300">3.0</span>
                            <br>
                            Login rasa <span class="text-emerald-300">AI Command Center</span>
                        </h2>

                        <p class="mt-4 max-w-xl text-sm leading-8 text-slate-300">
                            Satu pintu masuk untuk order, kasir, produksi, laporan, dan insight pintar. Tampilan dibuat lebih futuristik, premium, dan tetap fokus ke kecepatan kerja tim percetakan.
                        </p>

                        <div class="mt-8 grid gap-4 md:grid-cols-2">
                            <div class="rounded-[28px] border border-white/10 bg-white/10 p-5 backdrop-blur-xl">
                                <div class="flex items-start justify-between gap-4">
                                    <div>
                                        <div class="text-xs font-bold uppercase tracking-[0.18em] text-cyan-200">AI Visual</div>
                                        <div class="mt-2 text-xl font-bold text-white">Production Pulse</div>
                                    </div>
                                    <div class="rounded-2xl bg-cyan-400/15 px-3 py-2 text-cyan-200">Live</div>
                                </div>

                                <div class="mt-5 space-y-3">
                                    <div class="rounded-2xl bg-white/8 p-3">
                                        <div class="flex items-center justify-between text-xs text-slate-300">
                                            <span>Order Flow</span>
                                            <span>92%</span>
                                        </div>
                                        <div class="mt-2 h-2 rounded-full bg-white/10">
                                            <div class="h-2 w-[92%] rounded-full bg-gradient-to-r from-cyan-300 to-emerald-300"></div>
                                        </div>
                                    </div>

                                    <div class="rounded-2xl bg-white/8 p-3">
                                        <div class="flex items-center justify-between text-xs text-slate-300">
                                            <span>Cashier Sync</span>
                                            <span>Realtime</span>
                                        </div>
                                        <div class="mt-2 h-2 rounded-full bg-white/10">
                                            <div class="h-2 w-[84%] rounded-full bg-gradient-to-r from-emerald-300 to-brand-300"></div>
                                        </div>
                                    </div>

                                    <div class="rounded-2xl bg-white/8 p-3">
                                        <div class="flex items-center justify-between text-xs text-slate-300">
                                            <span>Trace Order</span>
                                            <span>Active</span>
                                        </div>
                                        <div class="mt-2 h-2 rounded-full bg-white/10">
                                            <div class="h-2 w-[76%] rounded-full bg-gradient-to-r from-violet-300 to-cyan-300"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="rounded-[28px] border border-white/10 bg-white/10 p-5 backdrop-blur-xl">
                                <div class="text-xs font-bold uppercase tracking-[0.18em] text-emerald-200">AI Assist</div>
                                <div class="mt-2 text-xl font-bold text-white">System Highlights</div>

                                <div class="mt-5 space-y-3">
                                    <div class="rounded-2xl bg-white/8 p-4">
                                        <div class="text-sm font-semibold text-white">Order → Kasir → Produksi</div>
                                        <div class="mt-1 text-xs leading-6 text-slate-300">Alur kerja lebih terstruktur dan mudah dipantau.</div>
                                    </div>

                                    <div class="rounded-2xl bg-white/8 p-4">
                                        <div class="text-sm font-semibold text-white">Barcode Trace Order</div>
                                        <div class="mt-1 text-xs leading-6 text-slate-300">Pelanggan bisa cek progres order secara mandiri.</div>
                                    </div>

                                    <div class="rounded-2xl bg-white/8 p-4">
                                        <div class="text-sm font-semibold text-white">Insight Dashboard</div>
                                        <div class="mt-1 text-xs leading-6 text-slate-300">Owner bisa membaca performa bisnis lebih cepat.</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-6 rounded-[28px] border border-white/10 bg-white/10 p-5 backdrop-blur-xl">
                            <div class="flex flex-wrap items-center gap-3">
                                <span class="ai-chip border border-white/10 bg-white/10 text-white/90">AI-ready UI</span>
                                <span class="ai-chip border border-white/10 bg-white/10 text-white/90">Auto Login Dev</span>
                                <span class="ai-chip border border-white/10 bg-white/10 text-white/90">Dark Mode</span>
                                <span class="ai-chip border border-white/10 bg-white/10 text-white/90">Secure Access</span>
                            </div>

                            <div class="mt-4 grid grid-cols-3 gap-3">
                                <div class="rounded-2xl bg-white/8 p-4 text-center">
                                    <div class="text-[11px] uppercase tracking-[0.18em] text-slate-300">Orders</div>
                                    <div class="mt-2 text-2xl font-black text-white">01</div>
                                </div>
                                <div class="rounded-2xl bg-white/8 p-4 text-center">
                                    <div class="text-[11px] uppercase tracking-[0.18em] text-slate-300">Kasir</div>
                                    <div class="mt-2 text-2xl font-black text-white">02</div>
                                </div>
                                <div class="rounded-2xl bg-white/8 p-4 text-center">
                                    <div class="text-[11px] uppercase tracking-[0.18em] text-slate-300">AI</div>
                                    <div class="mt-2 text-2xl font-black text-white">03</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Theme Toggler -->
        <div class="fixed right-6 bottom-6 z-50">
            <button
                class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-brand-500 text-white shadow-lg shadow-brand-500/25 transition-colors hover:bg-brand-600"
                @click.prevent="$store.theme.toggle()"
            >
                <svg class="hidden fill-current dark:block" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 1.5415C10.4142 1.5415 10.75 1.87729 10.75 2.2915V3.5415C10.75 3.95572 10.4142 4.2915 9.99998 4.2915C9.58577 4.2915 9.24998 3.95572 9.24998 3.5415V2.2915C9.24998 1.87729 9.58577 1.5415 9.99998 1.5415ZM10.0009 6.79327C8.22978 6.79327 6.79402 8.22904 6.79402 10.0001C6.79402 11.7712 8.22978 13.207 10.0009 13.207C11.772 13.207 13.2078 11.7712 13.2078 10.0001C13.2078 8.22904 11.772 6.79327 10.0009 6.79327ZM5.29402 10.0001C5.29402 7.40061 7.40135 5.29327 10.0009 5.29327C12.6004 5.29327 14.7078 7.40061 14.7078 10.0001C14.7078 12.5997 12.6004 14.707 10.0009 14.707C7.40135 14.707 5.29402 12.5997 5.29402 10.0001ZM15.9813 5.08035C16.2742 4.78746 16.2742 4.31258 15.9813 4.01969C15.6884 3.7268 15.2135 3.7268 14.9207 4.01969L14.0368 4.90357C13.7439 5.19647 13.7439 5.67134 14.0368 5.96423C14.3297 6.25713 14.8045 6.25713 15.0974 5.96423L15.9813 5.08035ZM18.4577 10.0001C18.4577 10.4143 18.1219 10.7501 17.7077 10.7501H16.4577C16.0435 10.7501 15.7077 10.4143 15.7077 10.0001C15.7077 9.58592 16.0435 9.25013 16.4577 9.25013H17.7077C18.1219 9.25013 18.4577 9.58592 18.4577 10.0001ZM14.9207 15.9806C15.2135 16.2735 15.6884 16.2735 15.9813 15.9806C16.2742 15.6877 16.2742 15.2128 15.9813 14.9199L15.0974 14.036C14.8045 13.7431 14.3297 13.7431 14.0368 14.036C13.7439 14.3289 13.7439 14.8038 14.0368 15.0967L14.9207 15.9806ZM9.99998 15.7088C10.4142 15.7088 10.75 16.0445 10.75 16.4588V17.7088C10.75 18.123 10.4142 18.4588 9.99998 18.4588C9.58577 18.4588 9.24998 18.123 9.24998 17.7088V16.4588C9.24998 16.0445 9.58577 15.7088 9.99998 15.7088ZM5.96356 15.0972C6.25646 14.8043 6.25646 14.3295 5.96356 14.0366C5.67067 13.7437 5.1958 13.7437 4.9029 14.0366L4.01902 14.9204C3.72613 15.2133 3.72613 15.6882 4.01902 15.9811C4.31191 16.274 4.78679 16.274 5.07968 15.9811L5.96356 15.0972ZM4.29224 10.0001C4.29224 10.4143 3.95645 10.7501 3.54224 10.7501H2.29224C1.87802 10.7501 1.54224 10.4143 1.54224 10.0001C1.54224 9.58592 1.87802 9.25013 2.29224 9.25013H3.54224C3.95645 9.25013 4.29224 9.58592 4.29224 10.0001ZM4.9029 5.9637C5.1958 6.25659 5.67067 6.25659 5.96356 5.9637C6.25646 5.6708 6.25646 5.19593 5.96356 4.90303L5.07968 4.01915C4.78679 3.72626 4.31191 3.72626 4.01902 4.01915C3.72613 4.31204 3.72613 4.78692 4.01902 5.07981L4.9029 5.9637Z" fill="currentColor" />
                </svg>

                <svg class="fill-current dark:hidden" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M17.4547 11.97L18.1799 12.1611C18.265 11.8383 18.1265 11.4982 17.8401 11.3266C17.5538 11.1551 17.1885 11.1934 16.944 11.4207L17.4547 11.97ZM8.0306 2.5459L8.57989 3.05657C8.80718 2.81209 8.84554 2.44682 8.67398 2.16046C8.50243 1.8741 8.16227 1.73559 7.83948 1.82066L8.0306 2.5459ZM12.9154 13.0035C9.64678 13.0035 6.99707 10.3538 6.99707 7.08524H5.49707C5.49707 11.1823 8.81835 14.5035 12.9154 14.5035V13.0035ZM16.944 11.4207C15.8869 12.4035 14.4721 13.0035 12.9154 13.0035V14.5035C14.8657 14.5035 16.6418 13.7499 17.9654 12.5193L16.944 11.4207ZM16.7295 11.7789C15.9437 14.7607 13.2277 16.9586 10.0003 16.9586V18.4586C13.9257 18.4586 17.2249 15.7853 18.1799 12.1611L16.7295 11.7789ZM10.0003 16.9586C6.15734 16.9586 3.04199 13.8433 3.04199 10.0003H1.54199C1.54199 14.6717 5.32892 18.4586 10.0003 18.4586V16.9586ZM3.04199 10.0003C3.04199 6.77289 5.23988 4.05695 8.22173 3.27114L7.83948 1.82066C4.21532 2.77574 1.54199 6.07486 1.54199 10.0003H3.04199ZM6.99707 7.08524C6.99707 5.52854 7.5971 4.11366 8.57989 3.05657L7.48132 2.03522C6.25073 3.35885 5.49707 5.13487 5.49707 7.08524H6.99707Z" fill="currentColor" />
                </svg>
            </button>
        </div>
    </div>

    @if(config('app.debug'))
        <script>
            function devAutoLogin(email) {
                if (!email) return;

                const form = document.getElementById('loginForm');
                const emailInput = document.getElementById('email');
                const passwordInput = form.querySelector('input[name="password"]');

                emailInput.value = email;
                passwordInput.value = 'password';
                form.submit();
            }
        </script>
    @endif
@endsection