@extends('layouts.public')

@section('title', __('auth.register_title'))

@section('content')
<section class="bg-gradient-to-br from-cyan-50 via-white to-emerald-50">
    <div class="mx-auto grid min-h-[calc(100svh-4rem)] max-w-7xl items-center gap-8 px-4 py-10 lg:grid-cols-[.9fr_1fr] lg:px-6">
        <div>
            <div class="rounded-lg border border-cyan-100 bg-white p-5 shadow-sm sm:p-7">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex items-start gap-3">
                        <span class="grid h-11 w-11 place-items-center rounded-md bg-emerald-100 text-emerald-700">
                            <i data-lucide="user-plus" class="h-5 w-5"></i>
                        </span>
                        <div>
                            <h1 class="text-2xl font-black text-cyan-950">{{ __('auth.register_heading') }}</h1>
                            <p class="mt-1 text-sm leading-6 text-slate-600">{{ __('auth.register_intro') }}</p>
                        </div>
                    </div>
                    <x-language-switcher compact />
                </div>

                <form method="POST" action="{{ route('register.store') }}" class="mt-6 grid gap-4">
                    @csrf
                    <label class="grid gap-2 text-sm font-bold text-slate-700">
                        {{ __('auth.name') }}
                        <input name="name" value="{{ old('name') }}" autocomplete="name" placeholder="{{ __('auth.visitor_name') }}" class="rounded-md border border-slate-300 px-3 py-3" required>
                    </label>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <label class="grid gap-2 text-sm font-bold text-slate-700">
                            {{ __('auth.email') }}
                            <input name="email" type="email" value="{{ old('email') }}" autocomplete="email" placeholder="name@example.com" class="rounded-md border border-slate-300 px-3 py-3" required>
                        </label>
                        <label class="grid gap-2 text-sm font-bold text-slate-700">
                            {{ __('auth.phone') }}
                            <input name="phone" value="{{ old('phone') }}" autocomplete="tel" placeholder="+62" class="rounded-md border border-slate-300 px-3 py-3">
                        </label>
                    </div>
                    <label class="grid gap-2 text-sm font-bold text-slate-700">
                        {{ __('auth.address') }}
                        <textarea name="address" rows="3" placeholder="{{ __('auth.address_placeholder') }}" class="rounded-md border border-slate-300 px-3 py-3">{{ old('address') }}</textarea>
                    </label>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <label class="grid gap-2 text-sm font-bold text-slate-700">
                            {{ __('auth.password') }}
                            <input name="password" type="password" autocomplete="new-password" placeholder="{{ __('auth.password_min') }}" class="rounded-md border border-slate-300 px-3 py-3" required>
                        </label>
                        <label class="grid gap-2 text-sm font-bold text-slate-700">
                            {{ __('auth.password_confirmation') }}
                            <input name="password_confirmation" type="password" autocomplete="new-password" placeholder="{{ __('auth.password_confirmation_placeholder') }}" class="rounded-md border border-slate-300 px-3 py-3" required>
                        </label>
                    </div>
                    <button class="inline-flex items-center justify-center gap-2 rounded-md bg-cyan-600 px-4 py-3 font-black text-white hover:bg-orange-400 hover:text-cyan-950">
                        <i data-lucide="check-circle-2" class="h-4 w-4"></i>
                        {{ __('auth.submit_register') }}
                    </button>
                    <a href="{{ route('login') }}" class="text-center text-sm font-black text-cyan-700 hover:text-orange-600">{{ __('auth.login_link') }}</a>
                </form>
            </div>
        </div>

        <div class="hidden lg:block">
            <div class="rounded-lg bg-gradient-to-br from-cyan-600 via-sky-500 to-emerald-500 p-6 text-white shadow-sm">
                <p class="text-sm font-black text-amber-100">{{ __('auth.account_benefits') }}</p>
                <h2 class="mt-3 text-4xl font-black leading-tight">{{ __('auth.account_benefits_heading') }}</h2>
                <div class="mt-6 grid gap-3">
                    @foreach([
                        ['Tiket QR', 'Simpan QR tiket dan riwayat kunjungan di dashboard.'],
                        ['Program Renang', 'Daftar sekolah renang dan les privat dari akun yang sama.'],
                        ['Progres Peserta', 'Pantau absensi, progres, dan catatan evaluasi digital.'],
                    ] as [$label, $text])
                        <div class="rounded-lg border border-white/30 bg-white/20 p-4">
                            <p class="font-black">{{ $label }}</p>
                            <p class="mt-2 text-sm leading-6 text-cyan-50">{{ $text }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endsection