{{-- resources/views/livewire/login.blade.php --}}
<div class="min-h-screen bg-gradient-to-br from-orange-50 via-amber-50 to-yellow-50 flex items-center justify-center px-4">
  <div class="w-full max-w-md">
    <div class="bg-white/95 backdrop-blur rounded-2xl shadow-xl border border-amber-100 overflow-hidden">
      <!-- Brand / Header -->
      <div class="px-8 pt-8">
        <div class="flex items-center justify-center gap-4">
          <img
            src="{{ asset('assets/pemkot.png') }}"
            alt="Logo Pemerintah Kota"
            class="h-12 w-12 object-contain"
          />
          <img
            src="{{ asset('assets/pendidikan.png') }}"
            alt="Logo Dinas Pendidikan"
            class="h-12 w-12 object-contain"
          />
        </div>

        <h1 class="mt-3 text-center text-lg sm:text-xl font-bold text-gray-800 leading-snug tracking-wide">
          KONSELING <span class="hidden sm:inline">•</span> SMP NEGERI 4 AMBON
        </h1>
        <p class="mt-1 text-center text-sm text-gray-500">Silakan login menggunakan akun Anda</p>
      </div>

      <!-- Alerts -->
      <div class="px-8 mt-4">
        @error('username')
          <div class="mb-3 rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm px-3 py-2">{{ $message }}</div>
        @enderror
        @error('password')
          <div class="mb-3 rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm px-3 py-2">{{ $message }}</div>
        @enderror
      </div>

      <!-- Form -->
      <form wire:submit.prevent="login" class="px-8 pb-8 pt-2 space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
          <input
            type="text"
            wire:model.defer="username"
            class="w-full rounded-xl border border-gray-300 focus:border-orange-500 focus:ring-orange-500 p-3 text-gray-800 placeholder-gray-400"
            placeholder="username"
            autocomplete="username"
          />
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
          <input
            type="password"
            wire:model.defer="password"
            class="w-full rounded-xl border border-gray-300 focus:border-orange-500 focus:ring-orange-500 p-3 text-gray-800 placeholder-gray-400"
            placeholder="••••••••"
            autocomplete="current-password"
          />
        </div>

        <button
          type="submit"
          wire:loading.attr="disabled"
          class="w-full inline-flex items-center justify-center rounded-xl bg-orange-600 text-white font-medium py-3 hover:bg-orange-700 transition shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"
        >
          <span wire:loading.remove>Masuk</span>
          <span wire:loading>Memproses…</span>
        </button>

        <div class="text-center text-xs text-gray-500 mt-2">
          Belum punya akun?
          <a href="{{ route('register') }}" class="text-orange-600 hover:underline">Registrasi di sini</a>
        </div>

        <div class="text-center text-xs text-gray-400 mt-2">
          &copy; {{ now()->year }} Aplikasi Konseling • Semua hak dilindungi
        </div>
      </form>
    </div>

    <!-- Footer kecil -->
    <div class="mt-4 text-center">
      <a href="{{ route('login') }}" class="text-xs text-gray-400 hover:text-gray-500">Butuh bantuan? Hubungi admin</a>
    </div>
  </div>
</div>