@extends('layouts.auth_login')

@section('content')

<div class="bg-shapes" aria-hidden="true">
  <span class="shape shape--1"></span>
  <span class="shape shape--2"></span>
  <span class="shape shape--3"></span>
</div>

<main class="auth-shell">
  <div class="container-fluid g-0">
    <div class="row g-0 min-vh-100">

      <!-- ============================================
           IZQUIERDA: pitch editorial (solo lg+)
           ============================================ -->
      <aside class="col-lg-7 col-xl-7 d-none d-lg-flex auth-aside">
        <div class="auth-aside__inner">

          <header class="aside-top">
            <a class="brand" aria-label="inicio">
                <img src="{{ asset('fondo/5.jpg') }}">
            </a>
          </header>

          <div class="aside-pitch">
            <p class="eyebrow">
              <span class="eyebrow__dot" aria-hidden="true"></span>
              Plataforma corporativa MLM
            </p>
            <h1 class="display-headline">
              Software MLM<br>de <em>grado empresarial</em>.
            </h1>
            <p class="display-sub">
              Compensaciones, kits de socio, árboles Unilevel, Matriz forzada, Binario, Binario hibrido, Pass up, Follow Me y comisiones en tiempo real. Construido para operadores que no toleran fricción.
            </p>
          </div>

          <footer class="aside-foot">
            <blockquote class="testimonial">
              <p>&ldquo;Migramos 18,000 distribuidores en un fin de semana. Cero incidencias, cero soporte de guardia.&rdquo;</p>
              <cite>
                <span class="testimonial__avatar" aria-hidden="true">CM</span>
                <span class="testimonial__who">
                  <strong>Carla Méndez</strong>
                  <span>Dir. de Operaciones, Helix Group</span>
                </span>
              </cite>
            </blockquote>

            <div class="metrics">
              <div class="metric">
                <span class="metric__num">240<sup>+</sup></span>
                <span class="metric__lbl">redes activas</span>
              </div>
              <div class="metric">
                <span class="metric__num">99.99<sup>%</sup></span>
                <span class="metric__lbl">uptime SLA</span>
              </div>
              <div class="metric">
                <span class="metric__num">42</span>
                <span class="metric__lbl">países servidos</span>
              </div>
            </div>

          </footer>

        </div>
      </aside>

      <!-- ============================================
           DERECHA: formulario
           ============================================ -->
      <section class="col-12 col-lg-5 col-xl-5 auth-main">
        <div class="auth-main__inner">

          <!-- Marca solo visible en móvil/tablet -->
          <a href="#" class="brand brand--mobile d-lg-none" aria-label="Sinergia, inicio">
            <img src="{{ asset('fondo/5.jpg') }}" alt="Sinergia">
          </a>

          <article class="auth-card">
            <header class="auth-card__head">
              <h2 class="form-title">Acceder al panel</h2>
              <p class="form-sub">Identifícate con tu correo corporativo.</p>
            </header>

            <form class="login-form" novalidate autocomplete="on" method="POST" action="{{ route('login') }}">
              {{ csrf_field() }}

              <div class="field">
                <label for="email" class="field__label">Correo corporativo</label>
                <div class="field__input">
                  <input type="email" id="email" name="user_email" class="correo"
                         autocomplete="email"
                         placeholder="nombre@empresa.com" required value="{{ old('user_email') }}">
                </div>
              </div>

              <div class="field">
                <div class="field__row">
                  <label for="password" class="field__label">Contraseña</label>
                    <a href="#" class="link-soft" data-bs-toggle="modal" data-bs-target="#modal-reset">
                      ¿Olvidaste tu contraseña?
                    </a>
                </div>
                <div class="field__input">
                  <input type="password" id="password" name="password" class="password"
                         autocomplete="current-password"
                         placeholder="Mínimo 8 caracteres" required>
                  <button type="button" class="field__toggle"
                          data-toggle-password
                          aria-label="Mostrar u ocultar contraseña">
                    <i class="bi bi-eye" aria-hidden="true"></i>
                  </button>
                </div>
              </div>

              <button type="submit" class="btn-primary-cta">
                <span>Acceder al panel</span>
                <i class="bi bi-arrow-right" aria-hidden="true"></i>
              </button>

            </form>
          </article>

        </div>
      </section>

    </div>
  </div>

</main>




{{-- ============================================================
     Modal de recuperación · Bootstrap 5 nativo
     ============================================================ --}}
<div class="modal fade modal-reset" id="modal-reset"
     tabindex="-1" aria-labelledby="resetTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <button type="button" class="modal-reset__close"
              data-bs-dismiss="modal" aria-label="Cerrar">
        <i class="bi bi-x-lg" aria-hidden="true"></i>
      </button>

      <div class="modal-body">

        <div class="modal-reset__icon" aria-hidden="true">
          <svg viewBox="0 0 28 28" fill="none">
            <rect x="3.5" y="6.5" width="21" height="15" rx="3"
                  stroke="currentColor" stroke-width="1.75"/>
            <path d="M5 9.5 L14 16 L23 9.5"
                  stroke="currentColor" stroke-width="1.75"
                  stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="22" cy="7" r="3.5" fill="#fff"/>
            <circle cx="22" cy="7" r="2.5" fill="currentColor"/>
          </svg>
        </div>

        <h2 class="modal-reset__title" id="resetTitle">
          Restablecer contraseña
        </h2>
        <p class="modal-reset__sub">
          Te enviaremos un enlace seguro al correo asociado a tu cuenta. El enlace caduca en 30 minutos.
        </p>
        
        <form class="reset-form" action="{{route('autenticacion.clave')}}" method="post">
          {{ csrf_field() }}

          <div class="field">
            <label for="reset-email" class="field__label">Correo corporativo</label>
            <div class="field__input">
              <input type="email" id="reset-email" name="email"
                     autocomplete="email"
                     placeholder="nombre@empresa.com" required
                     value="{{ old('email') }}">
            </div>
          </div>

          <button type="submit" class="btn-primary-cta">
            <span>Enviar enlace de recuperación</span>
            <i class="bi bi-arrow-right" aria-hidden="true"></i>
          </button>

          <button type="button" class="btn-tertiary" data-bs-dismiss="modal">
            <i class="bi bi-arrow-left" aria-hidden="true"></i>
            <span>Volver al inicio de sesión</span>
          </button>
        </form>

      </div>
    </div>
  </div>
</div>

@endsection