<x-guest-layout>
  <style>
    body {
      background: #f8faff;
      font-family: 'Inter', sans-serif;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1rem;
    }

    .login-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      width: 100%;
      max-width: 400px;
      padding: 2rem;
      border: 1px solid #e5e7eb;
      transition: 0.3s ease;
    }

    .login-card:hover {
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
      transform: translateY(-2px);
    }

    .login-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 1.5rem;
    }

    .login-logo img {
      height: 50px;
    }

    h1 {
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 0.5rem;
      color: #1e293b;
    }

    p.subtitle {
      text-align: center;
      color: #6b7280;
      font-size: 0.9rem;
      margin-bottom: 1.5rem;
    }

    .btn-primary {
      background: linear-gradient(to right, #2563eb, #3b82f6);
      color: white;
      font-weight: 600;
      transition: all 0.2s;
      width: 100%;
      border: none;
      border-radius: 8px;
      padding: 0.6rem 1rem;
    }

    .btn-primary:hover {
      background: linear-gradient(to right, #1e40af, #2563eb);
      transform: translateY(-1px);
    }

    @media (max-width: 640px) {
      .login-card {
        padding: 1.5rem;
      }

      .login-logo img {
        height: 42px;
      }

      h1 {
        font-size: 1.25rem;
      }

      p.subtitle {
        font-size: 0.85rem;
      }
    }
  </style>

  <div class="login-card">
 <div class="login-logo">

  <video
    autoplay
    muted
    loop
    playsinline
    preload="auto"
    class="w-full h-full object-contain"
  >
    <source src="{{ asset('public/assets/logo-nusaotp.webm') }}" type="video/webm">
  </video>

</div>

    <h1>Masuk ke Akun Kamu</h1>
    <p class="subtitle">Gunakan email & password terdaftar</p>

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

     <form method="POST" action="{{ route('login') }}">
      @csrf

       <div>
        <x-input-label for="email" :value="__('Email')" />
        <x-text-input id="email"
          class="block mt-1 w-full border-gray-300 rounded-md focus:border-blue-500 focus:ring focus:ring-blue-100"
          type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
        <x-input-error :messages="$errors->get('email')" class="mt-2" />
      </div>

       <div class="mt-4">
        <x-input-label for="password" :value="__('Password')" />
        <x-text-input id="password"
          class="block mt-1 w-full border-gray-300 rounded-md focus:border-blue-500 focus:ring focus:ring-blue-100"
          type="password" name="password" required autocomplete="current-password" />
        <x-input-error :messages="$errors->get('password')" class="mt-2" />
      </div>

       <div class="flex items-center justify-between mt-4">
        <label for="remember_me" class="inline-flex items-center text-sm text-gray-600">
          <input id="remember_me" type="checkbox"
            class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500"
            name="remember">
          <span class="ms-2">Ingat saya</span>
        </label>

        @if (Route::has('password.request'))
          <a href="{{ route('password.request') }}"
             class="text-sm text-blue-600 hover:text-blue-800 font-medium">
            Lupa Password?
          </a>
        @endif
      </div>
      
 <div class="mt-4">
    <div class="cf-turnstile"
        data-sitekey="0x4AAAAAACFFz3ZX3qh8W-cP"
        data-theme="light">
    </div>

    @error('cf_turnstile')
        <p class="text-red-600 text-sm mt-2">{{ $message }}</p>
    @enderror
</div>


 <div class="mt-6">
  <button type="submit" class="btn-primary flex items-center justify-center gap-2">
    <!-- 🔹 Ikon Login -->
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5m5 5H3"/>
    </svg>
    Masuk
  </button>
</div>


       <p class="text-center text-sm text-gray-500 mt-4">
        Belum punya akun?
        <a href="{{ route('register') }}" class="text-blue-600 hover:underline font-medium">Daftar di sini</a>
      </p>
    </form>
  </div>
</x-guest-layout>
