<section class="auth-section">
  <div class="container auth-grid">
    <div class="auth-card reveal">
      <span class="eyebrow">Regístrate</span>
      <h2>Crea tu cuenta PetCare</h2>
      <p>Únete para guardar tus pedidos, ver ofertas y recibir recomendaciones personalizadas.</p>
      <form class="auth-form" id="registerForm" method="post" action="index.php?page=auth&action=register">
        <label>
          Nombre completo
          <input type="text" name="nombre" placeholder="Tu nombre completo" class="validate-input" data-type="name" autocomplete="name" pattern="[A-Za-zÁÉÍÓÚáéíóúÑñ ]+" required />
        </label>
        <label>
          Email
          <input type="email" name="email" placeholder="tuemail@email.com" class="validate-input" data-type="email" required />
        </label>
        <label>
          Teléfono
          <input type="tel" name="telefono" placeholder="Tu número de contacto" class="validate-input" data-type="phone" required />
        </label>
        <label>
          Ciudad
          <input type="text" name="ciudad" placeholder="Ciudad o barrio" class="validate-input" data-type="text" required />
        </label>
        <label>
          Tipo de mascota
          <input type="text" name="tipo_mascota" placeholder="Perro, gato u otro" class="validate-input" data-type="text" required />
        </label>
        <label>
          Contraseña
          <input type="password" name="password" placeholder="Escribe una contraseña" class="validate-input" data-type="password" required />
        </label>
        <label>
          Confirmar contraseña
          <input type="password" name="confirm_password" placeholder="Repite tu contraseña" class="validate-input" data-type="confirm-password" required />
        </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>
          Crear cuenta
        </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>
    </div>
  </div>
</section>
