<x-layouts.guest title="Create Workspace">
    <div class="grid w-full gap-12 lg:grid-cols-[1.05fr_0.95fr]">
        <section class="space-y-8">
            <div class="space-y-5">
                <p class="text-sm font-semibold uppercase tracking-[0.25em] text-emerald-400">Sell faster on Instagram and WhatsApp</p>
                <h1 class="max-w-3xl text-5xl font-semibold tracking-tight text-white">Create your ChatSell OS workspace.</h1>
                <p class="max-w-3xl text-lg leading-8 text-slate-300">
                    Launch with a professional SaaS workspace designed for shared sales inboxes, structured follow-up, quotes, orders, and AI-assisted replies.
                </p>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur">
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-300">What you get</p>
                    <p class="mt-3 text-lg font-semibold text-white">Multi-tenant workspace</p>
                    <p class="mt-2 text-sm leading-6 text-slate-300">Company, branch, owner role, trial plan, default pipeline, and AI defaults provisioned automatically.</p>
                </div>
                <div class="rounded-[28px] border border-white/10 bg-white/5 p-5 backdrop-blur">
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-blue-300">Built for teams</p>
                    <p class="mt-3 text-lg font-semibold text-white">Operational from day one</p>
                    <p class="mt-2 text-sm leading-6 text-slate-300">Professional shell, secure auth, role scaffolding, and a roadmap ready for inbox, leads, and orders.</p>
                </div>
            </div>
        </section>

        <section class="rounded-[32px] border border-white/10 bg-white/6 p-8 shadow-[0_40px_140px_-40px_rgba(0,0,0,0.65)] backdrop-blur-xl">
            <form method="POST" action="{{ route('register.store') }}" class="space-y-5">
                @csrf

                <div class="space-y-2">
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Create account</p>
                    <h2 class="text-2xl font-semibold text-white">Start your workspace in minutes</h2>
                </div>

                <div>
                    <label for="company_name" class="mb-2 block text-sm font-medium text-slate-200">Company name</label>
                    <input id="company_name" name="company_name" value="{{ old('company_name') }}" class="w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-3 text-white outline-none ring-0 placeholder:text-slate-500" required>
                    @error('company_name') <p class="mt-2 text-sm text-rose-400">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="full_name" class="mb-2 block text-sm font-medium text-slate-200">Full name</label>
                    <input id="full_name" name="full_name" value="{{ old('full_name') }}" class="w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-3 text-white outline-none placeholder:text-slate-500" required>
                    @error('full_name') <p class="mt-2 text-sm text-rose-400">{{ $message }}</p> @enderror
                </div>

                <div class="grid gap-5 md:grid-cols-2">
                    <div>
                        <label for="email" class="mb-2 block text-sm font-medium text-slate-200">Email</label>
                        <input id="email" type="email" name="email" value="{{ old('email') }}" class="w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-3 text-white outline-none placeholder:text-slate-500" required>
                        @error('email') <p class="mt-2 text-sm text-rose-400">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="phone" class="mb-2 block text-sm font-medium text-slate-200">Phone</label>
                        <input id="phone" name="phone" value="{{ old('phone') }}" class="w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-3 text-white outline-none placeholder:text-slate-500">
                        @error('phone') <p class="mt-2 text-sm text-rose-400">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="grid gap-5 md:grid-cols-2">
                    <div>
                        <label for="country" class="mb-2 block text-sm font-medium text-slate-200">Country code</label>
                        <input id="country" name="country" value="{{ old('country') }}" maxlength="2" class="w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-3 uppercase text-white outline-none placeholder:text-slate-500" placeholder="LB">
                        @error('country') <p class="mt-2 text-sm text-rose-400">{{ $message }}</p> @enderror
                    </div>

                    <div></div>
                </div>

                <div class="grid gap-5 md:grid-cols-2">
                    <div>
                        <label for="password" class="mb-2 block text-sm font-medium text-slate-200">Password</label>
                        <input id="password" type="password" name="password" class="w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-3 text-white outline-none" required>
                        @error('password') <p class="mt-2 text-sm text-rose-400">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="password_confirmation" class="mb-2 block text-sm font-medium text-slate-200">Confirm password</label>
                        <input id="password_confirmation" type="password" name="password_confirmation" class="w-full rounded-xl border border-white/10 bg-slate-900 px-4 py-3 text-white outline-none" required>
                    </div>
                </div>

                <button class="w-full rounded-xl bg-emerald-500 px-4 py-3 font-semibold text-slate-950 transition hover:bg-emerald-400">
                    Create workspace
                </button>

                <div class="rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3 text-xs leading-6 text-slate-400">
                    Your workspace starts with human-reviewed AI assistance enabled, but no outbound message is ever sent automatically.
                </div>

                <p class="text-center text-sm text-slate-400">
                    Already have an account?
                    <a href="{{ route('login') }}" class="font-medium text-emerald-400 hover:text-emerald-300">Sign in</a>
                </p>
            </form>
        </section>
    </div>
</x-layouts.guest>
