<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEXUS | Neural Exchange & Unified System</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">

    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --black:         #0a0a0a;
            --surface:       #141414;
            --line:          #222222;
            --line2:         #2e2e2e;
            --orange:        #e8842a;
            --orange-dim:    rgba(232, 132, 42, 0.06);
            --orange-border: rgba(232, 132, 42, 0.40);
            --white:         #f5f5f5;
            --grey:          #999999;
            --grey-dim:      #7a7a7a;
            --green:         #00aa00;
            --red:           #cc0000;
            --font-display:  'Bebas Neue', sans-serif;
            --font-body:     'DM Sans', sans-serif;
            --font-mono:     'IBM Plex Mono', monospace;
        }

        html, body {
            height: 100%;
            background: var(--black);
            color: var(--white);
            font-family: var(--font-body);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }


        /* ─── SYS-BAR  32px ─── */

        .sys-bar {
            width: 100%;
            height: 32px;
            background: var(--black);
            border-bottom: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 28px;
            flex-shrink: 0;
            animation: fadeIn 0.3s ease both;
        }

        .sys-bar-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .sys-bar-mark {
            width: 18px;
            height: 18px;
            border: 1px solid var(--orange);
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .sys-bar-mark span {
            font-family: var(--font-display);
            font-size: 11px;
            color: var(--orange);
            line-height: 1;
        }

        .sys-bar-item {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--grey-dim);
        }

        .sys-bar-item.live {
            color: var(--orange);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sys-bar-item.live::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--green);
            animation: blink 2s ease infinite;
        }

        .sys-bar-right {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 1.5px;
            color: var(--grey-dim);
        }


        /* ─── MAIN ─── */

        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 24px;
        }

        .terminal {
            width: 100%;
            max-width: 480px;
        }


        /* ─── IDENTITY ─── */

        .identity {
            margin-bottom: 32px;
            animation: fadeUp 0.4s ease both;
        }

        .identity-top {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--line);
        }

        .nexus-mark {
            width: 36px;
            height: 36px;
            border: 1px solid var(--orange);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .nexus-mark svg { width: 18px; height: 18px; }

        .identity-sys { flex: 1; }

        .identity-sys-name {
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--grey);
            line-height: 1;
            margin-bottom: 3px;
        }

        .identity-sys-sub {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 1.5px;
            color: var(--grey-dim);
        }

        .identity-version {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 1.5px;
            color: var(--grey-dim);
            text-align: right;
        }

        .identity-version span {
            display: block;
            color: var(--orange);
            font-size: 11px;
            letter-spacing: 2px;
        }

        .system-name {
            margin-top: 16px;
            margin-bottom: 4px;
        }

        .system-name h1 {
            font-family: var(--font-display);
            font-size: 72px;
            line-height: 0.88;
            letter-spacing: 4px;
            color: var(--white);
        }

        .system-name h1 em {
            display: block;
            font-style: normal;
            color: var(--orange);
        }

        .system-expansion {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border: 1px solid var(--line);
            border-top: 2px solid var(--orange);
            border-radius: 0 0 4px 4px;
            overflow: hidden;
            margin-top: 12px;
        }

        .expansion-cell {
            padding: 10px 12px;
            border-right: 1px solid var(--line);
        }

        .expansion-cell:last-child { border-right: none; }

        .expansion-letter {
            font-family: var(--font-display);
            font-size: 22px;
            letter-spacing: 1px;
            color: var(--orange);
            line-height: 1;
            margin-bottom: 3px;
        }

        .expansion-word {
            font-family: var(--font-mono);
            font-size: 8px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--grey);
            line-height: 1.3;
        }


        /* ─── AUTH DIVIDER ─── */

        .auth-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
            animation: fadeUp 0.4s 0.08s ease both;
        }

        .auth-divider-line {
            flex: 1;
            height: 1px;
            background: var(--line);
        }

        .auth-divider-label {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--grey-dim);
            white-space: nowrap;
        }


        /* ─── ERROR ─── */

        .alert {
            padding: 10px 14px;
            border-left: 2px solid var(--red);
            border-radius: 0 4px 4px 0;
            background: rgba(204, 0, 0, 0.06);
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: 0.5px;
            color: #e05c4a;
            margin-bottom: 24px;
            line-height: 1.5;
            animation: fadeUp 0.3s ease both;
        }


        /* ─── FORM ─── */

        .form-group {
            margin-bottom: 0;
            border-bottom: 1px solid var(--line);
            transition: border-color 0.15s;
        }

        .form-group:first-of-type {
            border-top: 1px solid var(--line);
        }

        .form-row {
            display: flex;
            align-items: stretch;
        }

        .form-label-col {
            width: 120px;
            flex-shrink: 0;
            border-right: 1px solid var(--line);
            padding: 14px;
            display: flex;
            align-items: center;
            transition: border-color 0.15s, background-color 0.15s;
        }

        .form-label-col label {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--grey-dim);
            cursor: pointer;
            transition: color 0.15s;
        }

        .form-input-col {
            flex: 1;
            transition: background-color 0.15s;
        }

        input[type="email"],
        input[type="password"] {
            width: 100%;
            height: 100%;
            min-height: 48px;
            padding: 14px 16px;
            background: transparent;
            border: none;
            color: var(--white);
            font-family: var(--font-mono);
            font-size: 16px;
            letter-spacing: 0.5px;
            outline: none;
            border-radius: 0;
            -webkit-appearance: none;
        }

        input::placeholder {
            color: var(--grey-dim);
            font-size: 13px;
            letter-spacing: 0.5px;
        }

        .form-group:focus-within .form-label-col {
            border-right-color: var(--orange);
            background: rgba(232, 132, 42, 0.03);
        }

        .form-group:focus-within .form-label-col label {
            color: var(--orange);
        }

        .form-group:focus-within .form-input-col {
            background: rgba(232, 132, 42, 0.03);
        }


        /* ─── SUBMIT ─── */

        .submit-row {
            margin-top: 16px;
            animation: fadeUp 0.4s 0.16s ease both;
        }

        .btn-submit {
            width: 100%;
            padding: 18px 16px;
            background: var(--orange);
            border: none;
            border-radius: 8px;
            color: var(--black);
            font-family: var(--font-display);
            font-size: 18px;
            letter-spacing: 6px;
            cursor: pointer;
            transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            box-shadow: 0 2px 16px rgba(232, 132, 42, 0.25);
        }

        .btn-submit:hover  {
            background: #d4771e;
            transform: translateY(-1px);
            box-shadow: 0 4px 24px rgba(232, 132, 42, 0.35);
        }

        .btn-submit:active {
            background: #bf6b1a;
            transform: translateY(0);
            box-shadow: 0 2px 12px rgba(232, 132, 42, 0.2);
        }

        .btn-submit:disabled {
            background: var(--grey-dim);
            cursor: not-allowed;
            color: var(--grey);
        }

        .btn-arrow {
            font-size: 16px;
            transition: transform 0.15s ease;
        }

        .btn-submit:hover .btn-arrow { transform: translateX(4px); }


        /* ─── SYSTEM STATS ─── */

        .sys-footer {
            margin-top: 24px;
            display: grid;
            grid-template-columns: 1fr 1px 1fr 1px 1fr;
            border: 1px solid var(--line);
            border-radius: 4px;
            overflow: hidden;
            animation: fadeUp 0.4s 0.20s ease both;
        }

        .sys-footer-divider { background: var(--line); }

        .sys-stat { padding: 10px 14px; }

        .sys-stat-label {
            font-family: var(--font-mono);
            font-size: 8px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--grey-dim);
            margin-bottom: 4px;
        }

        .sys-stat-value {
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: 1px;
            color: var(--grey);
        }

        .sys-stat-value.live {
            color: var(--green);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .sys-stat-value.live::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--green);
            flex-shrink: 0;
            animation: blink 2s ease infinite;
        }

        .sys-stat-value.orange { color: var(--orange); }


        /* ─── BOTTOM BAR ─── */

        .bottom-bar {
            padding: 16px 28px;
            border-top: 1px solid var(--line);
            display: flex;
            justify-content: space-between;
            align-items: center;
            animation: fadeIn 0.4s 0.3s ease both;
        }

        .bottom-bar span {
            font-family: var(--font-mono);
            font-size: 9px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--grey-dim);
        }


        /* ─── ANIMATIONS ─── */

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50%      { opacity: 0.2; }
        }


        /* ─── RESPONSIVE ─── */

        @media (max-width: 520px) {
            .sys-bar                     { padding: 0 16px; }
            .main                        { padding: 20px 16px; justify-content: flex-start; }
            .system-name h1              { font-size: 52px; }
            .form-label-col              { width: 88px; padding: 12px; }
            .form-label-col label        { font-size: 8px; letter-spacing: 1.5px; }
            .bottom-bar                  { padding: 12px 16px; flex-direction: column; gap: 6px; text-align: center; }
            .sys-bar-left                { gap: 10px; }
            .sys-bar-item:not(.live)     { display: none; }
        }
    </style>
