@extends('app.shell')

@section('body')
  <div class="min-h-screen safe-bottom animate-in-up">
    <div class="app-page-wrap pt-6 md:pt-6 lg:pt-8 pb-10 md:pb-10 space-y-6">
      <x-page-header title="{{ __('Onboarding') }}" />

      <div class="apple-card p-5 space-y-4">
        <div>
          <p class="section-header mb-2">{{ __('Welcome') }}</p>
          <p class="text-[14px] text-muted-foreground">
            {{ __('Pick a name and avatar so your group can recognize you.') }}
          </p>
        </div>

        <form method="POST" action="{{ route('app.onboarding.complete') }}" class="space-y-4">
          @csrf

          <div>
            <p class="text-[12px] mb-2 px-0.5 text-muted-foreground">{{ __('Display name') }}</p>
            <input
              type="text"
              name="display_name"
              value="{{ old('display_name') }}"
              placeholder="{{ __('Your name') }}"
              class="w-full apple-card-inset px-4 py-3.5 text-[15px] text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-2 focus:ring-primary/15 rounded-2xl"
              required
            />
            @error('display_name')
              <p class="mt-2 text-[12px] text-destructive">{{ $message }}</p>
            @enderror
          </div>

          <div>
            <x-emoji-picker name="avatar" label="{{ __('Avatar') }}" value="🙂" />
            @error('avatar')
              <p class="mt-2 text-[12px] text-destructive">{{ $message }}</p>
            @enderror
          </div>

          <button
            type="submit"
            class="w-full py-3.5 rounded-2xl text-[15px] font-semibold bg-primary text-primary-foreground active:scale-[0.98] transition-transform"
          >
            {{ __('Continue') }}
          </button>
        </form>
      </div>
    </div>
  </div>
@endsection