<x-guest-layout>
    <style>
        .zt-auth-stage {
            min-height: calc(100vh - 150px);
            padding: 34px 24px 64px;
            background:
                radial-gradient(circle at 12% 10%, rgba(124, 0, 255, .10), transparent 28%),
                #f4edff;
        }

        .zt-auth-shell {
            width: min(1220px, 100%);
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(430px, .96fr);
            overflow: hidden;
            border: 1px solid rgba(124, 58, 237, .10);
            border-radius: 28px;
            background: #fff;
            box-shadow: 0 28px 80px rgba(54, 22, 98, .12);
        }

        .zt-auth-form-pane {
            display: flex;
            align-items: center;
            min-height: 660px;
            padding: 62px 68px;
        }

        .zt-auth-form-wrap {
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
        }

        .zt-auth-kicker {
            color: #7c00ff;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

        .zt-auth-title {
            margin: 12px 0 10px;
            color: #0d1733;
            font-size: clamp(38px, 4vw, 52px);
            line-height: 1.02;
            letter-spacing: -.035em;
        }

        .zt-auth-copy {
            margin: 0 0 30px;
            color: #5e6780;
            font-size: 16px;
            line-height: 1.65;
        }

        .zt-auth-copy a,
        .zt-auth-row a {
            color: #7c00ff;
            font-weight: 800;
            text-decoration: none;
        }

        .zt-auth-field {
            display: grid;
            gap: 8px;
            margin-bottom: 17px;
        }

        .zt-auth-field > label {
            color: #202b47;
            font-size: 13px;
            font-weight: 800;
        }

        .zt-auth-input-wrap {
            position: relative;
        }

        .zt-auth-input {
            width: 100%;
            min-height: 56px;
            box-sizing: border-box;
            padding: 15px 16px;
            border: 1px solid #b9c5d8;
            border-radius: 12px;
            outline: none;
            background: #f8fbff;
            color: #0d1733;
            font-size: 15px;
            transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .zt-auth-input:focus {
            border-color: #8b00ff;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(124, 0, 255, .10);
        }

        .zt-auth-input-wrap .zt-auth-input {
            padding-right: 50px;
        }

        .zt-password-toggle {
            position: absolute;
            top: 50%;
            right: 12px;
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            padding: 0;
            transform: translateY(-50%);
            border: 0;
            border-radius: 9px;
            background: transparent;
            color: #556078;
            cursor: pointer;
        }

        .zt-password-toggle:hover {
            background: #eee7ff;
            color: #7100f0;
        }

        .zt-captcha-row {
            display: grid;
            grid-template-columns: minmax(205px, 230px) 44px minmax(160px, 1fr);
            gap: 9px;
            align-items: stretch;
        }

        .zt-captcha-preview {
            min-height: 56px;
            display: grid;
            place-items: center;
            overflow: hidden;
            border: 1px solid #b9c5d8;
            border-radius: 12px;
            background: #eef2ff;
        }

        .zt-captcha-preview img {
            display: block;
            width: 100%;
            height: 56px;
            object-fit: contain;
        }

        .zt-captcha-refresh {
            min-height: 56px;
            border: 0;
            border-radius: 12px;
            background: #172036;
            color: #fff;
            cursor: pointer;
            transition: transform .2s ease, background .2s ease;
        }

        .zt-captcha-refresh:hover {
            background: #7100f0;
            transform: translateY(-1px);
        }

        .zt-auth-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin: 4px 0 23px;
            font-size: 13px;
        }

        .zt-auth-row label {
            display: flex;
            align-items: center;
            gap: 9px;
            color: #4b556b;
        }

        .zt-auth-row input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #7c00ff;
        }

        .zt-auth-submit {
            width: 100%;
            min-height: 56px;
            border: 0;
            border-radius: 12px;
            background: linear-gradient(90deg, #6f00ff, #9200ff);
            box-shadow: 0 14px 30px rgba(124, 0, 255, .20);
            color: #fff;
            font-weight: 900;
            cursor: pointer;
        }

        .zt-auth-visual {
            position: relative;
            min-height: 660px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            overflow: hidden;
            padding: 54px 58px;
            background: linear-gradient(145deg, #6500ef 0%, #9200ff 100%);
            color: #fff;
        }

        .zt-auth-visual::before,
        .zt-auth-visual::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, .08);
        }

        .zt-auth-visual::before {
            width: 310px;
            height: 310px;
            top: -110px;
            right: -90px;
        }

        .zt-auth-visual::after {
            width: 220px;
            height: 220px;
            bottom: -100px;
            left: -80px;
        }

        .zt-auth-visual img {
            position: absolute;
            top: 46%;
            left: 50%;
            width: min(86%, 455px);
            max-height: 390px;
            object-fit: contain;
            transform: translate(-50%, -50%);
            filter: drop-shadow(0 24px 35px rgba(25, 0, 64, .22));
        }

        .zt-auth-visual-copy {
            position: relative;
            z-index: 1;
        }

        .zt-auth-visual h2 {
            margin: 0 0 10px;
            font-size: 31px;
            line-height: 1.15;
        }

        .zt-auth-visual p {
            max-width: 420px;
            margin: 0;
            color: rgba(255, 255, 255, .80);
            font-size: 16px;
            line-height: 1.65;
        }

        .zt-auth-alert {
            margin: 0 0 18px;
            padding: 12px 14px;
            border-radius: 10px;
            font-size: 14px;
        }

        .zt-auth-error {
            border: 1px solid #fecdd3;
            background: #fff1f2;
            color: #9f1239;
        }

        .zt-auth-status {
            border: 1px solid #a7f3d0;
            background: #ecfdf5;
            color: #065f46;
        }

        @media (max-width: 980px) {
            .zt-auth-shell {
                grid-template-columns: 1fr;
                max-width: 720px;
            }

            .zt-auth-visual {
                display: none;
            }

            .zt-auth-form-pane {
                min-height: 0;
                padding: 50px 38px;
            }
        }

        @media (max-width: 620px) {
            .zt-auth-stage {
                padding: 20px 10px 46px;
            }

            .zt-auth-shell {
                border-radius: 20px;
            }

            .zt-auth-form-pane {
                padding: 38px 18px;
            }

            .zt-captcha-row {
                grid-template-columns: minmax(0, 1fr) 44px;
            }

            .zt-captcha-row .zt-auth-input {
                grid-column: 1 / -1;
            }

            .zt-auth-row {
                align-items: flex-start;
                flex-direction: column;
                gap: 12px;
            }
        }
    </style>

    <main class="zt-auth-stage">
        <div class="zt-auth-shell">
            <section class="zt-auth-form-pane">
                <div class="zt-auth-form-wrap">
                    <span class="zt-auth-kicker">Client Area</span>
                    <h1 class="zt-auth-title">Log in</h1>
                    <p class="zt-auth-copy">Access your services, domains, invoices, and support. New customer? <a href="{{ route('register') }}">Create an account</a>.</p>

                    @if (session('status'))
                        <div class="zt-auth-alert zt-auth-status">{{ session('status') }}</div>
                    @endif
                    @if ($errors->any())
                        <div class="zt-auth-alert zt-auth-error">{{ $errors->first() }}</div>
                    @endif

                    <form method="POST" action="{{ route('login') }}">
                        @csrf
                        <div class="zt-auth-field">
                            <label for="email">Email address</label>
                            <input id="email" class="zt-auth-input" type="email" name="email" value="{{ old('email') }}" placeholder="name@example.com" required autofocus autocomplete="username">
                        </div>

                        <div class="zt-auth-field">
                            <label for="password">Password</label>
                            <div class="zt-auth-input-wrap">
                                <input id="password" class="zt-auth-input" type="password" name="password" placeholder="Enter your password" required autocomplete="current-password">
                                <button class="zt-password-toggle" type="button" aria-label="Show password" onclick="ztTogglePassword('password', this)"><i class="fa-regular fa-eye"></i></button>
                            </div>
                        </div>

                        <div class="zt-auth-field">
                            <label for="captcha">Security code</label>
                            <div class="zt-captcha-row">
                                <div class="zt-captcha-preview">
                                    <img id="zt-login-captcha" src="{{ captcha_src('flat') }}" alt="Security code">
                                </div>
                                <button class="zt-captcha-refresh" type="button" aria-label="Refresh security code" onclick="ztRefreshCaptcha('zt-login-captcha')"><i class="fa-solid fa-rotate"></i></button>
                                <input id="captcha" class="zt-auth-input" type="text" name="captcha" placeholder="Enter code" required autocomplete="off" autocapitalize="none" spellcheck="false">
                            </div>
                        </div>

                        <div class="zt-auth-row">
                            <label><input type="checkbox" name="remember"> Remember me</label>
                            @if (Route::has('password.request'))
                                <a href="{{ route('password.request') }}">Forgot password?</a>
                            @endif
                        </div>

                        <button class="zt-auth-submit" type="submit">Log in</button>
                    </form>
                </div>
            </section>

            <aside class="zt-auth-visual">
                <img src="{{ asset('images/login-illustration.png') }}" alt="Hosting account illustration">
                <div class="zt-auth-visual-copy">
                    <h2>Everything in one place</h2>
                    <p>Manage your hosting, domains, invoices, and account securely.</p>
                </div>
            </aside>
        </div>
    </main>

    <script>
        function ztTogglePassword(id, button) {
            const input = document.getElementById(id);
            if (!input) return;
            input.type = input.type === 'password' ? 'text' : 'password';
            const icon = button.querySelector('i');
            if (icon) icon.className = input.type === 'password' ? 'fa-regular fa-eye' : 'fa-regular fa-eye-slash';
            button.setAttribute('aria-label', input.type === 'password' ? 'Show password' : 'Hide password');
        }

        function ztRefreshCaptcha(id) {
            const image = document.getElementById(id);
            if (!image) return;
            const base = @json(captcha_src('flat'));
            image.src = base + (base.includes('?') ? '&' : '?') + 'refresh=' + Date.now();
        }
    </script>
</x-guest-layout>