</head>
<body>

    {{-- SYS-BAR --}}
    <div class="sys-bar">
        <div class="sys-bar-left">
            <div class="sys-bar-mark"><span>N</span></div>
            <span class="sys-bar-item live">GE-AS NEXUS</span>
            <span class="sys-bar-item">RESTRICTED ACCESS</span>
        </div>
        <div class="sys-bar-right" id="sysTime">--:--:-- UTC</div>
    </div>

    {{-- MAIN --}}
    <main class="main">
        <div class="terminal">

            {{-- IDENTITY --}}
            <div class="identity">
                <div class="identity-top">
                    <div class="nexus-mark">
                        <svg viewBox="0 0 18 18" fill="none">
                            <line x1="3" y1="3" x2="3" y2="15" stroke="#e8842a" stroke-width="2" stroke-linecap="round"/>
                            <line x1="15" y1="3" x2="15" y2="15" stroke="#e8842a" stroke-width="2" stroke-linecap="round"/>
                            <line x1="3" y1="3" x2="15" y2="15" stroke="#e8842a" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                    </div>
                    <div class="identity-sys">
                        <div class="identity-sys-name">GE-AS.COM</div>
                        <div class="identity-sys-sub">Global E-Commerce Arbitrage Store</div>
                    </div>
                    <div class="identity-version">
                        <div>Build</div>
                        <span>v1.0</span>
                    </div>
                </div>

                <div class="system-name">
                    <h1>NEXUS<em>ENGINE</em></h1>
                </div>

                <div class="system-expansion">
                    <div class="expansion-cell">
                        <div class="expansion-letter">N</div>
                        <div class="expansion-word">Neural</div>
                    </div>
                    <div class="expansion-cell">
                        <div class="expansion-letter">E</div>
                        <div class="expansion-word">Exchange</div>
                    </div>
                    <div class="expansion-cell">
                        <div class="expansion-letter">X</div>
                        <div class="expansion-word">& Unified</div>
                    </div>
                    <div class="expansion-cell">
                        <div class="expansion-letter">US</div>
                        <div class="expansion-word">System</div>
                    </div>
                </div>
            </div>

            {{-- AUTH DIVIDER --}}
            <div class="auth-divider">
                <div class="auth-divider-line"></div>
                <span class="auth-divider-label">Authentication Required</span>
                <div class="auth-divider-line"></div>
            </div>

            {{-- ERRORS --}}
            @if (session('error'))
                <div class="alert">ERR -- {{ session('error') }}</div>
            @endif

            @if ($errors->any())
                <div class="alert">ERR -- {{ $errors->first() }}</div>
            @endif

            {{-- FORM --}}
            <form method="POST" action="{{ route('nexus.login.submit') }}" id="loginForm">
                @csrf

                <div class="form-group" style="animation: fadeUp 0.4s 0.10s ease both;">
                    <div class="form-row">
                        <div class="form-label-col">
                            <label for="email">Email</label>
                        </div>
                        <div class="form-input-col">
                            <input
                                type="email"
                                id="email"
                                name="email"
                                value="{{ old('email') }}"
                                placeholder="admin@ge-as.com"
                                autocomplete="email"
                                required
                                autofocus
                            >
                        </div>
                    </div>
                </div>

                <div class="form-group" style="animation: fadeUp 0.4s 0.13s ease both;">
                    <div class="form-row">
                        <div class="form-label-col">
                            <label for="password">Password</label>
                        </div>
                        <div class="form-input-col">
                            <input
                                type="password"
                                id="password"
                                name="password"
                                placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;"
                                autocomplete="current-password"
                                required
                            >
                        </div>
                    </div>
                </div>

                <div class="submit-row">
                    <button type="submit" class="btn-submit" id="submitBtn">
                        <span>AUTHENTICATE</span>
                        <span class="btn-arrow">&#8594;</span>
                    </button>
                </div>
            </form>

            {{-- SYSTEM STATS --}}
            <div class="sys-footer">
                <div class="sys-stat">
                    <div class="sys-stat-label">System</div>
                    <div class="sys-stat-value live">Operational</div>
                </div>
                <div class="sys-footer-divider"></div>
                <div class="sys-stat">
                    <div class="sys-stat-label">Sessions / Day</div>
                    <div class="sys-stat-value orange">3 Active</div>
                </div>
                <div class="sys-footer-divider"></div>
                <div class="sys-stat">
                    <div class="sys-stat-label">Eval Engine</div>
                    <div class="sys-stat-value">9-Step</div>
                </div>
            </div>

        </div>
    </main>

    {{-- BOTTOM BAR --}}
    <div class="bottom-bar">
        <span>&copy; {{ date('Y') }} GE-AS.COM -- Internal use only</span>
        <span>NEXUS ENGINE &nbsp;&bull;&nbsp; Neural Exchange & Unified System</span>
    </div>

<script>
    function updateTime() {
        var now = new Date();
        var h = String(now.getUTCHours()).padStart(2, '0');
        var m = String(now.getUTCMinutes()).padStart(2, '0');
        var s = String(now.getUTCSeconds()).padStart(2, '0');
        document.getElementById('sysTime').textContent = h + ':' + m + ':' + s + ' UTC';
    }
    updateTime();
    setInterval(updateTime, 1000);

    document.getElementById('loginForm').addEventListener('submit', function () {
        var btn = document.getElementById('submitBtn');
        btn.disabled = true;
        btn.innerHTML = '<span>VERIFYING</span><span class="btn-arrow">&#8230;</span>';
    });
</script>

</body>
</html>
