<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">{{ __('Welcome back') }}</h1>
      <p class="text-[15px] text-muted-foreground">{{ __('Sign in to continue.') }}</p>
    </div>

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

      <x-auth-session-status class="mb-0" :status="session('status')" />

      <x-error-alert class="mb-0" />

      <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="current-password"
          required
          class="h-12 w-full rounded-xl px-4 outline-none bg-card border border-border"
        />
      </div>

      <div class="text-right">
        <a href="{{ route('password.request') }}" class="text-[14px] font-medium text-primary">
          {{ __('Forgot password?') }}
        </a>
      </div>

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

    <p class="mt-8 text-center text-[15px] text-muted-foreground">
      {{ __('Don’t have an account?') }}
      <a href="{{ route('register') }}" class="font-semibold text-primary">{{ __('Create one') }}</a>
    </p>
  </div>
</x-layouts.weshare>
