<x-layouts.weshare>
  <div class="min-h-screen safe-bottom flex flex-col px-5 pt-16 pb-10 max-w-md mx-auto w-full">
    <div class="mb-10 text-center space-y-2">
      <p class="text-[13px] font-semibold tracking-wide uppercase text-primary">WeShare</p>
      <h1 class="text-[26px] font-bold tracking-tight text-foreground">{{ __('Create your account') }}</h1>
      <p class="text-[15px] text-muted-foreground">{{ __('Start sharing expenses in minutes.') }}</p>
    </div>

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

      <x-error-alert />

      <input type="hidden" name="name" value="{{ old('name', __('WeShare User')) }}" />

      <div class="space-y-2">
        <label class="text-[13px] font-medium text-foreground" for="email">{{ __('Email') }}</label>
        <input
          id="email"
          type="email"
          name="email"
          value="{{ old('email') }}"
          autocomplete="email"
          required
          autofocus
          class="h-12 w-full rounded-xl px-4 outline-none bg-card border border-border"
        />
      </div>

      <div class="space-y-2">
        <label class="text-[13px] font-medium text-foreground" for="password">{{ __('Password') }}</label>
        <input
          id="password"
          type="password"
          name="password"
          autocomplete="new-password"
          required
          class="h-12 w-full rounded-xl px-4 outline-none bg-card border border-border"
        />
      </div>

      <div class="space-y-2">
        <label class="text-[13px] font-medium text-foreground" for="password_confirmation">{{ __('Confirm password') }}</label>
        <input
          id="password_confirmation"
          type="password"
          name="password_confirmation"
          autocomplete="new-password"
          required
          class="h-12 w-full rounded-xl px-4 outline-none bg-card border border-border"
        />
      </div>

      <x-primary-button variant="pill">
        {{ __('Sign up') }}
      </x-primary-button>
    </form>

    <p class="mt-8 text-center text-[15px] text-muted-foreground">
      {{ __('Already have an account?') }}
      <a href="{{ route('login') }}" class="font-semibold text-primary">{{ __('Sign in') }}</a>
    </p>
  </div>
</x-layouts.weshare>
