<?php
$title = 'Login • ESP Admin';
ob_start();
?>
<style>

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
  }
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.6); }
  }
  .animated-bg {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }
  .login-card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
  }
  .chip-icon {
    animation: float 3s ease-in-out infinite;
  }
  .glow-button:hover {
    animation: pulse-glow 2s ease-in-out infinite;
  }
</style>

<div class="min-h-screen animated-bg flex items-center justify-center p-4 relative overflow-hidden">
  <!-- Elementos decorativos flotantes -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-20 left-10 w-32 h-32 bg-white/10 rounded-full blur-3xl"></div>
    <div class="absolute bottom-20 right-10 w-40 h-40 bg-white/10 rounded-full blur-3xl"></div>
    <div class="absolute top-1/2 left-1/3 w-24 h-24 bg-white/5 rounded-full blur-2xl"></div>
  </div>

  <div class="w-full max-w-md relative z-10">
    <!-- Logo/Ícono flotante -->
    <div class="text-center mb-8 chip-icon">
      <div class="inline-flex items-center justify-center w-20 h-20 bg-white rounded-2xl shadow-2xl mb-4">
        <svg class="w-12 h-12 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
        </svg>
      </div>
      <h1 class="text-3xl font-bold text-white mb-2">ESP Admin</h1>
      <p class="text-emerald-100">Sistema de gestión IoT</p>
    </div>

    <!-- Card de login -->
    <div class="login-card rounded-2xl shadow-2xl overflow-hidden">
      <div class="px-8 py-10">
        <div class="text-center mb-8">
          <h2 class="text-2xl font-bold text-gray-900 mb-2">Iniciar sesión</h2>
          <p class="text-gray-600 text-sm">Ingresa tus credenciales para continuar</p>
        </div>

        <form id="loginForm" class="space-y-6">
          <!-- Campo Usuario -->
          <div class="relative">
            <label for="usuario" class="block text-sm font-semibold text-gray-700 mb-2">Usuario</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
              </div>
              <input 
                type="text" 
                id="usuario" 
                class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all" 
                placeholder="Ingresa tu usuario"
                required
              >
            </div>
          </div>

          <!-- Campo Contraseña -->
          <div class="relative">
            <label for="clave" class="block text-sm font-semibold text-gray-700 mb-2">Contraseña</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
              </div>
              <input 
                type="password" 
                id="clave" 
                class="w-full pl-10 pr-4 py-3 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 transition-all" 
                placeholder="Ingresa tu contraseña"
                required
              >
            </div>
          </div>

          <!-- Recordar sesión -->
          <div class="flex items-center">
            <input 
              type="checkbox" 
              id="recordar" 
              class="w-4 h-4 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500 focus:ring-2"
            >
            <label for="recordar" class="ml-2 text-sm text-gray-700">
              Recordar mi sesión
            </label>
          </div>

          <!-- Botón de login -->
          <button 
            type="submit" 
            class="glow-button w-full py-3.5 px-4 bg-gradient-to-r from-emerald-600 to-emerald-500 text-white font-semibold rounded-xl hover:from-emerald-700 hover:to-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg"
          >
            <span class="flex items-center justify-center gap-2">
              <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
              </svg>
              Iniciar sesión
            </span>
          </button>
        </form>
      </div>

      <!-- Footer del card -->
      <div class="px-8 py-4 bg-gray-50 border-t border-gray-100">
        <p class="text-center text-xs text-gray-500">
          Sistema protegido • ESP Admin v1.0
        </p>
      </div>
    </div>

    <!-- Info adicional -->
    <div class="text-center mt-6">
      <a href="https://penki.com.ar/contacto?dominio=ESP" class="bg-white text-indigo-600 font-semibold px-6 py-3 rounded hover:bg-gray-100 transition">
        Contacto
      </a>
    </div>
  </div>
</div>

<?php
$content = ob_get_clean();
// Si no se está renderizando como parcial, incluir el layout por compatibilidad
if (!defined('RENDER_PARTIAL')) {
  $layoutLogin = __DIR__ . '/layout_login.php';
  $layoutLoginAlt = __DIR__ . '/../layouts/layout_login.php';
  if (file_exists($layoutLoginAlt)) { $layoutLogin = $layoutLoginAlt; }
  include $layoutLogin;
}
