<section class="auth-section">
  <div class="container auth-grid">
    <div class="auth-card reveal">
      <span class="eyebrow">Iniciar sesión</span>
      <h2>Ingresa tu usuario y contraseña</h2>
      <p>Accede a tu cuenta PetCare para revisar pedidos, guardar favoritos y disfrutar de ofertas especiales.</p>
      <form class="auth-form" id="loginForm" method="post" action="index.php?page=auth&action=login">
        <label>
          Usuario
          <div class="input-icon">
            <span class="field-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M20 21a8 8 0 0 0-16 0"></path>
                <circle cx="12" cy="8" r="4"></circle>
              </svg>
            </span>
            <input type="text" name="usuario" placeholder="Nombre de usuario" class="validate-input" data-type="text" required />
          </div>
        </label>
        <label>
          Contraseña
          <div class="input-icon">
            <span class="field-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <rect x="5" y="11" width="14" height="9" rx="2"></rect>
                <path d="M8 11V8a4 4 0 1 1 8 0v3"></path>
              </svg>
            </span>
            <input type="password" name="password" placeholder="Contraseña" class="validate-input" data-type="password" required />
          </div>
        </label>
        <button type="submit" class="btn btn-primary">
          <span class="person-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M20 21a8 8 0 0 0-16 0"></path>
              <circle cx="12" cy="8" r="4"></circle>
            </svg>
          </span>
          Ingresar
        </button>
        <button type="button" class="btn btn-google" aria-label="Iniciar sesión con Google">
          <span class="google-icon">G</span>
          Iniciar sesión con Google
        </button>
      </form>
      <p style="margin-top: 1rem; color: var(--muted);">
        ¿Aún no tienes cuenta? <a href="index.php?page=registro">Regístrate aquí</a>
      </p>
    </div>
  </div>
</section>
