/* Pantalla 1 — Login / Acceso
   Layout split estilo "item": formulario a la izquierda sobre el fondo de la app,
   foto de planta nítida a la derecha (fundido vertical en el borde izquierdo).
   Marca arriba-izquierda = lockup IDÉNTICO al rail (punto sage + wordmark girado −90°). */

function Login({ onEnter }) {
  const [show, setShow] = React.useState(false);
  return (
    <div className="login fade-in">
      {/* lockup de marca idéntico al rail de la app */}
      <div className="login-brand" aria-label="Phlou">
        <span className="dot" aria-hidden="true"></span>
        <span className="wm-logo-wrap"><img className="wm-logo" src="phlou/logo-navy.svg" alt="Phlou" /></span>
      </div>

      <section className="login-form">
        <form className="login-card" onSubmit={(e) => { e.preventDefault(); onEnter(); }}>
          <h2>Inicia sesión</h2>
          <div className="s">Entra a tu planta y retoma el flujo.</div>

          <div className="field">
            <label htmlFor="slug">Empresa</label>
            <input id="slug" className="input mono" defaultValue="confecciones-norte" />
          </div>
          <div className="field">
            <label htmlFor="email">Email</label>
            <input id="email" className="input" type="email" defaultValue="marcela@cnorte.co" placeholder="tu@empresa.com" />
          </div>
          <div className="field">
            <label htmlFor="pass">Contraseña</label>
            <div className="input-wrap">
              <input id="pass" className="input has-eye" type={show ? "text" : "password"} defaultValue="phlou2026" />
              <button type="button" className="eye" aria-label="Ver contraseña" onClick={() => setShow(s => !s)}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" />
                </svg>
              </button>
            </div>
          </div>

          <button type="submit" className="btn btn-primary">Ingresar</button>

          <div className="alt">o continúa con</div>
          <button type="button" className="btn-oauth" onClick={onEnter}>
            <Icon name="google" style={{ width: 16, height: 16, strokeWidth: 1.6 }} />
            Google <span className="soon">Pronto</span>
          </button>

          <div className="foot">¿No tienes cuenta? <a onClick={onEnter}>Crea tu planta</a></div>
        </form>
      </section>

      {/* foto de planta nítida; el borde izquierdo se funde con el fondo (máscara vertical 60px) */}
      <aside className="login-visual">
        <img src="phlou/hero-login.png" alt="Operaria en máquina de confección" />
      </aside>
    </div>
  );
}

Object.assign(window, { Login });