<div class="min-h-screen grid lg:grid-cols-2">

    {{-- LEFT SIDE (BRANDING) --}}
    <div class="hidden lg:flex flex-col justify-between bg-gradient-to-br from-primary to-primary/80 text-white p-10">

        <div>
            <x-logo mode="!fill-white" class="w-40 h-16"/>
        </div>

        <div class="space-y-6 max-w-md">
            <h1 class="text-3xl font-semibold leading-tight">
                {{ t('auth.register.hero.title') }}
            </h1>

            <p class="text-sm text-white/80">
                {{ t('auth.register.hero.subtitle') }}
            </p>

            <div class="space-y-2 text-sm text-white/70">
                <div>✓ {{ t('auth.hero.features.free') }}</div>
                <div>✓ {{ t('auth.hero.features.upgrade') }}</div>
                <div>✓ {{ t('auth.hero.features.upgrade') }}</div>
            </div>
        </div>

        <div class="text-xs text-white/50">
            © {{ date('Y') }} {{ config('app.name') }}. {{ t('auth.hero.copyright') }}
        </div>

    </div>


    {{-- RIGHT SIDE (REGISTER) --}}
    <div class="relative flex items-center justify-center p-6 overflow-hidden">

        <div class="w-full max-w-md space-y-6 z-10">

            {{-- MOBILE LOGO --}}
            <div class="lg:hidden text-center">
                <x-logo class="w-40 h-16 mx-auto"/>
            </div>

            {{-- CARD --}}
            <div class="bg-surface border border-border rounded-2xl p-6 shadow-card space-y-5">

                <div class="text-center">
                    <h2 class="text-xl font-semibold text-text">{{ t('auth.register.title') }}</h2>
                    <p class="text-sm text-text-muted">{{ t('auth.register.subtitle') }}</p>
                </div>

                <form wire:submit.prevent="register" class="space-y-4">
                    <div
                        x-data="{init() {this.$wire.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;}}"
                        x-init="init()"
                    >
                        <input type="hidden" wire:model="timezone">
                    </div>

                    {{-- NAME --}}
                    <div>
                        <input
                            type="text"
                            placeholder="{{ t('auth.register.name_placeholder') }}"
                            wire:model="name"
                            class="w-full border rounded-xl px-4 py-3 text-sm
                            {{ $errors->has('name') ? 'border-danger' : 'border-border' }}"
                        >

                        <div class="h-4 mt-1">
                            @error('name')
                            <p class="text-xs text-danger">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    {{-- EMAIL --}}
                    <div>
                        <input
                            type="text"
                            placeholder="{{ t('auth.register.email_placeholder') }}"
                            wire:model="email"
                            class="w-full border rounded-xl px-4 py-3 text-sm
                            {{ $errors->has('email') ? 'border-danger' : 'border-border' }}"
                        >

                        <div class="h-4 mt-1">
                            @error('email')
                            <p class="text-xs text-danger">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    {{-- PASSWORD --}}
                    <div>
                        <input
                            type="password"
                            placeholder="{{ t('auth.register.password_placeholder') }}"
                            wire:model="password"
                            class="w-full border rounded-xl px-4 py-3 text-sm
                            {{ $errors->has('password') ? 'border-danger' : 'border-border' }}"
                        >

                        <div class="h-4 mt-1">
                            @error('password')
                            <p class="text-xs text-danger">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    {{-- BUTTON --}}
                    <button
                        type="submit"
                        class="w-full bg-primary text-white py-3 rounded-xl transition hover:opacity-90"
                    >
                        {{ t('auth.register.button') }}
                    </button>

                </form>

                <div class="text-center text-sm">
                    <a href="{{ route('login') }}" class="text-primary hover:underline">
                        {{ t('auth.register.have_account') }}
                    </a>
                </div>

            </div>

        </div>

    </div>

</div>
