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

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

        .zt-register-form-pane {
            min-width: 0;
            padding: 50px 58px 56px;
            border-radius: 28px 0 0 28px;
            background: #fff;
        }

        .zt-register-side {
            position: relative;
            min-width: 0;
            overflow: clip;
            border-radius: 0 28px 28px 0;
            background: linear-gradient(150deg, #6500ef 0%, #9200ff 100%);
            color: #fff;
        }

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

        .zt-register-side::before {
            width: 300px;
            height: 300px;
            top: -120px;
            right: -110px;
        }

        .zt-register-side::after {
            width: 230px;
            height: 230px;
            bottom: -100px;
            left: -90px;
        }

        .zt-register-side-inner {
            position: sticky;
            top: 92px;
            min-height: calc(100vh - 116px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-sizing: border-box;
            padding: 54px 48px;
        }

        .zt-register-side img {
            position: relative;
            z-index: 1;
            width: 100%;
            max-height: 330px;
            object-fit: contain;
            margin-bottom: 34px;
            filter: drop-shadow(0 24px 35px rgba(25, 0, 64, .22));
        }

        .zt-register-side-copy {
            position: relative;
            z-index: 1;
        }

        .zt-register-side h2 {
            margin: 0 0 12px;
            font-size: 32px;
            line-height: 1.16;
            letter-spacing: -.02em;
        }

        .zt-register-side p {
            margin: 0;
            color: rgba(255, 255, 255, .82);
            font-size: 16px;
            line-height: 1.7;
        }

        .zt-register-benefits {
            position: relative;
            z-index: 1;
            display: grid;
            gap: 10px;
            margin-top: 28px;
        }

        .zt-register-benefit {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, .90);
            font-size: 14px;
            font-weight: 700;
        }

        .zt-register-benefit i {
            width: 27px;
            height: 27px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, .15);
            font-size: 12px;
        }

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

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

        .zt-register-copy {
            margin: 0 0 30px;
            color: #647089;
            font-size: 15px;
        }

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

        .zt-register-section {
            margin-top: 28px;
            padding-top: 25px;
            border-top: 1px solid #e8edf5;
        }

        .zt-register-section:first-of-type {
            margin-top: 0;
            padding-top: 0;
            border-top: 0;
        }

        .zt-register-section-head {
            margin-bottom: 17px;
        }

        .zt-register-section h3 {
            margin: 0;
            color: #18233f;
            font-size: 18px;
            line-height: 1.3;
        }

        .zt-register-section-head p {
            margin: 5px 0 0;
            color: #778197;
            font-size: 13px;
        }

        .zt-register-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .zt-register-field {
            min-width: 0;
            display: grid;
            gap: 8px;
        }

        .zt-register-field.full {
            grid-column: 1 / -1;
        }

        .zt-register-field label {
            color: #29344e;
            font-size: 13px;
            font-weight: 800;
        }

        .zt-register-field label small {
            color: #7b8497;
            font-weight: 600;
        }

        .zt-register-input {
            width: 100%;
            min-height: 52px;
            box-sizing: border-box;
            padding: 13px 14px;
            border: 1px solid #b9c5d8;
            border-radius: 11px;
            outline: none;
            background: #f8fbff;
            color: #0d1733;
            font-size: 14px;
            transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }

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

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

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

        .zt-register-password-toggle {
            position: absolute;
            top: 50%;
            right: 10px;
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            padding: 0;
            transform: translateY(-50%);
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: #59647b;
            cursor: pointer;
        }

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

        .zt-phone-grid {
            display: grid;
            grid-template-columns: 90px minmax(0, 1fr);
            gap: 8px;
        }

        .zt-register-captcha {
            display: grid;
            grid-template-columns: minmax(210px, 240px) 44px minmax(180px, 1fr);
            gap: 9px;
            align-items: stretch;
        }

        .zt-register-captcha-image {
            min-height: 54px;
            display: grid;
            place-items: center;
            overflow: hidden;
            border: 1px solid #b9c5d8;
            border-radius: 11px;
            background: #eef2ff;
        }

        .zt-register-captcha-image img {
            display: block;
            width: 100%;
            height: 54px;
            object-fit: contain;
        }

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

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

        .zt-register-submit {
            width: 100%;
            min-height: 56px;
            margin-top: 28px;
            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-register-alert {
            margin: 0 0 20px;
            padding: 12px 14px;
            border: 1px solid #fecdd3;
            border-radius: 10px;
            background: #fff1f2;
            color: #9f1239;
        }

        @media (max-width: 1050px) {
            .zt-register-shell {
                grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
            }

            .zt-register-form-pane {
                padding: 46px 38px 52px;
            }

            .zt-register-side-inner {
                padding: 46px 34px;
            }
        }

        @media (max-width: 900px) {
            .zt-register-shell {
                grid-template-columns: 1fr;
                max-width: 760px;
                overflow: hidden;
            }

            .zt-register-side {
                display: none;
            }

            .zt-register-form-pane {
                border-radius: 28px;
                padding: 44px 32px 50px;
            }
        }

        @media (max-width: 660px) {
            .zt-register-stage {
                padding: 18px 10px 46px;
            }

            .zt-register-shell,
            .zt-register-form-pane {
                border-radius: 20px;
            }

            .zt-register-form-pane {
                padding: 36px 18px 42px;
            }

            .zt-register-grid {
                grid-template-columns: 1fr;
            }

            .zt-register-field.full {
                grid-column: auto;
            }

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

            .zt-register-captcha .zt-register-input {
                grid-column: 1 / -1;
            }
        }
    </style>

    <main class="zt-register-stage">
        <div class="zt-register-shell">
            <section class="zt-register-form-pane">
                <span class="zt-register-kicker">New Customer</span>
                <h1 class="zt-register-title">Create account</h1>
                <p class="zt-register-copy">Already registered? <a href="{{ route('login') }}">Log in here</a>.</p>

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

                <form method="POST" action="{{ route('register') }}">
                    @csrf
                    <section class="zt-register-section">
                        <div class="zt-register-section-head">
                            <h3>Personal information</h3>
                            <p>Use the same details you want connected to your services and invoices.</p>
                        </div>
                        <div class="zt-register-grid">
                            <div class="zt-register-field">
                                <label for="first_name">First name</label>
                                <input id="first_name" class="zt-register-input" name="first_name" value="{{ old('first_name') }}" required autofocus autocomplete="given-name">
                            </div>
                            <div class="zt-register-field">
                                <label for="last_name">Last name</label>
                                <input id="last_name" class="zt-register-input" name="last_name" value="{{ old('last_name') }}" required autocomplete="family-name">
                            </div>
                            <div class="zt-register-field">
                                <label for="register_email">Email address</label>
                                <input id="register_email" class="zt-register-input" type="email" name="email" value="{{ old('email') }}" required autocomplete="email">
                            </div>
                            <div class="zt-register-field">
                                <label for="register_phone">Phone number</label>
                                <div class="zt-phone-grid">
                                    <input class="zt-register-input" name="phone_country_code" value="{{ old('phone_country_code', '+92') }}" aria-label="Country calling code" autocomplete="tel-country-code">
                                    <input id="register_phone" class="zt-register-input" name="phone" value="{{ old('phone') }}" placeholder="3012345678" autocomplete="tel-national">
                                </div>
                            </div>
                        </div>
                    </section>

                    <section class="zt-register-section">
                        <div class="zt-register-section-head">
                            <h3>Billing address</h3>
                            <p>This address is used for invoices and domain registration records.</p>
                        </div>
                        <div class="zt-register-grid">
                            <div class="zt-register-field">
                                <label for="company_name">Company name <small>(optional)</small></label>
                                <input id="company_name" class="zt-register-input" name="company_name" value="{{ old('company_name') }}" autocomplete="organization">
                            </div>
                            <div class="zt-register-field">
                                <label for="country">Country</label>
                                <select id="country" class="zt-register-input" name="country" required autocomplete="country">
                                    <option value="PK" {{ old('country','PK') === 'PK' ? 'selected' : '' }}>Pakistan</option>
                                    <option value="US" {{ old('country') === 'US' ? 'selected' : '' }}>United States</option>
                                    <option value="GB" {{ old('country') === 'GB' ? 'selected' : '' }}>United Kingdom</option>
                                    <option value="AE" {{ old('country') === 'AE' ? 'selected' : '' }}>United Arab Emirates</option>
                                </select>
                            </div>
                            <div class="zt-register-field full">
                                <label for="street_address">Street address</label>
                                <input id="street_address" class="zt-register-input" name="street_address" value="{{ old('street_address') }}" autocomplete="address-line1">
                            </div>
                            <div class="zt-register-field full">
                                <label for="street_address_2">Street address 2 <small>(optional)</small></label>
                                <input id="street_address_2" class="zt-register-input" name="street_address_2" value="{{ old('street_address_2') }}" autocomplete="address-line2">
                            </div>
                            <div class="zt-register-field">
                                <label for="city">City</label>
                                <input id="city" class="zt-register-input" name="city" value="{{ old('city') }}" autocomplete="address-level2">
                            </div>
                            <div class="zt-register-field">
                                <label for="state">State / Province</label>
                                <input id="state" class="zt-register-input" name="state" value="{{ old('state') }}" autocomplete="address-level1">
                            </div>
                            <div class="zt-register-field">
                                <label for="postcode">Postcode</label>
                                <input id="postcode" class="zt-register-input" name="postcode" value="{{ old('postcode') }}" autocomplete="postal-code">
                            </div>
                        </div>
                    </section>

                    <section class="zt-register-section">
                        <div class="zt-register-section-head">
                            <h3>Account security</h3>
                            <p>Create a secure password and enter the code exactly as shown.</p>
                        </div>
                        <div class="zt-register-grid">
                            <div class="zt-register-field">
                                <label for="register_password">Password</label>
                                <div class="zt-register-input-wrap">
                                    <input id="register_password" class="zt-register-input" type="password" name="password" required autocomplete="new-password">
                                    <button class="zt-register-password-toggle" type="button" aria-label="Show password" onclick="ztToggleRegisterPassword('register_password', this)"><i class="fa-regular fa-eye"></i></button>
                                </div>
                            </div>
                            <div class="zt-register-field">
                                <label for="register_password_confirmation">Confirm password</label>
                                <div class="zt-register-input-wrap">
                                    <input id="register_password_confirmation" class="zt-register-input" type="password" name="password_confirmation" required autocomplete="new-password">
                                    <button class="zt-register-password-toggle" type="button" aria-label="Show password" onclick="ztToggleRegisterPassword('register_password_confirmation', this)"><i class="fa-regular fa-eye"></i></button>
                                </div>
                            </div>
                            <div class="zt-register-field full">
                                <label for="register_captcha_input">Security code</label>
                                <div class="zt-register-captcha">
                                    <div class="zt-register-captcha-image">
                                        <img id="zt-register-captcha" src="{{ captcha_src('flat') }}" alt="Security code">
                                    </div>
                                    <button class="zt-register-captcha-refresh" type="button" aria-label="Refresh security code" onclick="ztRefreshRegisterCaptcha()"><i class="fa-solid fa-rotate"></i></button>
                                    <input id="register_captcha_input" class="zt-register-input" name="captcha" placeholder="Enter code" required autocomplete="off" autocapitalize="none" spellcheck="false">
                                </div>
                            </div>
                        </div>
                    </section>

                    <button type="submit" class="zt-register-submit">Create account</button>
                </form>
            </section>

            <aside class="zt-register-side">
                <div class="zt-register-side-inner">
                    <img src="{{ asset('images/login-illustration.png') }}" alt="Hosting account illustration">
                    <div class="zt-register-side-copy">
                        <h2>Start managing your services</h2>
                        <p>One secure account for hosting, domains, invoices, and support.</p>
                    </div>
                    <div class="zt-register-benefits">
                        <div class="zt-register-benefit"><i class="fa-solid fa-check"></i><span>Manage services from one dashboard</span></div>
                        <div class="zt-register-benefit"><i class="fa-solid fa-check"></i><span>Track invoices and payments</span></div>
                        <div class="zt-register-benefit"><i class="fa-solid fa-check"></i><span>Access support securely</span></div>
                    </div>
                </div>
            </aside>
        </div>
    </main>

    <script>
        function ztToggleRegisterPassword(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 ztRefreshRegisterCaptcha() {
            const image = document.getElementById('zt-register-captcha');
            if (!image) return;
            const base = @json(captcha_src('flat'));
            image.src = base + (base.includes('?') ? '&' : '?') + 'refresh=' + Date.now();
        }
    </script>
</x-guest-layout>
